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

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

社區(qū)有獎(jiǎng)勵(lì) 下面有投票

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

前言

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

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

• 一本實(shí)物書籍
• 多份實(shí)物小禮品
• 每月送出機(jī)械鍵盤等獎(jiǎng)勵(lì)

教程所需

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

• 微信小程序開發(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)頁(yè) 03《 程序員變現(xiàn)指南之 微信&QQ 小程序 真的零基礎(chǔ)開發(fā)寶典》
小程序猜數(shù)字游戲 04《 程序員變現(xiàn)指南之 微信&QQ 小程序 真的零基礎(chǔ)開發(fā)寶典》

一、多頁(yè)面訪問(wèn)

首先該demo有多個(gè)頁(yè)面，這些頁(yè)面進(jìn)入到首頁(yè)后可以互相查看：

首先頁(yè)面就是兩個(gè)按鈕，一看就是一個(gè) view 里面有兩個(gè) button，簡(jiǎn)簡(jiǎn)單單是不是？index.wxml 的代碼如下：

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

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

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

此時(shí)咱們?cè)趇ndex.js中寫下對(duì)應(yīng)的函數(shù)響應(yīng)：

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

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

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

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

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

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

{  "usingComponents": {}}

接下來(lái)還需要一個(gè)點(diǎn)，就是在app.json中配置對(duì)應(yīng)的文件目錄：

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

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

二、開始游戲頁(yè)面隨機(jī)值生成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

此時(shí)去 game.js 中編寫這兩個(gè)事件，首先查看 getNumber：

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

此時(shí)響應(yīng)頁(yè)面中按鈕失去焦點(diǎn)后，將會(huì)有一個(gè)值傳遞到該函數(shù)中，這個(gè)值包含在 e參數(shù)中，使用 e.detail.value 即可獲取到傳入 input 中輸入的值。此時(shí)使用 setData 設(shè)置當(dāng)前值中的猜測(cè)值 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+" 對(duì)了！";        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; 定義一個(gè)局部變量x，賦值為猜測(cè)的值x，方便之后的計(jì)算。
接著判斷猜測(cè)之是否大于100或者小于0，因?yàn)檫@兩者是范圍之外不再進(jìn)行判斷，所以最開始使用 if進(jìn)行判斷：

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

以上代碼中 wx.showToast 表示調(diào)用微信小程序接口彈出提示，傳入的參數(shù) title 為提示內(nèi)容。

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

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

創(chuàng)建兩個(gè)變量，一個(gè)是 count記錄猜測(cè)次數(shù)，另外一個(gè) tip 為提示當(dāng)前是對(duì)是錯(cuò)。

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

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

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

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

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

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

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

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

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

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

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

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

此時(shí)完美解決：

還剩一個(gè)規(guī)則頁(yè)過(guò)于簡(jiǎn)單，大家就自己搞定了。

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

game.wxml

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