微信小程序設(shè)計

邢榕珊　匡芳君

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

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

中圖分類號：G252 文獻標(biāo)志碼：A 文章編號：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 引言

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

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

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

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

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

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

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

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

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

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

⑵ 資源管理器的封裝

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

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

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命令，用來聲明變量。它的用法類似于var，但是所聲明的變量只在let命令所在的代碼塊內(nèi)有效。ES5只有全局作用域和函數(shù)作用域，沒有塊級作用域[3]。

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

⑷ Canvas運動渲染不斷移動的地板

首先地板的移動方向是從右往左，所以用-this.land實現(xiàn)地板的x坐標(biāo)為遞減。為了使一張地板的圖片循環(huán)使用來實現(xiàn)地板的不斷移動，用if（）來判斷當(dāng)?shù)匕鍒D片的右邊即將達到canvas的右側(cè)邊界的時候，將前面的部分截回重新循環(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)建：實現(xiàn)畫布上只出現(xiàn)兩組鉛筆

通過if（）判斷鉛筆第一組鉛筆的左側(cè)x坐標(biāo)加上鉛筆的寬度是小于0來說明鉛筆的右側(cè)邊界已經(jīng)超越canvas的左邊界，且保證畫布上的鉛筆個數(shù)為四個。用shift（）的方法來實現(xiàn)鉛筆的銷毀，shift是把數(shù)組的第一個元素推出并且把數(shù)組的個數(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（）； //隨機創(chuàng)建鉛筆

}

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

value.draw（）；

}）；

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

小鳥的三種狀態(tài)是用一個數(shù)組去存儲，其中小鳥的上下飛動其實變化的是小鳥的y坐標(biāo)，設(shè)置this.y= [birdY， birdY， birdY]，用draw（）將小鳥渲染出來，定義常量speed來表示切換三只小鳥的速度。用js的Math.floor（）的方法，實現(xiàn)減速器的作用，防止小鳥飛起來時出現(xiàn)的閃爍現(xiàn)象。通過模擬重力加速度來實現(xiàn)小鳥能掉下去，并且有向上移動30像素的偏移量。定義birdEvents（）的方法給每只鳥綁定相應(yīng)的事件，當(dāng)每點擊小鳥一次，小鳥的事件也在變化，為了使速度不再一直變快，需要將時間置零，實現(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； //向上移動一丟丟的偏移量

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++；

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

創(chuàng)建isStrick（）方法來判斷小鳥是否和鉛筆撞擊，首先畫出小鳥和鉛筆的邊框模型，然后用if（）語句判斷小鳥上下左右邊框與鉛筆上下左右邊框是否有接觸；創(chuàng)建check（）方法來判斷小鳥是否撞擊地板和鉛筆，通過小鳥所在位置的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；

}

}

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

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

⑼ 計分器的邏輯實現(xiàn)

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

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

&& score.isScore） {

wx.vibrateShort（{ //穿過鉛筆時會進行震動的API

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

}）；

score.isScore=false；

score.scoreNumber++； }

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

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

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

在這個小游戲中采用了wx.getUserInfo（OBJECT）獲取用戶信息進行微信的登錄或者設(shè)置的獲取。用wx.login（）方法，可以獲取用戶登錄信息。wx.getSetting（）傳入回調(diào)對象，通過字符串打印出一些用戶的配置信息，這些都是微信獲取個人信息的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īng)用就目前而言是利大于弊的，并在互聯(lián)網(wǎng)發(fā)展中也是社會需求的一種衍生品。雖然微信小程序踩著LAPP前路，但微信活躍用戶群仍是微信小程序穩(wěn)步前行的重要支柱。本文通過分析微信小程序發(fā)展中存在的問題和應(yīng)用前景，設(shè)計和實現(xiàn)了FlappyBird微信小程序。未來，隨著手機內(nèi)存不斷攀升，小程序“觸手可及”的應(yīng)用也將變?yōu)楝F(xiàn)實。

參考文獻（References）：

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

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

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

排架游戲為例[J].圖書館論壇，2017.37（7）：132-138

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

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

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

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

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

信息通信，2017.12：89-90