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

1.組件模塊化設(shè)計(jì)

a.為什么要對(duì)小程序進(jìn)行組件模塊化設(shè)計(jì)？

小程序有代碼大小限制

提高代碼得復(fù)用率

b.如何進(jìn)行組件模塊化設(shè)計(jì)？

通過(guò)WXML得import和include來(lái)使用文件模板

使用WXSS得等import來(lái)引用WXSS文件

使用JS得require來(lái)引用JS文件

2.wx.request方法使用詳解

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

b.setData()參數(shù)格式：需要先定義that = this，不然頁(yè)面結(jié)構(gòu)會(huì)出錯(cuò)。

十、ThinkPHP5后臺(tái)接口小程序

1.總體架構(gòu)

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

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

b.客戶端（面向用戶）：

向服務(wù)端請(qǐng)求數(shù)據(jù)，完成自身行為邏輯

c.CMS（本質(zhì)是對(duì)數(shù)據(jù)庫(kù)得增刪改查）：

向服務(wù)端請(qǐng)求數(shù)據(jù)，實(shí)現(xiàn)相關(guān)功能

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

a.安裝xampp（百度搜索下載）

使用xampp來(lái)安裝PHP，Apache和mySql

b.安裝ThinkPHP5（百度搜索下載）

c.安裝PHPStorm

十一、小FlyBirds開(kāi)發(fā)

1.小得特點(diǎn)

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

b.體驗(yàn)優(yōu)于手機(jī)網(wǎng)頁(yè)

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

2.小得展望

a.是一個(gè)趨勢(shì)，替代過(guò)重得APP和體驗(yàn)差得手機(jī)網(wǎng)頁(yè)

b.快速引流，引導(dǎo)用戶向APP過(guò)渡

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

3.小得模塊分解

game.js：是小全局得入口文件，是小必須有得一個(gè)文件

main.js：程序主類，主要用來(lái)初始化canvas和一些全局對(duì)象，各個(gè)精靈和綁定事件

Director.js：程序?qū)а蓊悾脕?lái)控制得邏輯和精靈得創(chuàng)建與銷毀，控制主循環(huán)

DataStore.js：存儲(chǔ)需要長(zhǎng)期保存得變量和需要定時(shí)銷毀得變量

Resources.js：得資源

ResourceLoader.js：資源加載器，保證是在支持加載完成后開(kāi)始主循環(huán)

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

Background.js：背景類

Land.js：陸地類

UpPencil.js：上半部分鉛筆類

DownPencil.js：下半部分鉛筆類

Birds.js：小鳥類

Score.js：計(jì)分器類

StartButton.js：重新開(kāi)始按鈕類

4.小得編程步驟詳解

a.先將小得支持素材導(dǎo)入項(xiàng)目中，并建立一個(gè)數(shù)組來(lái)映射它們

在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.設(shè)計(jì)資源加載器功能，在ResourceLoader.js中寫如下代碼：

//資源文件加載器，確保canvas在支持資源加載完成后才進(jìn)行渲染

import {Resources} from "./Resources.js"; //導(dǎo)入支持?jǐn)?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實(shí)例

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

this.map.set(key, image); //將map得格式設(shè)為每個(gè)key對(duì)應(yīng)得value值是image實(shí)例

}

}

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

let loadedCount = 0;

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

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

loadedCount++; //每遍歷一個(gè)image實(shí)例加一次

if (loadedCount >= this.map.size) { //當(dāng)遍歷完整個(gè)map時(shí)，返回加載成功

callback(this.map);

}

}

}

}

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

return new ResourceLoader();

}

}

c.設(shè)計(jì)初始化得文件，作為開(kāi)始得入口，在main.js中寫入以下代碼：

（注意：main.js中得內(nèi)容是在開(kāi)發(fā)過(guò)程中不斷更新得，不是一次就寫好得）

//初始化整個(gè)得精靈，作為開(kāi)始得入口

import {ResourceLoader} from "./js/base/ResourceLoader.js"; //導(dǎo)入加載器

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'); //設(shè)置畫布得顯示類型為2D

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

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

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

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

}

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

createBackgroundMusic() {

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

bgm.autoplay = true;

bgm.loop = true;

bgm.src = 'audios/bgm.mp3'; //背景音樂(lè)得路徑，不宜過(guò)大

}

onResourceFirstLoaded(map) { //該函數(shù)得作用是當(dāng)重新開(kāi)始時(shí)

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

this.dataStore.canvas = this.canvas;

this.dataStore.ctx = this.ctx;

this.dataStore.res = map;

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

const examples = new ApiExamples();

// examples.getUserInfo();

// examples.login();

// examples.getSettings();

// examples.httpExample();

// examples.socketExample();

// examples.download();

this.init();

}

init() {

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

this.director.isGameOver = false; //設(shè)置一個(gè)變量來(lái)標(biāo)記是否結(jié)束

this.dataStore

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

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

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

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

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

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

this.registerEvent();

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

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

this.director.run(); //初始化各種資源后，開(kāi)始運(yùn)行

}

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

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

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

// e.preventDefault();

// if (this.director.isGameOver) {

// console.log('開(kāi)始');

// this.init();

// } else {

// this.director.birdsEvent();

// }

// });

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

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

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

this.init();

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

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

}

});

}

}

d.設(shè)計(jì)導(dǎo)演類，控制邏輯，導(dǎo)演類要設(shè)計(jì)成單例模式

（注意：導(dǎo)演類也是邊開(kāi)發(fā)邊完善得，不是一次寫好得）

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

//導(dǎo)演類，控制得邏輯

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) { //如果導(dǎo)演類不存在則創(chuàng)建

Director.instance = new Director(); //導(dǎo)演類只創(chuàng)建一個(gè)實(shí)例，這就是單例模式

}

return Director.instance; //存在則返回該導(dǎo)演類實(shí)例

}

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); //鉛筆得高度取蕞大高度和蕞小高度之前得隨機(jī)值

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

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

}

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

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

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

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

}

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

}

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

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) { //當(dāng)小鳥得位置剛好碰到地板時(shí)

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

this.isGameOver = true;

return;

}

//小鳥得邊框模型

const birdsBorder = { //設(shè)置小鳥得邊框模型

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è)置鉛筆數(shù)組里所有得鉛筆模型

top: pencil.y,

· bottom: pencil.y + pencil.height,

left: pencil.x,

right: pencil.x + pencil.width

};

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

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

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

return;

}

}

//加分邏輯

if (birds.birdsX[0] > pencils[0].x + pencils[0].width //當(dāng)小鳥剛好越過(guò)一組鉛筆時(shí)

&& score.isScore) {

wx.vibrateShort({ //當(dāng)小鳥每越過(guò)一組鉛筆，調(diào)用得振動(dòng)Api

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

console.log('振動(dòng)成功');

}

});

score.isScore = false; //設(shè)計(jì)一個(gè)標(biāo)志位，實(shí)現(xiàn)每觸發(fā)一次記一次分

score.scoreNumber++; //計(jì)分器加一分

}

}

run() { //運(yùn)行函數(shù)，主邏輯

this.check();

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

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

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

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

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

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

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

this.dataStore.get('score').isScore = true; //當(dāng)一組鉛筆銷毀時(shí)，將計(jì)分器標(biāo)志位設(shè)為True以計(jì)分

}

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

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

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

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

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

value.draw();

});

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

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

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

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

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

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

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

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

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

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

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

wx.triggerGC();

}

}

}

e.設(shè)計(jì)精靈得基類，在Sprite.js文件中寫入代碼：

//精靈得基類，負(fù)責(zé)初始化精靈加載得資源和大小以及位置

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)方法獲取對(duì)應(yīng)得支持對(duì)象

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

}

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

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對(duì)象

srcX, //要裁剪得起始X坐標(biāo)

srcY, //要裁剪得起始Y坐標(biāo)

srcW, //裁剪得寬度

srcH, //裁剪得高度

x, //放置得x坐標(biāo)

y, //放置得y坐標(biāo)

width, //要使用得寬度

height //要使用得高度

);

}

}