邢榕珊　匡芳君

摘 要： 微信小程序借用API函數(shù)算法在微信平臺(tái)上線，利用微信的用戶群，直接達(dá)到不用下載無(wú)需注冊(cè)直接使用的效果。對(duì)微信小程序面臨的問(wèn)題和發(fā)展前景進(jìn)行分析，以FlappyBird設(shè)計(jì)為例，使用微信官方web開發(fā)者工具進(jìn)行微信小程序的設(shè)計(jì)與實(shí)現(xiàn)。結(jié)果表明：微信小程序不僅能夠解決APP占用資源的問(wèn)題，還解決了下載難注冊(cè)難等問(wèn)題，微信小程序的發(fā)展仍然有極大優(yōu)勢(shì)。

關(guān)鍵詞： 微信小程序； Web開發(fā)者工具； API函數(shù)； FlappyBird設(shè)計(jì)

中圖分類號(hào)：G252 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2018）08-09-04

Design of WeChat small program

Xing Rongshan， Kuang Fangjun

（School of information engineering， Wenzhou Business College， Wenzhou， Zhejiang 325035， China）

Abstract： WeChat small program borrows API function algorithm to live on WeChat platform， and uses WeChat user group directly to achieve the effect of directly running without downloading and without registering. In this paper， the existing problems and development prospects of WeChat small program are analyzed， taking FlappyBird design as an example， and using WeChat official web developer tools， the WeChat small program is designed and realized. The result shows that WeChat small program can not only solve the problem of APP consumption， but also solve the problem of difficulty in downloading and registration. The future development of WeChat small program still has great advantages.

Key words： WeChat small program； Web developer tools； API function； FlappyBird design

0 引言

隨著移動(dòng)用戶群體的不斷攀升，APP運(yùn)營(yíng)過(guò)程中產(chǎn)生了無(wú)法避免的長(zhǎng)尾效應(yīng)，在需求曲線中流行和個(gè)性化難以平衡，大量資源無(wú)法被充分利用，微信小程序應(yīng)運(yùn)而生。2016年微信創(chuàng)始人張小龍?zhí)岢隽宋⑿旁诎l(fā)展過(guò)程中的四個(gè)問(wèn)題，同時(shí)提出了微信小程序的概念[1]。微信小程序的提出，是對(duì)市場(chǎng)上APP長(zhǎng)尾的另一種解決辦法，通過(guò)API技術(shù)在平臺(tái)發(fā)展，既滿足了程序的客戶基數(shù)，又滿足了客戶的個(gè)性化需求，并且完美貼合“用完即走”的理念。

1 微信小程序現(xiàn)狀分析

微信小程序自上線以來(lái)已經(jīng)運(yùn)營(yíng)超過(guò)200萬(wàn)的程序，全面開放申請(qǐng)后，企業(yè)、個(gè)體、政府、媒體等各個(gè)職能部門的開發(fā)者都可在微信平臺(tái)研發(fā)小程序。2017年12月微信更新后添加了「跳一跳」小游戲，瞬間在朋友圈掀起波浪。跳一跳的發(fā)布意味著用戶可以直接在微信界面進(jìn)入游戲，無(wú)需下載，也無(wú)需占用內(nèi)存。開發(fā)者想要研發(fā)游戲時(shí)可以直接通過(guò)微信審核上線小程序。在微信聊天界面直接向下拉即可打開小程序入口，并且會(huì)根據(jù)用戶最近使用推薦小程序，非常地便捷易找尋。不僅僅是游戲，包括一些線上商城、已經(jīng)開發(fā)的APP（如貓眼電影）、類似公眾號(hào)，都被微信小程序囊括在內(nèi)。但是對(duì)于大型的具有交互、繁復(fù)功能的大型APP，微信小程序無(wú)法做到兼顧，化繁為簡(jiǎn)也失去了APP本應(yīng)有的一些功能。當(dāng)前微信小程序的應(yīng)用范圍大致為游戲、電商、訂閱號(hào)三個(gè)范圍。

2 微信小程序面臨的問(wèn)題和發(fā)展前景

雖然微信小程序的開發(fā)簡(jiǎn)便，但是由于依托于微信APP，當(dāng)小程序在運(yùn)行一段時(shí)間后，開發(fā)人員會(huì)對(duì)小程序進(jìn)行維護(hù)。每次維護(hù)夠后雖然用戶體驗(yàn)加深，但是必須要用戶刪除小程序重新打開才行。這個(gè)步驟會(huì)誤導(dǎo)用戶以為小程序無(wú)法使用，放棄小程序入口，對(duì)微信小程序的發(fā)展造成了巨大的阻礙。一些與APP關(guān)聯(lián)的小程序也無(wú)法直接喚醒APP，兩者單向銜接，也造成了不好的用戶體驗(yàn)。另一方面微信小程序的主要開發(fā)群體是電商，不需要開發(fā)商城與淘寶、京東等龍頭企業(yè)競(jìng)爭(zhēng)固然是好，但在交易中無(wú)法保證安全性、可靠性，也是一大難題。

微信小程序代表輕型應(yīng)用在未來(lái)互聯(lián)網(wǎng)發(fā)展過(guò)程中的形式，解決了安裝軟件內(nèi)存和運(yùn)行問(wèn)題。輕便、簡(jiǎn)單、小巧的特點(diǎn)會(huì)成為微信小程序未來(lái)發(fā)展中的極大優(yōu)勢(shì)，未來(lái)應(yīng)用“觸手可及”的夢(mèng)想從微信小程序開始已經(jīng)逐漸顯現(xiàn)出雛形[2]。微信小程序自發(fā)布以來(lái)秉持的就是服務(wù)用戶的理念，它無(wú)法代替現(xiàn)有APP在市場(chǎng)中的地位，但在未來(lái)發(fā)展中極有可能將很多功能性單一的APP納入囊中，精簡(jiǎn)當(dāng)前的APP市場(chǎng)。

3 微信小程序FlappyBird案例設(shè)計(jì)與實(shí)現(xiàn)

本文設(shè)計(jì)的FlappyBird微信小程序是在Microsoft Windows 7 64位操作系統(tǒng)和微信Web開發(fā)者工具，開發(fā)語(yǔ)言使用JAVA，具體設(shè)計(jì)與實(shí)現(xiàn)如下。

⑴ 精靈的基礎(chǔ)類的封裝與背景的實(shí)現(xiàn)

canvas圖片和精靈加載的資源、大小和位置初始化由constructor（）構(gòu)造器負(fù)責(zé)。由于es6有一個(gè)特性，可以給參數(shù)賦默認(rèn)值，如果傳參的時(shí)候忘記給參數(shù)賦值，es6就可以將其賦默認(rèn)值，所以給特別長(zhǎng)的參數(shù)都賦默認(rèn)值，也不會(huì)導(dǎo)致程序的崩潰。

⑵ 資源管理器的封裝

通過(guò)變量緩存器，方便我們不同類中的訪問(wèn)和修改變量，減少代碼重復(fù)的定義。先創(chuàng)建getInstance（）的案例，然后創(chuàng)建存儲(chǔ)變量的容器es6的Map（）。構(gòu)建put（）的方法，return到對(duì)象本身，方便鏈?zhǔn)讲僮鳌?chuàng)建destroy（）的方法，對(duì)已有資源進(jìn)行銷毀和滯空。關(guān)鍵代碼如下：

constructor（） { //Map創(chuàng)建存儲(chǔ)變量

this.map=new Map（）；

}

put（key， value） {

if （typeof value==='function'） {

value=new value（）；

}

this.map.set（key， value）；

return this；

}

destroy（） {

for （let value of this.map.values（）） {

value=null；

}

}

⑶ JS面向?qū)ο筇羁印狤S5和ES6的區(qū)別與轉(zhuǎn)化

區(qū)別：ES6新增了let命令，用來(lái)聲明變量。它的用法類似于var，但是所聲明的變量只在let命令所在的代碼塊內(nèi)有效。ES5只有全局作用域和函數(shù)作用域，沒有塊級(jí)作用域[3]。

轉(zhuǎn)化：Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以我們不用等到瀏覽器的支持就可以在項(xiàng)目中使用ES6的特性。

⑷ Canvas運(yùn)動(dòng)渲染不斷移動(dòng)的地板

首先地板的移動(dòng)方向是從右往左，所以用-this.land實(shí)現(xiàn)地板的x坐標(biāo)為遞減。為了使一張地板的圖片循環(huán)使用來(lái)實(shí)現(xiàn)地板的不斷移動(dòng)，用if（）來(lái)判斷當(dāng)?shù)匕鍒D片的右邊即將達(dá)到canvas的右側(cè)邊界的時(shí)候，將前面的部分截回重新循環(huán)使用[4]。關(guān)鍵代碼如下：

draw（） {

this.landX=this.landX+this.landSpeed；

if（this.landX>（this.img.width-DataStore.getInstance（）

.canvas.width）） {

this.landX=0；

}

}

⑸ 上下鉛筆的創(chuàng)建：實(shí)現(xiàn)畫布上只出現(xiàn)兩組鉛筆

通過(guò)if（）判斷鉛筆第一組鉛筆的左側(cè)x坐標(biāo)加上鉛筆的寬度是小于0來(lái)說(shuō)明鉛筆的右側(cè)邊界已經(jīng)超越canvas的左邊界，且保證畫布上的鉛筆個(gè)數(shù)為四個(gè)。用shift（）的方法來(lái)實(shí)現(xiàn)鉛筆的銷毀，shift是把數(shù)組的第一個(gè)元素推出并且把數(shù)組的個(gè)數(shù)-1。關(guān)鍵代碼如下：

if （pencils[0].x+pencils[0].width<=0

&&pencils.length;===4） {

encils.shift（）；

pencils.shift（）； //銷毀鉛筆

This.dataStore.get（'score'）.isScore=true；

}

if （pencils[0].x<=（DataStore.getInstance（）.canvas

.width-pencils[0].width）/2&& pencils.length===2） {

this.createPencil（）； //隨機(jī)創(chuàng)建鉛筆

}

this.dataStore.get（'pencils'）.forEach（function （value） {

value.draw（）；

}）；

⑹ 小鳥類的創(chuàng)建與邏輯實(shí)現(xiàn)——鳥能上下飛起來(lái)

小鳥的三種狀態(tài)是用一個(gè)數(shù)組去存儲(chǔ)，其中小鳥的上下飛動(dòng)其實(shí)變化的是小鳥的y坐標(biāo)，設(shè)置this.y= [birdY， birdY， birdY]，用draw（）將小鳥渲染出來(lái)，定義常量speed來(lái)表示切換三只小鳥的速度。用js的Math.floor（）的方法，實(shí)現(xiàn)減速器的作用，防止小鳥飛起來(lái)時(shí)出現(xiàn)的閃爍現(xiàn)象。通過(guò)模擬重力加速度來(lái)實(shí)現(xiàn)小鳥能掉下去，并且有向上移動(dòng)30像素的偏移量。定義birdEvents（）的方法給每只鳥綁定相應(yīng)的事件，當(dāng)每點(diǎn)擊小鳥一次，小鳥的事件也在變化，為了使速度不再一直變快，需要將時(shí)間置零，實(shí)現(xiàn)小鳥自由落體的重新開始。關(guān)鍵代碼如下：

const speed=0.2； //切換三只小鳥的速度

this.count=this.count+speed；

if （this.index>=2） { //小鳥的數(shù)組[0，1，2]

this.count=0；

}

this.index=Math.floor（this.count）； //減速器的作用

const g=0.98/2.4； //模擬重力加速度

const offsetUp=30； //向上移動(dòng)一丟丟的偏移量

const offsetY=（g*this.time*（this.time-offsetUp））/2；

//小鳥的位移

for （let i=0； i<=2； i++） { //循環(huán)三只小鳥的位移

this.birdsY[i]=this.y[i]+offsetY；

}

this.time++；

⑺ 小鳥碰撞地板和鉛筆的邏輯實(shí)現(xiàn)

創(chuàng)建isStrick（）方法來(lái)判斷小鳥是否和鉛筆撞擊，首先畫出小鳥和鉛筆的邊框模型，然后用if（）語(yǔ)句判斷小鳥上下左右邊框與鉛筆上下左右邊框是否有接觸；創(chuàng)建check（）方法來(lái)判斷小鳥是否撞擊地板和鉛筆，通過(guò)小鳥所在位置的y坐標(biāo)與小鳥的高度之和是否大于地板的y坐標(biāo)判斷是否碰撞地板。關(guān)鍵代碼如下：

static isStrike（bird， pencil） { //判斷小鳥是否和鉛筆撞擊

let s=false；

if （bird.top>pencil.bottom ||

bird.bottom

bird.right

bird.left>pencil.right

） {

s=true；

}

return ！s；

}

check（） { //判斷小鳥是否撞擊地板和鉛筆

if （birds.birdsY[0]+birds.birdsHeight[0]>=land.y） {

console.log（'撞擊地板啦'）； //地板的撞擊判斷

this.isGameOver=true；

return；

}

if （Director.isStrike（birdsBorder， pencilBorder）） {

console.log（'撞到鉛筆了啦'）；

this.isGameOver=true；

return；

}

}

⑻ 游戲開始按鈕的邏輯實(shí)現(xiàn)

通過(guò)調(diào)用父類draw（）的方法實(shí)現(xiàn)當(dāng)小鳥撞擊地板或鉛筆的時(shí)候，開始按鈕出現(xiàn)，游戲重新開始。

⑼ 計(jì)分器的邏輯實(shí)現(xiàn)

加分邏輯是通過(guò)判斷小鳥的x軸位置是否大于鉛筆的右邊界。如果大于，則表示越過(guò)鉛筆，分?jǐn)?shù)+1。其中用了wx.vibrateShort的API，實(shí)現(xiàn)了當(dāng)小鳥穿越成功時(shí)手機(jī)將進(jìn)行震動(dòng)提醒。因?yàn)閏anvas刷新的很快，所以必須要用一個(gè)變量控制加分，方法是默認(rèn)isScore為true，當(dāng)小鳥穿過(guò)一組鉛筆成功時(shí)，加一分，然后isScore變?yōu)閒alse停止加分，等到第二次成功，再繼續(xù)加分，以此類推。關(guān)鍵代碼如下：

if （birds.birdsX[0]>pencils[0].x+pencils[0].width

&& score.isScore） {

wx.vibrateShort（{ //穿過(guò)鉛筆時(shí)會(huì)進(jìn)行震動(dòng)的API

success： function （） { console.log（'穿過(guò)成功'）； }

}）；

score.isScore=false；

score.scoreNumber++； }

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

用wx.createInnerAudioContext（）這個(gè)API接口實(shí)現(xiàn)，通過(guò)loop屬性來(lái)實(shí)現(xiàn)背景音樂(lè)是是循環(huán)播放，用autoplay屬性實(shí)現(xiàn)背景音樂(lè)是自動(dòng)播放的，用src屬性用于文件音頻的鏈接。

⑾ 各種API的實(shí)現(xiàn)

在這個(gè)小游戲中采用了wx.getUserInfo（OBJECT）獲取用戶信息進(jìn)行微信的登錄或者設(shè)置的獲取。用wx.login（）方法，可以獲取用戶登錄信息。wx.getSetting（）傳入回調(diào)對(duì)象，通過(guò)字符串打印出一些用戶的配置信息，這些都是微信獲取個(gè)人信息的API使用方法[5]。關(guān)鍵代碼如下：

getUserInfo（） {

const params={

success： function （res） {console.log（res）；}

}；

wx.getUserInfo（params）；

}

login（） {

wx.login（{

success： function （res） {console.log（res）；}

}）；

}

getSettings（） {

wx.getSetting（{

success： function （res） {console.log（JSON

.stringify（res））；}

}）；

}

4 結(jié)束語(yǔ)

微信小程序的應(yīng)用就目前而言是利大于弊的，并在互聯(lián)網(wǎng)發(fā)展中也是社會(huì)需求的一種衍生品。雖然微信小程序踩著LAPP前路，但微信活躍用戶群仍是微信小程序穩(wěn)步前行的重要支柱。本文通過(guò)分析微信小程序發(fā)展中存在的問(wèn)題和應(yīng)用前景，設(shè)計(jì)和實(shí)現(xiàn)了FlappyBird微信小程序。未來(lái)，隨著手機(jī)內(nèi)存不斷攀升，小程序“觸手可及”的應(yīng)用也將變?yōu)楝F(xiàn)實(shí)。

參考文獻(xiàn)（References）：

[1] 劉琦，丁萍莉.基于微信小程序的互聯(lián)網(wǎng)+教育學(xué)習(xí)平臺(tái)的研

究與設(shè)計(jì)[J].內(nèi)江科技，2016.37（12）：45-46

[2] 朱玉強(qiáng).微信小程序在圖書館移動(dòng)服務(wù)中的應(yīng)用實(shí)踐——以

排架游戲?yàn)槔齕J].圖書館論壇，2017.37（7）：132-138

[3] 張海龍.基于微信小程序的火警報(bào)警接警系統(tǒng)設(shè)計(jì)[J].武警

學(xué)院學(xué)報(bào)，2017.33（6）：23-26

[4] 陳琦.基于Webpy+Apache HTTP Server的微信小程序架

構(gòu)搭建研究[J].無(wú)線互聯(lián)科技，2017.18：50-51

[5] 宋丹丹.基于微信小程序的美食點(diǎn)餐推薦系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].

信息通信，2017.12：89-90