本系列教程是針對粉絲的變現教程，還不是粉絲的可以關注我并且到社區：https://bbs.csdn.net/topics/603436232

進行打卡，不是老粉的也可以獲取最終的技術變現學習，最終還有詳細的變現教程等你來。

社區有獎勵 下面有投票

本文也有評論區、點贊、收藏有抽獎，評論區抽取，3天內開獎

前言

《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
本系列文章參考《微信小程序開發實戰》并對新手做出補充說明
教程出完后將會有變現直播，請關注CSDN社區活動公告：https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。

在社區中發文每周將會在活躍前十送出：

• 一本實物書籍
• 多份實物小禮品
• 每月送出機械鍵盤等獎勵

教程所需

由于小程序開發需要一定的基礎，這些基礎需要提前掌握，本教程只對小程序開發進行零基礎說明。

• 微信小程序開發工具，下載鏈接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• JavaScript基礎

• HTML基礎

目錄 持續更新：

小程序的 HelloWord 01《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
小程序獲取頭像試試水 02《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
小程序仿微信發現頁 03《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
小程序猜數字游戲 04《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》

一、多頁面訪問

首先該demo有多個頁面，這些頁面進入到首頁后可以互相查看：

首先頁面就是兩個按鈕，一看就是一個 view 里面有兩個 button，簡簡單單是不是？index.wxml 的代碼如下：

<view><button>開始游戲</button><button>游戲規則</button>
</view>

接著我們發現在我目錄中有兩個文件夾，一個是 game 還有一個是 ru，這個不急，咱們先給首頁加上合適的事件。我們需要點擊按鈕跳轉到其它頁面，這個時候就需要添加事件，事件是一個js函數，咱們在前端index.wxml中使用bindtap綁定不同按鈕對應需要執行的事件：

<view><button bindtap="startGame">開始游戲</button><button bindtap="toRules">游戲規則</button>
</view>

此時咱們在index.js中寫下對應的函數響應：

  startGame(){},toRules(){},

那我們需要怎樣跳轉頁面呢？這個時候就需要使用 wx.navigateTo({})，此時代碼寫成：

  startGame(){wx.navigateTo({url: '/pages/game/game',})},toRules(){wx.navigateTo({url: '/pages/ru/ru',})},

此時只需要在 navigateTo 中傳入 url 參數即可，這些 url參數表示需要跳轉頁面的文職，其中 ru/ru 直接會默認跳轉到對應的 wxml 文件。

接著咱們創建文件夾 ru 與 game：

隨后在創建的兩個目錄的json文件中添加基本的json內容，否則會 出錯呢：

{"usingComponents": {}
}

接下來還需要一個點，就是在app.json中配置對應的文件目錄：

"pages": ["pages/index/index","pages/game/game","pages/ru/ru","pages/logs/logs"]

不配置就等于沒注冊，沒注冊肯定是找不到，這個一定要注意，接下來，我們點擊對應的按鈕就可以跳轉到對應的界面了。

二、開始游戲頁面隨機值生成

既然已經可以進入游戲開始頁了，咱們就可以開始設置一個隨機值， 這個隨機值就是用戶需要回答的答案。

在游戲界面 game.wxml 文件響應前，會執行一些 game.js 里面的一些js函數，這些函數對應著當前頁面的一個狀態，例如：

此時可以看到頁面中有對應的注釋說明每個事件在什么時候調用。接下來我們需要在 onload 加載時就創建一個隨機數。此時可以寫一個js的函數如下：

inital(){this.setData({answei:Math.round(Math.random()*100),count:0,tip:'',x:0,isGame:true});},

在代碼中調用了當前頁面的 setData 方法，this.setData()為當前頁面設置頁面所需的值，需要把對應的值放到花括號中，添加到setData中進行設置：

{answei:Math.round(Math.random()*100),count:0,tip:'',x:0,isGame:true}

其中 answei 的值等于 Math.round(Math.random()*100)，其中 Math.random() 將會得到一個大于1小于0的小數，那么如果想取一個0到100的數就需要乘 100，接著 Math.round() 的作用是四舍五入取整，此時就可以得到一個0到100的整數了。
在該init方法中還設置了count 用于累計猜測次數，tip當前提示，x為猜測值，isGame表示是否游戲結束。

三、判斷所猜數字正確與否

接下來在游戲界面 game.wxml 中輸入如下代碼編寫界面：

<view><text>猜數字游戲</text><form><input type="number" placeholder="請輸入1-100你要猜的數"></input><button form-type="reset">確定</button></form>
</view>

inpuit="number" 表示當前 input接收數字輸入，placeholder 表示該輸入框的提示語，button 按鈕的 form-type=“reset” 表示在按下按鈕后其 form 內的內容將會重置。

接著在輸入框 input 與 按鈕button 上綁定事件：

  <form><input  bindblur="getNumber" type="number" placeholder="請輸入1-100你要猜的數"></input><button bindtap="guess" form-type="reset">確定</button></form>

其中 bindblur 表示當前input 失去焦點后，將會響應一個事件，這個事件是 getNumber，button 按鈕點擊后將會響應 guess 事件。

此時去 game.js 中編寫這兩個事件，首先查看 getNumber：

getNumber(e){this.setData({x:e.detail.value});console.log(this.data.x)},

此時響應頁面中按鈕失去焦點后，將會有一個值傳遞到該函數中，這個值包含在 e參數中，使用 e.detail.value 即可獲取到傳入 input 中輸入的值。此時使用 setData 設置當前值中的猜測值 x 為輸入框的內容值。

接著查看 guess 函數代碼：

guess(){let x=this.data.x;if(x<0){wx.showToast({title: '不能小于0',})}else if(x>100){wx.showToast({title: '不能大于100',})}else{let count=this.data.count+1;let tip=this.data.tip;if(x==this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 對了！';this.setData({isGame:false});}else if(x>this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 大了！';}else{tip+='\n第'+count+' 回合 猜:'+x+' 小了！';}this.setData({tip:tip,count:count})}},

首先 let x=this.data.x; 定義一個局部變量x，賦值為猜測的值x，方便之后的計算。
接著判斷猜測之是否大于100或者小于0，因為這兩者是范圍之外不再進行判斷，所以最開始使用 if進行判斷：

 if(x<0){wx.showToast({title: '不能小于0',})}else if(x>100){wx.showToast({title: '不能大于100',})}

以上代碼中 wx.showToast 表示調用微信小程序接口彈出提示，傳入的參數 title 為提示內容。

在以上完整代碼 esle 部分中就是合理輸入時進行的響應。在else 部分中：

 let count=this.data.count+1;let tip=this.data.tip;

創建兩個變量，一個是 count記錄猜測次數，另外一個 tip 為提示當前是對是錯。

if(x==this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 對了！';this.setData({isGame:false});}

接著判斷 x 是否等于最開始設置 answei（才發現因為打錯了，不要在意就用著吧），如果等于就直接設置 tip的值為 第 某次回答 猜對了。其中count是表示第幾次的變量，x是當前猜測的值。最后設置一個 isGame 這個變量為 false，表示游戲結束。

接著的 esle if 和 else 表示是否猜大或者猜小：

else if(x>this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 大了！';
}else{tip+='\n第'+count+' 回合 猜:'+x+' 小了！';
}

其中 else if 表示 x 的值是否猜大了，猜大使用 tip加上當前的記錄；另外的else 表示猜小的情況，同理記錄 tip。

此時已經有了tip記錄，將 tip 記錄反饋至界面 game.wxml之中，只需要在前端加一個 text 即可，這個text 輸出對應的 tip值：

最后我們也要將 isGame 用上，當猜對后應該顯示一個重新開始的按鈕，那么此時在前端頁面中加上一個 view 用于顯示重新開始按鈕：

在 view 之中 wx:if="{{isGame==false}}" 表示使用 if 判斷，isGame 是否等于 false，等于false 表示當前游戲結束，此時滿足條件將會顯示該部分內容，也就是顯示重新開始按鈕。在 "{{isGame==false}}" 中會自動解析 isGame的值與 flase 進行對比。

在重新開始處綁定的點擊事件 regame 事件只需要重新在事件中調用 init 函數即可：

 regame(){this.inital();},

此時即使猜對了，頁面也還是會顯示內容確定內容：

該邏輯不合理，再到 form 中添加一個 wx:if 判斷 isGame 的值是否等于 true，如果等于true 就顯示，不等于則不顯示：

此時完美解決：

還剩一個規則頁過于簡單，大家就自己搞定了。

四、最后關鍵完整代碼

game.wxml

<view><text>猜數字游戲</text><form wx:if="{{isGame==true}}"><input  bindblur="getNumber" type="number" placeholder="請輸入1-100你要猜的數"></input><button bindtap="guess" form-type="reset">確定</button></form><view wx:if="{{isGame==false}}"><button bindtap="regame">重新開始</button></view><text>{{tip}}</text>
</view>

game.js

Page({/*** 頁面的初始數據*/data: {},inital(){this.setData({answei:Math.round(Math.random()*100),count:0,tip:'',x:0,isGame:true});},getNumber(e){this.setData({x:e.detail.value});console.log(this.data.x)},guess(){let x=this.data.x;if(x<0){wx.showToast({title: '不能小于0',})}else if(x>100){wx.showToast({title: '不能大于100',})}else{let count=this.data.count+1;let tip=this.data.tip;if(x==this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 對了！';this.setData({isGame:false});}else if(x>this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 大了！';}else{tip+='\n第'+count+' 回合 猜:'+x+' 小了！';}this.setData({tip:tip,count:count})}},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {this.inital();console.log(this.data.answei)},regame(){this.inital();},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {}
})

index.wxml

<view><button bindtap="startGame">開始游戲</button><button bindtap="toRules">游戲規則</button>
</view>

index.js

 startGame(){wx.navigateTo({url: '/pages/game/game',})},toRules(){wx.navigateTo({url: '/pages/ru/ru',})},