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

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

社區(qū)有獎勵 下面有投票

本文也有評論區(qū)、點贊、收藏有抽獎，評論區(qū)抽取，3天內(nèi)開獎

前言

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

在社區(qū)中發(fā)文每周將會在活躍前十送出：

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

教程所需

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

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

• JavaScript基礎(chǔ)

• HTML基礎(chǔ)

目錄 持續(xù)更新：

小程序的 HelloWord 01《 程序員變現(xiàn)指南之 微信&QQ 小程序 真的零基礎(chǔ)開發(fā)寶典》
小程序獲取頭像試試水 02《 程序員變現(xiàn)指南之 微信&QQ 小程序 真的零基礎(chǔ)開發(fā)寶典》
小程序仿微信發(fā)現(xiàn)頁 03《 程序員變現(xiàn)指南之 微信&QQ 小程序 真的零基礎(chǔ)開發(fā)寶典》
小程序猜數(shù)字游戲 04《 程序員變現(xiàn)指南之 微信&QQ 小程序 真的零基礎(chǔ)開發(fā)寶典》

一、多頁面訪問

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

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

<view>  <button>開始游戲button>  <button>游戲規(guī)則button>view>

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

<view>  <button bindtap="startGame">開始游戲button>  <button bindtap="toRules">游戲規(guī)則button>view>

此時咱們在index.js中寫下對應(yīng)的函數(shù)響應(yīng)：

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

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

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

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

接著咱們創(chuàng)建文件夾 ru 與 game：

隨后在創(chuàng)建的兩個目錄的json文件中添加基本的json內(nèi)容，否則會 出錯呢：

{  "usingComponents": {}}

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

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

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

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

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

在游戲界面 game.wxml 文件響應(yīng)前，會執(zhí)行一些 game.js 里面的一些js函數(shù)，這些函數(shù)對應(yīng)著當前頁面的一個狀態(tài)，例如：

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

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

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

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

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

三、判斷所猜數(shù)字正確與否

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

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

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

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

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

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

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

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

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

接著查看 guess 函數(shù)代碼：

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 表示調(diào)用微信小程序接口彈出提示，傳入的參數(shù) title 為提示內(nèi)容。

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

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

創(chuàng)建兩個變量，一個是 count記錄猜測次數(shù)，另外一個 tip 為提示當前是對是錯。

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

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

接著的 esle if 和 else 表示是否猜大或者猜?。?/p>

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

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

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

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

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

在重新開始處綁定的點擊事件 regame 事件只需要重新在事件中調(diào)用 init 函數(shù)即可：

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

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

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

此時完美解決：

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

四、最后關(guān)鍵完整代碼

game.wxml

<view>  <text>猜數(shù)字游戲text>  <form wx:if="{{isGame==true}}">    <input  bindblur="getNumber" type="number" placeholder="請輸入1-100你要猜的數(shù)">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({  /**   * 頁面的初始數(shù)據(jù)   */  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      })    }  },  /**   * 生命周期函數(shù)--監(jiān)聽頁面加載   */  onLoad: function (options) {    this.inital();    console.log(this.data.answei)  },  regame(){    this.inital();  },  /**   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函數(shù)--監(jiān)聽頁面顯示   */  onShow: function () {      },  /**   * 生命周期函數(shù)--監(jiān)聽頁面隱藏   */  onHide: function () {      },  /**   * 生命周期函數(shù)--監(jiān)聽頁面卸載   */  onUnload: function () {      },  /**   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作   */  onPullDownRefresh: function () {      },  /**   * 頁面上拉觸底事件的處理函數(shù)   */  onReachBottom: function () {      },  /**   * 用戶點擊右上角分享   */  onShareAppMessage: function () {      }})

index.wxml

<view>  <button bindtap="startGame">開始游戲button>  <button bindtap="toRules">游戲規(guī)則button>view>

index.js

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