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

九、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)相關功能

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 //要使用得高度

);

}

}