操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

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

本文將從零開始開發(fā)一款微信小程序。該程序的功能很簡單，是一個(gè)猜拳游戲，點(diǎn)擊“開始”按鈕后，會快速切換“錘子”、“剪刀”和“布”，直到按“停止”按鈕，會顯示“錘子”、“剪刀”和“布”中的一個(gè)，該游戲可以雙方或多方進(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è)、政府、媒體等組織，并不針對個(gè)人開放注冊，相信小程序正式發(fā)布時(shí)，會向個(gè)人開放。對于很多讀者來說，可能沒有相關(guān)組織的資質(zhì)，但也可以通過本章的學(xué)習(xí)，對小程序開發(fā)的全過程有一個(gè)深入的了解，以免以后完全開放注冊后不知所措。

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

https://mp.weixin.qq.com

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

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

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

圖2 選擇主體類型

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

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

在驗(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)兩個(gè)選項(xiàng)卡：“基本設(shè)置”和“開發(fā)設(shè)置”。“基本設(shè)置”用于錄入小程序的基本信息。要注意的是，每一個(gè)賬號只能和一個(gè)小程序綁定，如果要開發(fā)多個(gè)小程序，就需要注冊多個(gè)賬號（多個(gè)管理員），當(dāng)然，也可以是一個(gè)管理員同時(shí)管理多個(gè)賬號（同一個(gè)身份證最多只能注冊5個(gè)小程序）。圖4是已經(jīng)錄的小程序基本信息。

圖4 小程序基本信息

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

圖5 獲取小程序的AppID

2 、綁定開發(fā)者

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

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

圖6 用戶身份頁面

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

圖7 綁定開發(fā)者

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

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

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

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

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

圖8小程序IDE的登錄窗口

登錄成功后，會顯示如圖9所示的窗口。圖9 建立小程序工程的窗口

如果以前使用過AppID建立了小程序工程，會自動顯示配置小程序時(shí)指定的圖標(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時(shí)會由于裝載這些文件和目錄，而進(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猜拳游戲的布局樣式

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

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

其中，index.wxml文件是index頁面的布局文件，現(xiàn)在打開該文件，并按下面的內(nèi)容修改代碼。

1. <!--index.wxml-->

2. <view>

3. <text>猜拳游戲</text>

4. <view class="userinfo">

5. <image src="{{imagePath}}" background-size="cover"/>

6. <button bindtap="guess">{{title}}</button>

7. </view>

8. </view>

這段代碼中，image和button組件的內(nèi)容都需要動態(tài)改變，所以image組件的src屬性和button組件的文本值（夾在<button>和</button>之間的部分）都分別與一個(gè)變量綁定。這是小程序的一個(gè)重要特性（和React Native完全相同）。在改變組件的屬性值時(shí)，并不需要直接獲取該組件的實(shí)例，而只需將該屬性與某個(gè)同類型的變量綁定，一旦該變量的值改變，屬性值也就會隨之改變了。綁定變量的格式是“{{變量名}}”。改變了的定義和初始化部分，在下一節(jié)會詳細(xì)介紹。

我們發(fā)現(xiàn)，就算按照前面的布局，仍然不能像圖12所示那樣擺放組件，這是因?yàn)檫€需要下面代碼調(diào)整一下樣式（index.wxss文件）。

1. /**index.wxss**/

2. .userinfo {

3. display: flex;

4. flex-direction: column;

5. align-items:center;

6. margin-top: 50px;

7. }

8. .userinfo-avatar {

9. width: 500rpx;

10. height: 500rpx;

11. margin: 40rpx;

12. }

13. .userinfo-nickname {

14. color: #aaa;

15. }

16. .finger_guessing {

17. color: #F00;

18. font-size: 30px;

19. margin-top: 20px;

20. }

前面的布局代碼主要調(diào)整了userinfo-avatar的寬度和高度，讓圖像顯示得更大一些。

最后，還需要修改一下app.wxss文件的代碼，將padding屬性的值改成50rpx 0，代碼如下：

1. /**app.wxss**/

2. .container {

3. height: 100%;

4. display: flex;

5. flex-direction: column;

6. align-items: center;

7. justify-content: space-between;

8. padding: 50rpx 0;

9. box-sizing: border-box;

10. }

當(dāng)然，現(xiàn)在可能仍然無法顯示圖像，因?yàn)?strong>imagePath變量還沒有設(shè)置，而且圖像還沒有放到工程目錄。現(xiàn)在讀者可以到網(wǎng)上找三張圖片，分別是剪子、石頭和布，當(dāng)然，也可以用本例提供的圖像，并在小程序工程根目錄建立一個(gè)images目錄，將這三個(gè)圖像文件放到該目錄中。

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

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

1. 用定時(shí)器快速切換圖像

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

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

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

1. //index.js

2. //獲取應(yīng)用實(shí)例

3. var app=getApp()

4. // 在數(shù)組中存在三個(gè)圖像文件名

5. var imagePaths=['../../images/scissors.png', '../../images/stone.png', '../../images/cloth.png'];

6. // 當(dāng)前圖像的索引

7. var imageIndex=0;

8. Page({

9. data: {

10. imagePath: imagePaths[0], // 用于修改image組件顯示圖像的變量

11. title: '開始', // 用于改變按鈕文本的變量

12. isRunning:false, // 該變量為true，表示圖像正在快速切換

13. userInfo: {},

14. },

15. //事件處理函數(shù)

16. bindViewTap: function () {

17. wx.navigateTo({

18. url: '../logs/logs'

19. })

20. },

21. // 定時(shí)器要執(zhí)行的函數(shù)

22. change: function (e) {

23. imageIndex++;

24. // 當(dāng)前圖像索引大于最大索引時(shí)，重新設(shè)為第一個(gè)索引值（已達(dá)到循環(huán)顯示圖像的目的）

25. if (imageIndex > 2) {

26. imageIndex=0;

27. }

28. // 修改image組件要顯示的圖像（改變imagePath變量的值）

29. this.setData(

30. {

31. imagePath: imagePaths[imageIndex]

32. }

33. )

34. },

35. // 點(diǎn)擊按鈕要執(zhí)行的函數(shù)

36. guess: function (e) {

37. // 獲取isRunning變量的值

38. let isRunning=this.data.isRunning;

39. // 根據(jù)是否正在快速切換圖像，決定如何修改按鈕文本，以及是開啟定時(shí)器，還是移除定時(shí)器

40. if (!isRunning) {

41. this.setData(

42. {

43. title: '停止',

44. isRunning:true

45. }

46. );

47. // 開啟定時(shí)器（沒100毫秒調(diào)用一次change函數(shù)）

48. this.timer=setInterval((function () {

49. this.change()

50. }).bind(this), 100);

51. }

52. else {

53. this.setData(

54. {

55. title: '開始',

56. isRunning:false

57. }

58. );

59. // 移除定時(shí)器

60. this.timer && clearInterval(this.timer);

61. }

62. },

63. onLoad: function () {

64. console.log('onLoad')

65. var that=this

66. //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)

67. app.getUserInfo(function (userInfo) {

68. //更新數(shù)據(jù)

69. that.setData({

70. userInfo: userInfo

71. })

72. })

73. }

74. })

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

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)擊“上傳”按鈕后，也會顯示一個(gè)類似圖15的二維碼窗口，用管理員的微信掃描該二維碼，然后會顯示如圖17所示的窗口，輸入相應(yīng)的版本號和項(xiàng)目備注，最后點(diǎn)擊“上傳”按鈕上傳即可。

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

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

圖18 管理小程序的版本

本文用一個(gè)完整的例子從頭到尾演示了從開發(fā)小程序，到真機(jī)測試，再到上傳發(fā)布的完整過程。盡管本章提供的例子非常簡單，但足以清楚地展示了小程序開發(fā)的完整過程。不過要想開發(fā)牛逼的小程序，還需要繼續(xù)閱讀后續(xù)的文章。

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請注明原文作者和出處為51CTO.com】