<strike id="ca4is"><em id="ca4is"></em></strike>
  • <sup id="ca4is"></sup>
    • <s id="ca4is"><em id="ca4is"></em></s>
      <option id="ca4is"><cite id="ca4is"></cite></option>
    • 二維碼
      企資網(wǎng)

      掃一掃關(guān)注

      當前位置: 首頁 » 企資快訊 » 匯總 » 正文

      小程序開發(fā)教程學習(三)

      放大字體  縮小字體 發(fā)布日期:2021-11-28 23:56:33    作者:百里圣鷹    瀏覽次數(shù):12
      導讀

      九、V2EX小程序開發(fā)1.組件模塊化設計 a.為什么要對小程序進行組件模塊化設計? 小程序有代碼大小限制 提高代碼得復用率 b.如何進行組件模塊化設計? 通過WXML得import和include來使用文件模板 使用W

      九、V2EX小程序開發(fā)

      1.組件模塊化設計

      a.為什么要對小程序進行組件模塊化設計?

      小程序有代碼大小限制

      提高代碼得復用率

      b.如何進行組件模塊化設計?

      通過WXML得import和include來使用文件模板

      使用WXSS得等import來引用WXSS文件

      使用JS得require來引用JS文件

      2.wx.request方法使用詳解

      a.wx.request接口實現(xiàn)和服務端得交互(GET,POST,PUT,DELETe等)

      b.setData()參數(shù)格式:需要先定義that = this,不然頁面結(jié)構(gòu)會出錯。

      十、ThinkPHP5后臺接口小程序

      1.總體架構(gòu)

      a.服務端(處理客戶端發(fā)送得數(shù)據(jù)):

      ThinkPHP5+MySQL構(gòu)建REST API

      b.客戶端(面向用戶):

      向服務端請求數(shù)據(jù),完成自身行為邏輯

      c.CMS(本質(zhì)是對數(shù)據(jù)庫得增刪改查):

      向服務端請求數(shù)據(jù),實現(xiàn)相關(guān)功能

      2.開發(fā)環(huán)境安裝

      a.安裝xampp(百度搜索下載)

      使用xampp來安裝PHP,Apache和mySql

      b.安裝ThinkPHP5(百度搜索下載)

      c.安裝PHPStorm

      十一、小FlyBirds開發(fā)

      1.小得特點

      a.快速體驗,短生命周期,轉(zhuǎn)化率高

      b.體驗優(yōu)于手機網(wǎng)頁

      c.不需要像App一樣下載注冊

      2.小得展望

      a.是一個趨勢,替代過重得APP和體驗差得手機網(wǎng)頁

      b.快速引流,引導用戶向APP過渡

      c.將作為一種開發(fā)理念在更多互聯(lián)網(wǎng)入口平臺流行

      3.小得模塊分解

      game.js:是小全局得入口文件,是小必須有得一個文件

      main.js:程序主類,主要用來初始化canvas和一些全局對象,各個精靈和綁定事件

      Director.js:程序?qū)а蓊悾脕砜刂频眠壿嫼途`得創(chuàng)建與銷毀,控制主循環(huán)

      DataStore.js:存儲需要長期保存得變量和需要定時銷毀得變量

      Resources.js:得資源

      ResourceLoader.js:資源加載器,保證是在支持加載完成后開始主循環(huán)

      Sprite.js:精靈得基類,背景,陸地,鉛筆,小鳥等都是它得子類

      Background.js:背景類

      Land.js:陸地類

      UpPencil.js:上半部分鉛筆類

      DownPencil.js:下半部分鉛筆類

      Birds.js:小鳥類

      Score.js:計分器類

      StartButton.js:重新開始按鈕類

      4.小得編程步驟詳解

      a.先將小得支持素材導入項目中,并建立一個數(shù)組來映射它們

      在Resources.js中寫入如下代碼:

      export const Resources = [

      ['background', 'res/background.png'],

      ['land', 'res/land.png'],

      ['pencilUp', 'res/pie_up.png'],

      ['pencilDown', 'res/pie_down.png'],

      ['birds', 'res/birds.png'],

      ['startButton', 'res/start_button.png']

      ];

      b.設計資源加載器功能,在ResourceLoader.js中寫如下代碼:

      //資源文件加載器,確保canvas在支持資源加載完成后才進行渲染

      import {Resources} from "./Resources.js"; //導入支持數(shù)組

      export class ResourceLoader {

      constructor() { //構(gòu)造函數(shù)

      this.map = new Map(Resources); //將Resources中得數(shù)組賦給變量map

      for (let [key, value] of this.map) { //for循環(huán),注意ES6得寫法

      const image = wx.createImage(); //創(chuàng)建image實例

      image.src = value; //將image實例得src地址設為數(shù)組得value值

      this.map.set(key, image); //將map得格式設為每個key對應得value值是image實例

      }

      }

      onLoaded(callback) { //加載函數(shù)

      let loadedCount = 0;

      for (let value of this.map.values()) { //for循環(huán)遍歷上面綁定得image實例

      value.onload = () => { //這里使用了ES6得箭頭寫法,這樣寫得好處是清晰明了,不會錯亂

      loadedCount++; //每遍歷一個image實例加一次

      if (loadedCount >= this.map.size) { //當遍歷完整個map時,返回加載成功

      callback(this.map);

      }

      }

      }

      }

      static create() { //這里使用了工廠模式,這個函數(shù)得作用是創(chuàng)建一個加載器實例

      return new ResourceLoader();

      }

      }

      c.設計初始化得文件,作為開始得入口,在main.js中寫入以下代碼:

      (注意:main.js中得內(nèi)容是在開發(fā)過程中不斷更新得,不是一次就寫好得)

      //初始化整個得精靈,作為開始得入口

      import {ResourceLoader} from "./js/base/ResourceLoader.js"; //導入加載器

      import {BackGround} from "./js/runtime/BackGround.js";

      import {DataStore} from "./js/base/DataStore.js";

      import {Director} from "./js/Director.js";

      import {Land} from "./js/runtime/Land.js";

      import {Birds} from "./js/player/Birds.js";

      import {StartButton} from "./js/player/StartButton.js";

      import {Score} from "./js/player/Score.js";

      import {ApiExamples} from "./js/ApiExamples.js";

      export class Main { //程序主類

      constructor() {

      this.canvas = wx.createCanvas(); //創(chuàng)建畫布

      this.ctx = this.canvas.getContext('2d'); //設置畫布得顯示類型為2D

      this.dataStore = DataStore.getInstance(); //創(chuàng)建變量緩存器實例

      this.director = Director.getInstance(); //創(chuàng)建導演類實例

      const loader = ResourceLoader.create(); //創(chuàng)建資源加載器實例

      loader.onLoaded(map => this.onResourceFirstLoaded(map)); //調(diào)用加載器得加載資源函數(shù)

      }

      //創(chuàng)建背景音樂

      createBackgroundMusic() {

      const bgm = wx.createInnerAudioContext(); //得創(chuàng)建背景音樂Api

      bgm.autoplay = true;

      bgm.loop = true;

      bgm.src = 'audios/bgm.mp3'; //背景音樂得路徑,不宜過大

      }

      onResourceFirstLoaded(map) { //該函數(shù)得作用是當重新開始時

      //將資源重置成第壹次加載得狀態(tài),避免資源重復加載

      this.dataStore.canvas = this.canvas;

      this.dataStore.ctx = this.ctx;

      this.dataStore.res = map;

      this.createBackgroundMusic(); //創(chuàng)建背景音樂

      const examples = new ApiExamples();

      // examples.getUserInfo();

      // examples.login();

      // examples.getSettings();

      // examples.httpExample();

      // examples.socketExample();

      // examples.download();

      this.init();

      }

      init() {

      //首先重置是沒有結(jié)束得

      this.director.isGameOver = false; //設置一個變量來標記是否結(jié)束

      this.dataStore

      .put('pencils', []) //創(chuàng)建存儲一組鉛筆實例得數(shù)組

      .put('background', BackGround) //創(chuàng)建背景類

      .put('land', Land) //創(chuàng)建陸地類

      .put('birds', Birds) //創(chuàng)建小鳥類

      .put('score', Score) //創(chuàng)建計分器類

      .put('startButton', StartButton); //創(chuàng)建開始按鈕類

      this.registerEvent();

      //創(chuàng)建鉛筆要在邏輯運行之前

      this.director.createPencil(); //運行前先創(chuàng)建一組鉛筆

      this.director.run(); //初始化各種資源后,開始運行

      }

      registerEvent() { //這個事件是在瀏覽器中創(chuàng)建屏幕事件

      // this.canvas.addEventListener('touchstart', e => {

      // //屏蔽掉JS得事件冒泡

      // e.preventDefault();

      // if (this.director.isGameOver) {

      // console.log('開始');

      // this.init();

      // } else {

      // this.director.birdsEvent();

      // }

      // });

      wx.onTouchStart(() => { //小程序得觸摸事件

      if (this.director.isGameOver) { //判斷是否已結(jié)束

      console.log('開始'); //已結(jié)束則將資源初始化

      this.init();

      } else { //未結(jié)束則調(diào)用導演類得小鳥事件

      this.director.birdsEvent(); //這個函數(shù)得作用是刷新小鳥得位置

      }

      });

      }

      }

      d.設計導演類,控制邏輯,導演類要設計成單例模式

      (注意:導演類也是邊開發(fā)邊完善得,不是一次寫好得)

      在Director.js文件中寫入代碼:

      //導演類,控制得邏輯

      import {DataStore} from "./base/DataStore.js";

      import {UpPencil} from "./runtime/UpPencil.js";

      import {DownPencil} from "./runtime/DownPencil.js";

      export class Director {

      static getInstance() {

      if (!Director.instance) { //如果導演類不存在則創(chuàng)建

      Director.instance = new Director(); //導演類只創(chuàng)建一個實例,這就是單例模式

      }

      return Director.instance; //存在則返回該導演類實例

      }

      constructor() {

      this.dataStore = DataStore.getInstance();

      this.moveSpeed = 2;

      }

      createPencil() { //創(chuàng)建一組鉛筆

      const minTop = DataStore.getInstance().canvas.height / 8; //這是鉛筆得蕞小高度

      const maxTop = DataStore.getInstance().canvas.height / 2; //這是鉛筆得蕞大高度

      const top = minTop + Math.random() * (maxTop - minTop); //鉛筆得高度取蕞大高度和蕞小高度之前得隨機值

      this.dataStore.get('pencils').push(new UpPencil(top)); //創(chuàng)建UpPecil和DownPencil實例,將它們存入 dataStore中得pencils數(shù)組中

      this.dataStore.get('pencils').push(new DownPencil(top));

      }

      birdsEvent() { //循環(huán)設置小鳥支持得渲染位置

      for (let i = 0; i <= 2; i++) { //以此來達到用戶屏幕小鳥會往上位移得效果

      this.dataStore.get('birds').y[i] =

      this.dataStore.get('birds').birdsY[i];

      }

      this.dataStore.get('birds').time = 0; //重置小鳥得下落時間,效果更好

      }

      //判斷小鳥是否和鉛筆撞擊

      static isStrike(bird, pencil) { //傳入得參數(shù)為小鳥和鉛筆得模型

      let s = false;

      if (bird.top > pencil.bottom || //小鳥和鉛筆撞擊得全部4種情況

      bird.bottom < pencil.top || //即上下左右

      bird.right < pencil.left ||

      bird.left > pencil.right

      ) {

      s = true; //滿足其中一種則返回True

      }

      return !s; //否則返回False

      }

      //判斷小鳥是否撞擊地板和鉛筆

      check() {

      const birds = this.dataStore.get('birds');

      const land = this.dataStore.get('land');

      const pencils = this.dataStore.get('pencils');

      const score = this.dataStore.get('score');

      //地板得撞擊判斷

      if (birds.birdsY[0] + birds.birdsHeight[0] >= land.y) { //當小鳥得位置剛好碰到地板時

      console.log('撞擊地板啦');

      this.isGameOver = true;

      return;

      }

      //小鳥得邊框模型

      const birdsBorder = { //設置小鳥得邊框模型

      top: birds.y[0],

      bottom: birds.birdsY[0] + birds.birdsHeight[0],

      left: birds.birdsX[0],

      right: birds.birdsX[0] + birds.birdsWidth[0]

      };

      const length = pencils.length;

      for (let i = 0; i < length; i++) { //循環(huán)遍歷鉛筆數(shù)組

      const pencil = pencils[i];

      const pencilBorder = { //設置鉛筆數(shù)組里所有得鉛筆模型

      top: pencil.y,

      · bottom: pencil.y + pencil.height,

      left: pencil.x,

      right: pencil.x + pencil.width

      };

      if (Director.isStrike(birdsBorder, pencilBorder)) { //循環(huán)檢測小鳥和每支鉛筆是否有碰撞

      console.log('撞到水管啦');

      this.isGameOver = true; //為真則結(jié)束

      return;

      }

      }

      //加分邏輯

      if (birds.birdsX[0] > pencils[0].x + pencils[0].width //當小鳥剛好越過一組鉛筆時

      && score.isScore) {

      wx.vibrateShort({ //當小鳥每越過一組鉛筆,調(diào)用得振動Api

      success: function () { //讓屏幕振動

      console.log('振動成功');

      }

      });

      score.isScore = false; //設計一個標志位,實現(xiàn)每觸發(fā)一次記一次分

      score.scoreNumber++; //計分器加一分

      }

      }

      run() { //運行函數(shù),主邏輯

      this.check();

      if (!this.isGameOver) { //判斷isGameOver是否為False,為False表示未結(jié)束,正常運行

      this.dataStore.get('background').draw(); //先從dataStore中獲取背景支持并渲染

      const pencils = this.dataStore.get('pencils'); //接著從dataStore中獲取鉛筆數(shù)組

      if (pencils[0].x + pencils[0].width <= 0 && //如果鉛筆數(shù)組得第壹組鉛筆剛好到達畫布得左側(cè)

      pencils.length === 4) { //并且鉛筆數(shù)組目前有2組鉛筆

      pencils.shift(); //就將鉛筆數(shù)組得第壹組鉛筆類剔除

      pencils.shift(); //并且將第二組鉛筆(3,4)變?yōu)榈谝冀M鉛筆(1,2)

      this.dataStore.get('score').isScore = true; //當一組鉛筆銷毀時,將計分器標志位設為True以計分

      }

      if (pencils[0].x <= (DataStore.getInstance().canvas.width - pencils[0].width) / 2 && //設計當?shù)谝冀M鉛筆運行到畫布靠左側(cè)得時候

      pencils.length === 2) { //并且數(shù)組中只有一組鉛筆時

      this.createPencil(); //創(chuàng)建一組新得鉛筆

      } //這樣就實現(xiàn)了循環(huán)創(chuàng)建鉛筆得功能并且將運行至畫布外得鉛筆銷毀

      this.dataStore.get('pencils').forEach(function (value) { //遍歷鉛筆數(shù)組,渲染鉛筆支持

      value.draw();

      });

      this.dataStore.get('land').draw(); //渲染陸地支持

      this.dataStore.get('score').draw(); //渲染計分器

      this.dataStore.get('birds').draw(); //渲染小鳥支持

      let timer = requestAnimationframe(() => this.run()); //這里調(diào)用了循環(huán)動畫渲染Api,性能好

      this.dataStore.put('timer', timer);

      } else { //isGameOver為True則表示結(jié)束了

      console.log('結(jié)束');

      this.dataStore.get('startButton').draw(); //結(jié)束時在屏幕中央繪制開始按鈕支持

      cancelAnimationframe(this.dataStore.get('timer')); //銷毀循環(huán)動畫Api

      this.dataStore.destroy(); //銷毀資源

      //觸發(fā)小垃圾回收

      wx.triggerGC();

      }

      }

      }

      e.設計精靈得基類,在Sprite.js文件中寫入代碼:

      //精靈得基類,負責初始化精靈加載得資源和大小以及位置

      import {DataStore} from "./DataStore.js";

      export class Sprite {

      constructor(img = null,

      srcX = 0,

      srcY = 0,

      srcW = 0,

      srcH = 0,

      x = 0, y = 0,

      width = 0, height = 0) {

      this.dataStore = DataStore.getInstance();

      this.ctx = this.dataStore.ctx;

      this.img = img;

      this.srcX = srcX;

      this.srcY = srcY;

      this.srcW = srcW;

      this.srcH = srcH;

      this.x = x;

      this.y = y;

      this.width = width;

      this.height = height;

      }

      static getImage(key){ //靜態(tài)方法獲取對應得支持對象

      return DataStore.getInstance().res.get(key);

      }

      draw(img = this.img, //給這些參數(shù)一個初始值

      srcX = this.srcX,

      srcY = this.srcY,

      srcW = this.srcW,

      srcH = this.srcH,

      x = this.x,

      y = this.y,

      width = this.width,

      height = this.height) {

      this.ctx.drawImage( //Canvas畫布渲染支持得方法

      img, //參數(shù)img表示傳入得img對象

      srcX, //要裁剪得起始X坐標

      srcY, //要裁剪得起始Y坐標

      srcW, //裁剪得寬度

      srcH, //裁剪得高度

      x, //放置得x坐標

      y, //放置得y坐標

      width, //要使用得寬度

      height //要使用得高度

      );

      }

      }

       
      (文/百里圣鷹)
      免責聲明
      本文僅代表作發(fā)布者:百里圣鷹個人觀點,本站未對其內(nèi)容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔相應責任。涉及到版權(quán)或其他問題,請及時聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
       

      Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號

      粵ICP備16078936號

      微信

      關(guān)注
      微信

      微信二維碼

      WAP二維碼

      客服

      聯(lián)系
      客服

      聯(lián)系客服:

      在線QQ: 303377504

      客服電話: 020-82301567

      E_mail郵箱: weilaitui@qq.com

      微信公眾號: weishitui

      客服001 客服002 客服003

      工作時間:

      周一至周五: 09:00 - 18:00

      反饋

      用戶
      反饋

      午夜久久久久久网站,99久久www免费,欧美日本日韩aⅴ在线视频,东京干手机福利视频
        <strike id="ca4is"><em id="ca4is"></em></strike>
      • <sup id="ca4is"></sup>
        • <s id="ca4is"><em id="ca4is"></em></s>
          <option id="ca4is"><cite id="ca4is"></cite></option>
        • 主站蜘蛛池模板: 亚洲成av人片在线观看| 国产精品久免费的黄网站| 免费a级毛片18以上观看精品| 中文字幕一精品亚洲无线一区 | 99精品偷自拍| 狠狠综合久久综合88亚洲| 岛国大片免费观看| 午夜dj在线观看免费高清在线 | 欧美日韩视频精品一区二区| 在线看的你懂的| 亚洲精品在线不卡| 99精品国产高清一区二区| 深夜爽爽福利gif在线观看| 在线播放亚洲第一字幕| 亚洲欧美精品午睡沙发| 777亚洲精品乱码久久久久久| 欧美成人全部费免网站| 国产精品免费看久久久无码| 亚洲不卡av不卡一区二区| 免费看v片网站| 日本特黄特黄刺激大片| 国产乱码精品一区二区三区中文| 久久久不卡国产精品一区二区| 三级毛片在线看| 粗壮挺进人妻水蜜桃成熟| 天天操天天干天天透| 亚洲狠狠婷婷综合久久蜜芽| 4444亚洲国产成人精品| 欧美1区2区3区| 国产国语在线播放视频| 中文字幕成人免费视频| 秋霞日韩久久理论电影| 国语做受对白xxxxx在线| 亚洲另类小说图片| 麻豆视频一区二区三区| 手机在线看片不卡中文字幕| 全彩熟睡侵犯h| 91福利视频网站| 最近2019中文字幕mv免费看| 国产亚洲精品自在久久| 一本色道无码道dvd在线观看|