本系列教程是針對粉絲的變現教程，還不是粉絲的可以關注我并且到社區：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",    })  },