微信小程序開發(fā)（2）：猜拳游戲全過程詳解

作者：李寧 2016-11-08 09:01:24

【51CTO.com原創(chuàng)稿件】如果讀者不了解什么是微信小程序，可以看我的另外一篇文章：(微信小程序：原生熱布局終將改變世界)http://zhuanlan.51cto.com/art/201610/519027.htm

本文將從零開始開發(fā)一款微信小程序。該程序的功能很簡單，是一個猜拳游戲，點(diǎn)擊“開始”按鈕后，會快速切換“錘子”、“剪刀”和“布”，直到按“停止”按鈕，會顯示“錘子”、“剪刀”和“布”中的一個，該游戲可以雙方或多方進(jìn)行猜拳，這里猜拳的規(guī)則就不多說了，大家應(yīng)該很清楚。本節(jié)的目的是通過該例子，將開發(fā)微信小程序的過程完整地跑一遍，從注冊公測賬號開始，一直到將微信小程序發(fā)布到微信平臺，并在真機(jī)上測試為止。通過該例子，讀者可以完全掌握微信小程序的開發(fā)流程。

1.注冊微信小程序公測賬號

在上一篇文章中已經(jīng)安裝了微信小程序的IDE，并使用了無AppID的方式創(chuàng)建了工程。盡管這種方式可以在計(jì)算機(jī)上開發(fā)小程序(為了方便，以后將微信小程序簡稱為小程序)，并使用模擬器進(jìn)行測試，但無法將小程序在真機(jī)上測試，更無法將小程序上傳到服務(wù)端進(jìn)行審核，所以要想以更完美的方式開發(fā)小程序，必須要有小程序的AppID。

現(xiàn)在騰訊已經(jīng)開放了小程序AppID的注冊，不過目前只針對企業(yè)、政府、媒體等組織，并不針對個人開放注冊，相信小程序正式發(fā)布時，會向個人開放。對于很多讀者來說，可能沒有相關(guān)組織的資質(zhì)，但也可以通過本章的學(xué)習(xí)，對小程序開發(fā)的全過程有一個深入的了解，以免以后完全開放注冊后不知所措。

要想注冊小程序賬號，首先進(jìn)入如下頁面。

https://mp.weixin.qq.com

然后點(diǎn)擊右上角的“立即注冊”鏈接，會進(jìn)入注冊頁面，在頁面的中心位置會看到如圖1所示的注冊類型，包括訂閱號、服務(wù)號、小程序和企業(yè)號。直接點(diǎn)擊“小程序”，進(jìn)入小程序注冊頁面。

圖1 各種“號”們的注冊頁面

在注冊的過程中，會要求輸入郵箱、密碼等一些常規(guī)信息。在進(jìn)行驗(yàn)證時會要求輸入和企業(yè)有關(guān)的信息，如企業(yè)名稱、統(tǒng)一社會信用代碼、企業(yè)銀行賬號等信息。注冊用戶可以從圖2所示主體類型中選擇一個。

圖2 選擇主體類型

選中一個主體后，在頁面的下方會要求輸入相關(guān)的信息，如果選擇的是企業(yè)，會要求輸入企業(yè)名稱、營業(yè)執(zhí)照注冊號等信息，以及管理員的相關(guān)信息(每個管理員最多只能注冊5個小程序)。這里的管理員(在注冊的過程中會和管理員的微信綁定)是用于登錄小程序后臺的，其他加入的普通開發(fā)人員無法登錄小程序后臺，只能登錄小程序IDE。

最后會要求用戶使用企業(yè)賬戶向騰訊官方的賬號打款0.06元進(jìn)行驗(yàn)證(要求在10天之內(nèi)打款，否則驗(yàn)證失敗，而且只能是0.06元)。不管驗(yàn)證是否成功，款項(xiàng)都會退回到原來的企業(yè)賬戶。驗(yàn)證是自動的，但并不是實(shí)時的。騰訊的服務(wù)端應(yīng)該是隔一段時間進(jìn)行一次驗(yàn)證，可能會等幾個小時，請耐心等待。

在驗(yàn)證通過之前，仍然可以用注冊Email登錄小程序后臺，但無法獲取小程序AppID。驗(yàn)證通過后，會通過站內(nèi)短信(在小程序后臺右上角)進(jìn)行通知。要注意的是，登錄小程序后臺的過程中要使用手機(jī)微信掃描二維碼進(jìn)行登錄，請用管理員的微信掃描登錄小程序后臺。

如果驗(yàn)證成功，并成功登錄小程序后臺，會看到左側(cè)出現(xiàn)如圖3所示的菜單。

圖3 小程序后臺菜單

點(diǎn)擊最下方的“設(shè)置”，在頁面的右側(cè)會出現(xiàn)兩個選項(xiàng)卡：“基本設(shè)置”和“開發(fā)設(shè)置”。“基本設(shè)置”用于錄入小程序的基本信息。要注意的是，每一個賬號只能和一個小程序綁定，如果要開發(fā)多個小程序，就需要注冊多個賬號(多個管理員)，當(dāng)然，也可以是一個管理員同時管理多個賬號(同一個身份證最多只能注冊5個小程序)。圖4是已經(jīng)錄的小程序基本信息。

圖4 小程序基本信息

接下來，點(diǎn)擊“開發(fā)設(shè)置”標(biāo)簽，就會看到小程序的AppID(被遮擋的部分)，如圖5所示。這個AppID最好不要讓無關(guān)人員知道，否則可能會帶來一些問題。讀者可以將這個AppID輸入到AppID文本框。

圖5 獲取小程序的AppID

2 綁定開發(fā)者

盡管是管理員創(chuàng)建了小程序工程，不過可能并不是管理員負(fù)責(zé)開發(fā)，而是另外一個開發(fā)人員。這時通常需要為這個開發(fā)人員建立一個賬戶，實(shí)際上，只需要把這個開發(fā)人員的微信賬號綁定到管理員創(chuàng)建的小程序賬號上即可。

在小程序后臺左側(cè)菜單中選擇“用戶身份”，會看到頁面的右側(cè)顯示當(dāng)前管理員和開發(fā)者的賬號，如圖6所示。

圖6 用戶身份頁面

點(diǎn)擊“開發(fā)者”標(biāo)簽，會看到已經(jīng)綁定的開發(fā)者(最多可綁定10個)，如圖7所示。

圖7 綁定開發(fā)者

點(diǎn)擊頁面右側(cè)“綁定”按鈕，會彈出一個顯示二維碼的頁面，用要綁定開發(fā)人員的手機(jī)微信掃描該二維碼即可進(jìn)行綁定。綁定完成后，在第一次登錄小程序IDE時，用已經(jīng)綁定開發(fā)者的手機(jī)微信掃描IDE中顯示的二維碼即可進(jìn)行登錄。不過，除了管理員外，綁定的開發(fā)者只能在真機(jī)上預(yù)覽小程序，不能將小程序上傳到騰訊的服務(wù)器。

3 創(chuàng)建和打開微信小程序工程

到這一部分，應(yīng)該是最精彩部分的開始，因?yàn)閺倪@一部分開始，我們將進(jìn)入開發(fā)環(huán)節(jié)，來完成我們的第一個小程序：猜拳游戲。

別忙，小程序工程還沒建立呢!

現(xiàn)在運(yùn)行小程序IDE，如果是首次運(yùn)行，會顯示如圖8的登錄窗口，然后用管理員或綁定開發(fā)者的微信掃描該二維碼即可成功登錄。

圖8小程序IDE的登錄窗口

登錄成功后，會顯示如圖9所示的窗口。

圖9 建立小程序工程的窗口

如果以前使用過AppID建立了小程序工程，會自動顯示配置小程序時指定的圖標(biāo)，如果未創(chuàng)建工程，就點(diǎn)擊“添加工程”按鈕來創(chuàng)建新的小程序工程。如果已經(jīng)有AppID了，就在圖10所示的AppID文本框中輸入AppID，如果沒有AppID，點(diǎn)擊“無AppID”即可。并按照圖10所示輸入項(xiàng)目名稱和項(xiàng)目目錄。注意，如果是新建的工程，項(xiàng)目目錄應(yīng)為空，如果該目錄中有太多的其他文件和目錄，下次啟動IDE時會由于裝載這些文件和目錄，而進(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會自動識別是新建還是打開動作。

4 猜拳游戲的布局

進(jìn)入小程序IDE，點(diǎn)擊IDE左上角的“編輯”選項(xiàng)(如圖11所示)，開始編輯代碼。

圖11 IDE左上角的控制選項(xiàng)

猜拳游戲的布局非常簡單，樣子如圖12所示。

圖12猜拳游戲的布局樣式

猜拳游戲的布局是縱向顯示了三個組件：文本組件(text)、圖像組件(image)和按鈕組件(button)。在創(chuàng)建小程序工程時，默認(rèn)建立了兩個頁面：index和logs，如圖13所示。我們不需要管logs，在這個例子中只修改和index頁面相關(guān)的文件。index是小程序第一個顯示的頁面。

圖13index和logs頁面的文件結(jié)構(gòu)

其中，index.wxml文件是index頁面的布局文件，現(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)容都需要動態(tài)改變，所以image組件的src屬性和button組件的文本值(夾在<button>和</button>之間的部分)都分別與一個變量綁定。這是小程序的一個重要特性(和React Native完全相同)。在改變組件的屬性值時，并不需要直接獲取該組件的實(shí)例，而只需將該屬性與某個同類型的變量綁定，一旦該變量的值改變，屬性值也就會隨之改變了。綁定變量的格式是“{{變量名}}”。改變了的定義和初始化部分，在下一節(jié)會詳細(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)在可能仍然無法顯示圖像，因?yàn)閕magePath變量還沒有設(shè)置，而且圖像還沒有放到工程目錄。現(xiàn)在讀者可以到網(wǎng)上找三張圖片，分別是剪子、石頭和布，當(dāng)然，也可以用本例提供的圖像，并在小程序工程根目錄建立一個images目錄，將這三個圖像文件放到該目錄中。

5 控制剪子、石頭、布的快速切換

猜拳游戲的核心就是快速切換剪子、石頭、布三個圖像，當(dāng)點(diǎn)擊“停止”按鈕后，會停到其中一個圖像上。這里涉及到如下兩個動作。

（1）用定時器快速切換圖像

（2）圖像下方的按鈕，當(dāng)一開始點(diǎn)擊時，文本變成了“停止”，當(dāng)再次點(diǎn)擊該按鈕后，按鈕文本又變成了“開始”，也就是說，一個按鈕同時負(fù)責(zé)開始和停止圖像快速切換兩個動作。

控制圖像快速切換和按鈕文本變化兩個動作的代碼都要寫在index.js文件中。首先，你要將這三個圖像文件名存儲在一個全局的數(shù)組中，并使用定時器快速從這個數(shù)組中依次循環(huán)獲取圖像文件名，并將該文件名指定的圖像顯示到image組件中。修改按鈕的文本只需要修改title變量即可。

這里涉及到兩個主要變量：imagePath和title。這兩個都定義在data對象中，點(diǎn)擊按鈕會執(zhí)行g(shù)uess函數(shù)(在index.wxml文件中使用bindtap屬性指定按鈕的單擊事件函數(shù)名)，該函數(shù)也需要在index.js中編寫。完整的實(shí)現(xiàn)代碼如下：

//index.js 
//獲取應(yīng)用實(shí)例 
 var app = getApp() 
//  在數(shù)組中存在三個圖像文件名 
 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' 
     }) 
   }, 
   //  定時器要執(zhí)行的函數(shù) 
   change: function (e) { 
     imageIndex++; 
     //  當(dāng)前圖像索引大于最大索引時，重新設(shè)為第一個索引值（已達(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ù)是否正在快速切換圖像，決定如何修改按鈕文本，以及是開啟定時器，還是移除定時器 
     if (!isRunning) { 
       this.setData( 
         { 
           title: '停止', 
           isRunning:true 
         } 
       ); 
      //  開啟定時器（沒100毫秒調(diào)用一次change函數(shù)） 
       this.timer = setInterval((function () { 
         this.change() 
       }).bind(this), 100); 
     } 
     else { 
       this.setData( 
         { 
           title: '開始', 
           isRunning:false 
         } 
       ); 
      //  移除定時器 
       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 
       }) 
     }) 
   } 
 })

是不是這個猜拳游戲很簡單呢，這么點(diǎn)代碼就搞定了，現(xiàn)在可以通過左側(cè)的模擬器測試我們的成果了。大家可以點(diǎn)擊“開始”按鈕，看看圖像是否會快速切換，再點(diǎn)擊“停止”按鈕，看看是否會停止在某個圖像上。

6 真機(jī)測試小程序

現(xiàn)在輪到用真機(jī)測試我們的成果了。如果只想在真機(jī)上測試，通過管理員或綁定的開發(fā)者登錄小程序IDE就可以。

現(xiàn)在點(diǎn)擊IDE左上角的“項(xiàng)目”選項(xiàng)，右側(cè)會顯示如圖14所示的項(xiàng)目操作頁面。

圖14 項(xiàng)目操作頁面

點(diǎn)擊“預(yù)覽”按鈕，會顯示如圖15所示的二維碼窗口，用當(dāng)前登錄小程序IDE的用戶(管理員或綁定的開發(fā)者)的微信掃描該二維碼，即可將小程序上傳到真機(jī)上運(yùn)行。

圖15 掃描二維碼上傳小程序到真機(jī)

在真機(jī)(Android手機(jī))的測試結(jié)果如圖16所示。

圖16 在真機(jī)上的運(yùn)行結(jié)果

7 上傳和審核小程序

如果覺得在真機(jī)上測試沒問題，那么可以點(diǎn)擊圖14所示的“上傳”按鈕將小程序上傳到騰訊的服務(wù)器(該工作只能由管理員完成，綁定的開發(fā)者不允許上傳小程序)。點(diǎn)擊“上傳”按鈕后，也會顯示一個類似圖15的二維碼窗口，用管理員的微信掃描該二維碼，然后會顯示如圖17所示的窗口，輸入相應(yīng)的版本號和項(xiàng)目備注，最后點(diǎn)擊“上傳”按鈕上傳即可。

圖17 完成最后的上傳設(shè)置工作

成功上傳小程序后，回到小程序的后臺，點(diǎn)擊左側(cè)的“開發(fā)管理”選項(xiàng)，會看到如圖18所示的三個小程序版本的管理頁面。我們直接上傳的是開發(fā)版本，如果管理員認(rèn)為沒問題，可以點(diǎn)擊“提交審核”按鈕，會將小程序提交給騰訊，這就是審核版本，如果騰訊審核通過，就正式上線了，這就是線上版本。讀者也可以點(diǎn)擊“提交審核”按鈕右側(cè)的向下箭頭按鈕，并點(diǎn)擊“刪除”按鈕刪除當(dāng)前開發(fā)版本。要注意的是，下一次上傳，會覆蓋當(dāng)前的開發(fā)版本。