微信小程序開發(fā)（2）：猜拳游戲全過(guò)程詳解
原創(chuàng)【51CTO.com原創(chuàng)稿件】如果讀者不了解什么是微信小程序，可以看我的另外一篇文章：(微信小程序：原生熱布局終將改變世界)http://zhuanlan.51cto.com/art/201610/519027.htm
本文將從零開始開發(fā)一款微信小程序。該程序的功能很簡(jiǎn)單，是一個(gè)猜拳游戲，點(diǎn)擊“開始”按鈕后，會(huì)快速切換“錘子”、“剪刀”和“布”，直到按“停止”按鈕，會(huì)顯示“錘子”、“剪刀”和“布”中的一個(gè)，該游戲可以雙方或多方進(jìn)行猜拳，這里猜拳的規(guī)則就不多說(shuō)了，大家應(yīng)該很清楚。本節(jié)的目的是通過(guò)該例子，將開發(fā)微信小程序的過(guò)程完整地跑一遍，從注冊(cè)公測(cè)賬號(hào)開始，一直到將微信小程序發(fā)布到微信平臺(tái)，并在真機(jī)上測(cè)試為止。通過(guò)該例子，讀者可以完全掌握微信小程序的開發(fā)流程。
1.注冊(cè)微信小程序公測(cè)賬號(hào)
在上一篇文章中已經(jīng)安裝了微信小程序的IDE，并使用了無(wú)AppID的方式創(chuàng)建了工程。盡管這種方式可以在計(jì)算機(jī)上開發(fā)小程序(為了方便，以后將微信小程序簡(jiǎn)稱為小程序)，并使用模擬器進(jìn)行測(cè)試，但無(wú)法將小程序在真機(jī)上測(cè)試，更無(wú)法將小程序上傳到服務(wù)端進(jìn)行審核，所以要想以更完美的方式開發(fā)小程序，必須要有小程序的AppID。
現(xiàn)在騰訊已經(jīng)開放了小程序AppID的注冊(cè)，不過(guò)目前只針對(duì)企業(yè)、政府、媒體等組織，并不針對(duì)個(gè)人開放注冊(cè)，相信小程序正式發(fā)布時(shí)，會(huì)向個(gè)人開放。對(duì)于很多讀者來(lái)說(shuō)，可能沒有相關(guān)組織的資質(zhì)，但也可以通過(guò)本章的學(xué)習(xí)，對(duì)小程序開發(fā)的全過(guò)程有一個(gè)深入的了解，以免以后完全開放注冊(cè)后不知所措。
要想注冊(cè)小程序賬號(hào)，首先進(jìn)入如下頁(yè)面。
然后點(diǎn)擊右上角的“立即注冊(cè)”鏈接，會(huì)進(jìn)入注冊(cè)頁(yè)面，在頁(yè)面的中心位置會(huì)看到如圖1所示的注冊(cè)類型，包括訂閱號(hào)、服務(wù)號(hào)、小程序和企業(yè)號(hào)。直接點(diǎn)擊“小程序”，進(jìn)入小程序注冊(cè)頁(yè)面。
圖1 各種“號(hào)”們的注冊(cè)頁(yè)面
在注冊(cè)的過(guò)程中，會(huì)要求輸入郵箱、密碼等一些常規(guī)信息。在進(jìn)行驗(yàn)證時(shí)會(huì)要求輸入和企業(yè)有關(guān)的信息，如企業(yè)名稱、統(tǒng)一社會(huì)信用代碼、企業(yè)銀行賬號(hào)等信息。注冊(cè)用戶可以從圖2所示主體類型中選擇一個(gè)。
圖2 選擇主體類型
選中一個(gè)主體后，在頁(yè)面的下方會(huì)要求輸入相關(guān)的信息，如果選擇的是企業(yè)，會(huì)要求輸入企業(yè)名稱、營(yíng)業(yè)執(zhí)照注冊(cè)號(hào)等信息，以及管理員的相關(guān)信息(每個(gè)管理員最多只能注冊(cè)5個(gè)小程序)。這里的管理員(在注冊(cè)的過(guò)程中會(huì)和管理員的微信綁定)是用于登錄小程序后臺(tái)的，其他加入的普通開發(fā)人員無(wú)法登錄小程序后臺(tái)，只能登錄小程序IDE。
最后會(huì)要求用戶使用企業(yè)賬戶向騰訊官方的賬號(hào)打款0.06元進(jìn)行驗(yàn)證(要求在10天之內(nèi)打款，否則驗(yàn)證失敗，而且只能是0.06元)。不管驗(yàn)證是否成功，款項(xiàng)都會(huì)退回到原來(lái)的企業(yè)賬戶。驗(yàn)證是自動(dòng)的，但并不是實(shí)時(shí)的。騰訊的服務(wù)端應(yīng)該是隔一段時(shí)間進(jìn)行一次驗(yàn)證，可能會(huì)等幾個(gè)小時(shí)，請(qǐng)耐心等待。
在驗(yàn)證通過(guò)之前，仍然可以用注冊(cè)Email登錄小程序后臺(tái)，但無(wú)法獲取小程序AppID。驗(yàn)證通過(guò)后，會(huì)通過(guò)站內(nèi)短信(在小程序后臺(tái)右上角)進(jìn)行通知。要注意的是，登錄小程序后臺(tái)的過(guò)程中要使用手機(jī)微信掃描二維碼進(jìn)行登錄，請(qǐng)用管理員的微信掃描登錄小程序后臺(tái)。
如果驗(yàn)證成功，并成功登錄小程序后臺(tái)，會(huì)看到左側(cè)出現(xiàn)如圖3所示的菜單。
圖3 小程序后臺(tái)菜單
點(diǎn)擊最下方的“設(shè)置”，在頁(yè)面的右側(cè)會(huì)出現(xiàn)兩個(gè)選項(xiàng)卡：“基本設(shè)置”和“開發(fā)設(shè)置”。“基本設(shè)置”用于錄入小程序的基本信息。要注意的是，每一個(gè)賬號(hào)只能和一個(gè)小程序綁定，如果要開發(fā)多個(gè)小程序，就需要注冊(cè)多個(gè)賬號(hào)(多個(gè)管理員)，當(dāng)然，也可以是一個(gè)管理員同時(shí)管理多個(gè)賬號(hào)(同一個(gè)身份證最多只能注冊(cè)5個(gè)小程序)。圖4是已經(jīng)錄的小程序基本信息。
圖4 小程序基本信息
接下來(lái)，點(diǎn)擊“開發(fā)設(shè)置”標(biāo)簽，就會(huì)看到小程序的AppID(被遮擋的部分)，如圖5所示。這個(gè)AppID最好不要讓無(wú)關(guān)人員知道，否則可能會(huì)帶來(lái)一些問(wèn)題。讀者可以將這個(gè)AppID輸入到AppID文本框。
圖5 獲取小程序的AppID
2 綁定開發(fā)者
盡管是管理員創(chuàng)建了小程序工程，不過(guò)可能并不是管理員負(fù)責(zé)開發(fā)，而是另外一個(gè)開發(fā)人員。這時(shí)通常需要為這個(gè)開發(fā)人員建立一個(gè)賬戶，實(shí)際上，只需要把這個(gè)開發(fā)人員的微信賬號(hào)綁定到管理員創(chuàng)建的小程序賬號(hào)上即可。
在小程序后臺(tái)左側(cè)菜單中選擇“用戶身份”，會(huì)看到頁(yè)面的右側(cè)顯示當(dāng)前管理員和開發(fā)者的賬號(hào)，如圖6所示。
圖6 用戶身份頁(yè)面
點(diǎn)擊“開發(fā)者”標(biāo)簽，會(huì)看到已經(jīng)綁定的開發(fā)者(最多可綁定10個(gè))，如圖7所示。
圖7 綁定開發(fā)者
點(diǎn)擊頁(yè)面右側(cè)“綁定”按鈕，會(huì)彈出一個(gè)顯示二維碼的頁(yè)面，用要綁定開發(fā)人員的手機(jī)微信掃描該二維碼即可進(jìn)行綁定。綁定完成后，在第一次登錄小程序IDE時(shí)，用已經(jīng)綁定開發(fā)者的手機(jī)微信掃描IDE中顯示的二維碼即可進(jìn)行登錄。不過(guò)，除了管理員外，綁定的開發(fā)者只能在真機(jī)上預(yù)覽小程序，不能將小程序上傳到騰訊的服務(wù)器。
3 創(chuàng)建和打開微信小程序工程
到這一部分，應(yīng)該是最精彩部分的開始，因?yàn)閺倪@一部分開始，我們將進(jìn)入開發(fā)環(huán)節(jié)，來(lái)完成我們的第一個(gè)小程序：猜拳游戲。
別忙，小程序工程還沒建立呢!
現(xiàn)在運(yùn)行小程序IDE，如果是首次運(yùn)行，會(huì)顯示如圖8的登錄窗口，然后用管理員或綁定開發(fā)者的微信掃描該二維碼即可成功登錄。
圖8小程序IDE的登錄窗口
登錄成功后，會(huì)顯示如圖9所示的窗口。
圖9 建立小程序工程的窗口
如果以前使用過(guò)AppID建立了小程序工程，會(huì)自動(dòng)顯示配置小程序時(shí)指定的圖標(biāo)，如果未創(chuàng)建工程，就點(diǎn)擊“添加工程”按鈕來(lái)創(chuàng)建新的小程序工程。如果已經(jīng)有AppID了，就在圖10所示的AppID文本框中輸入AppID，如果沒有AppID，點(diǎn)擊“無(wú)AppID”即可。并按照?qǐng)D10所示輸入項(xiàng)目名稱和項(xiàng)目目錄。注意，如果是新建的工程，項(xiàng)目目錄應(yīng)為空，如果該目錄中有太多的其他文件和目錄，下次啟動(dòng)IDE時(shí)會(huì)由于裝載這些文件和目錄，而進(jìn)入假死狀態(tài)。如果真要進(jìn)入了這種狀態(tài)，在Mac OS X系統(tǒng)下，進(jìn)入~/Library/Application Support目錄，刪除“微信web開發(fā)者工具”目錄即可恢復(fù)IDE的最初狀態(tài)。如果在Windows下，直接卸載小程序IDE，并重新安裝即可。
圖10 創(chuàng)建項(xiàng)目窗口
如果“項(xiàng)目目錄”指定的是其他小程序目錄，那么使用上述方法是打開小程序工程，而不是創(chuàng)建小程序項(xiàng)目。IDE會(huì)自動(dòng)識(shí)別是新建還是打開動(dòng)作。
4 猜拳游戲的布局
進(jìn)入小程序IDE，點(diǎn)擊IDE左上角的“編輯”選項(xiàng)(如圖11所示)，開始編輯代碼。
圖11 IDE左上角的控制選項(xiàng)
猜拳游戲的布局非常簡(jiǎn)單，樣子如圖12所示。
圖12猜拳游戲的布局樣式
猜拳游戲的布局是縱向顯示了三個(gè)組件：文本組件(text)、圖像組件(image)和按鈕組件(button)。在創(chuàng)建小程序工程時(shí)，默認(rèn)建立了兩個(gè)頁(yè)面：index和logs，如圖13所示。我們不需要管logs，在這個(gè)例子中只修改和index頁(yè)面相關(guān)的文件。index是小程序第一個(gè)顯示的頁(yè)面。
圖13index和logs頁(yè)面的文件結(jié)構(gòu)
其中，index.wxml文件是index頁(yè)面的布局文件，現(xiàn)在打開該文件，并按下面的內(nèi)容修改代碼。
- <!--index.wxml-->
- <view class="container">
- <text class="finger_guessing">猜拳游戲</text>
- <view class="userinfo">
- <image class="userinfo-avatar" src="{{imagePath}}" background-size="cover"/>
- <button bindtap="guess">{{title}}</button>
- </view>
- </view>
這段代碼中，image和button組件的內(nèi)容都需要?jiǎng)討B(tài)改變，所以image組件的src屬性和button組件的文本值(夾在<button>和</button>之間的部分)都分別與一個(gè)變量綁定。這是小程序的一個(gè)重要特性(和React Native完全相同)。在改變組件的屬性值時(shí)，并不需要直接獲取該組件的實(shí)例，而只需將該屬性與某個(gè)同類型的變量綁定，一旦該變量的值改變，屬性值也就會(huì)隨之改變了。綁定變量的格式是“{{變量名}}”。改變了的定義和初始化部分，在下一節(jié)會(huì)詳細(xì)介紹。
我們發(fā)現(xiàn)，就算按照前面的布局，仍然不能像圖12所示那樣擺放組件，這是因?yàn)檫€需要下面代碼調(diào)整一下樣式(index.wxss文件)。
- /**index.wxss**/
- .userinfo {
- display: flex;
- flex-direction: column;
- align-items:center;
- margin-top: 50px;
- }
- .userinfo-avatar {
- width: 500rpx;
- height: 500rpx;
- margin: 40rpx;
- }
- .userinfo-nickname {
- color: #aaa;
- }
- .finger_guessing {
- color: #F00;
- font-size: 30px;
- margin-top: 20px;
前面的布局代碼主要調(diào)整了userinfo-avatar的寬度和高度，讓圖像顯示得更大一些。
最后，還需要修改一下app.wxss文件的代碼，將padding屬性的值改成50rpx 0，代碼如下：
- /**app.wxss**/
- .container {
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- padding: 50rpx 0;
- box-sizing: border-box;
- }
當(dāng)然，現(xiàn)在可能仍然無(wú)法顯示圖像，因?yàn)閕magePath變量還沒有設(shè)置，而且圖像還沒有放到工程目錄。現(xiàn)在讀者可以到網(wǎng)上找三張圖片，分別是剪子、石頭和布，當(dāng)然，也可以用本例提供的圖像，并在小程序工程根目錄建立一個(gè)images目錄，將這三個(gè)圖像文件放到該目錄中。
5 控制剪子、石頭、布的快速切換
猜拳游戲的核心就是快速切換剪子、石頭、布三個(gè)圖像，當(dāng)點(diǎn)擊“停止”按鈕后，會(huì)停到其中一個(gè)圖像上。這里涉及到如下兩個(gè)動(dòng)作。
（1）用定時(shí)器快速切換圖像
（2）圖像下方的按鈕，當(dāng)一開始點(diǎn)擊時(shí)，文本變成了“停止”，當(dāng)再次點(diǎn)擊該按鈕后，按鈕文本又變成了“開始”，也就是說(shuō)，一個(gè)按鈕同時(shí)負(fù)責(zé)開始和停止圖像快速切換兩個(gè)動(dòng)作。
控制圖像快速切換和按鈕文本變化兩個(gè)動(dòng)作的代碼都要寫在index.js文件中。首先，你要將這三個(gè)圖像文件名存儲(chǔ)在一個(gè)全局的數(shù)組中，并使用定時(shí)器快速?gòu)倪@個(gè)數(shù)組中依次循環(huán)獲取圖像文件名，并將該文件名指定的圖像顯示到image組件中。修改按鈕的文本只需要修改title變量即可。
這里涉及到兩個(gè)主要變量：imagePath和title。這兩個(gè)都定義在data對(duì)象中，點(diǎn)擊按鈕會(huì)執(zhí)行g(shù)uess函數(shù)(在index.wxml文件中使用bindtap屬性指定按鈕的單擊事件函數(shù)名)，該函數(shù)也需要在index.js中編寫。完整的實(shí)現(xiàn)代碼如下：
- //index.js
- //獲取應(yīng)用實(shí)例
- var app = getApp()
- // 在數(shù)組中存在三個(gè)圖像文件名
- var imagePaths = ['../../images/scissors.png', '../../images/stone.png', '../../images/cloth.png'];
- // 當(dāng)前圖像的索引
- var imageIndex = 0;
- Page({
- data: {
- imagePath: imagePaths[0], // 用于修改image組件顯示圖像的變量
- title: '開始', // 用于改變按鈕文本的變量
- isRunning:false, // 該變量為true，表示圖像正在快速切換
- userInfo: {},
- },
- //事件處理函數(shù)
- bindViewTap: function () {
- wx.navigateTo({
- url: '../logs/logs'
- })
- },
- // 定時(shí)器要執(zhí)行的函數(shù)
- change: function (e) {
- imageIndex++;
- // 當(dāng)前圖像索引大于最大索引時(shí)，重新設(shè)為第一個(gè)索引值（已達(dá)到循環(huán)顯示圖像的目的）
- if (imageIndex > 2) {
- imageIndex = 0;
- }
- // 修改image組件要顯示的圖像（改變imagePath變量的值）
- this.setData(
- {
- imagePath: imagePaths[imageIndex]
- }
- )
- },
- // 點(diǎn)擊按鈕要執(zhí)行的函數(shù)
- guess: function (e) {
- // 獲取isRunning變量的值
- let isRunning = this.data.isRunning;
- // 根據(jù)是否正在快速切換圖像，決定如何修改按鈕文本，以及是開啟定時(shí)器，還是移除定時(shí)器
- if (!isRunning) {
- this.setData(
- {
- title: '停止',
- isRunning:true
- }
- );
- // 開啟定時(shí)器（沒100毫秒調(diào)用一次change函數(shù)）
- this.timer = setInterval((function () {
- this.change()
- }).bind(this), 100);
- }
- else {
- this.setData(
- {
- title: '開始',
- isRunning:false
- }
- );
- // 移除定時(shí)器
- this.timer && clearInterval(this.timer);
- }
- },
- onLoad: function () {
- console.log('onLoad')
- var that = this
- //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
- app.getUserInfo(function (userInfo) {
- //更新數(shù)據(jù)
- that.setData({
- userInfo: userInfo
- })
- })
- }
- })
是不是這個(gè)猜拳游戲很簡(jiǎn)單呢，這么點(diǎn)代碼就搞定了，現(xiàn)在可以通過(guò)左側(cè)的模擬器測(cè)試我們的成果了。大家可以點(diǎn)擊“開始”按鈕，看看圖像是否會(huì)快速切換，再點(diǎn)擊“停止”按鈕，看看是否會(huì)停止在某個(gè)圖像上。
6 真機(jī)測(cè)試小程序
現(xiàn)在輪到用真機(jī)測(cè)試我們的成果了。如果只想在真機(jī)上測(cè)試，通過(guò)管理員或綁定的開發(fā)者登錄小程序IDE就可以。
現(xiàn)在點(diǎn)擊IDE左上角的“項(xiàng)目”選項(xiàng)，右側(cè)會(huì)顯示如圖14所示的項(xiàng)目操作頁(yè)面。
圖14 項(xiàng)目操作頁(yè)面
點(diǎn)擊“預(yù)覽”按鈕，會(huì)顯示如圖15所示的二維碼窗口，用當(dāng)前登錄小程序IDE的用戶(管理員或綁定的開發(fā)者)的微信掃描該二維碼，即可將小程序上傳到真機(jī)上運(yùn)行。
圖15 掃描二維碼上傳小程序到真機(jī)
在真機(jī)(Android手機(jī))的測(cè)試結(jié)果如圖16所示。
圖16 在真機(jī)上的運(yùn)行結(jié)果
7 上傳和審核小程序
如果覺得在真機(jī)上測(cè)試沒問(wèn)題，那么可以點(diǎn)擊圖14所示的“上傳”按鈕將小程序上傳到騰訊的服務(wù)器(該工作只能由管理員完成，綁定的開發(fā)者不允許上傳小程序)。點(diǎn)擊“上傳”按鈕后，也會(huì)顯示一個(gè)類似圖15的二維碼窗口，用管理員的微信掃描該二維碼，然后會(huì)顯示如圖17所示的窗口，輸入相應(yīng)的版本號(hào)和項(xiàng)目備注，最后點(diǎn)擊“上傳”按鈕上傳即可。
圖17 完成最后的上傳設(shè)置工作
成功上傳小程序后，回到小程序的后臺(tái)，點(diǎn)擊左側(cè)的“開發(fā)管理”選項(xiàng)，會(huì)看到如圖18所示的三個(gè)小程序版本的管理頁(yè)面。我們直接上傳的是開發(fā)版本，如果管理員認(rèn)為沒問(wèn)題，可以點(diǎn)擊“提交審核”按鈕，會(huì)將小程序提交給騰訊，這就是審核版本，如果騰訊審核通過(guò)，就正式上線了，這就是線上版本。讀者也可以點(diǎn)擊“提交審核”按鈕右側(cè)的向下箭頭按鈕，并點(diǎn)擊“刪除”按鈕刪除當(dāng)前開發(fā)版本。要注意的是，下一次上傳，會(huì)覆蓋當(dāng)前的開發(fā)版本。
圖18 管理小程序的版本
本文用一個(gè)完整的例子從頭到尾演示了從開發(fā)小程序，到真機(jī)測(cè)試，再到上傳發(fā)布的完整過(guò)程。盡管本章提供的例子非常簡(jiǎn)單，但足以清楚地展示了小程序開發(fā)的完整過(guò)程。不過(guò)要想開發(fā)牛逼的小程序，還需要繼續(xù)閱讀后續(xù)的文章。
相關(guān)課程：征服微信小程序視頻教程（程序接口+API、UI+實(shí)戰(zhàn)案例）
http://edu.51cto.com/course/course_id-7334.html
【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】
