目标：简单猜字游戏，系统随机生成一个数，玩家可以猜8次，8次未猜对，游戏结束；未到8次猜对，游戏结束。
思路和要求：
创建四个页面，"首页"，"开始游戏"，"游戏规则"，"关于我们"。
（1）"首页"：可以点击"开始游戏"、"游戏规则"、"关于我们"，分别跳转到相应页面；
（2）"开始游戏"：初始化以后，随机生成一个数字，玩家可以猜8次，在8次之内猜对，游戏结束，可重新开始；未在8次之内猜对，游戏结束；
（3）"游戏规则"：用文字说明游戏的要求；
（4）"关于我们"：关于游戏开发人员等内容。
注意：创建不使用云服务的js模板的项目。
效果图：
第一步 app.json里面创建了四个页面。
index ------ "首页"
game ------ "开始游戏"
about ------ "关于我们"
rules ------ "游戏规则"
接着对页面进行设计，再进行功能设计。
第二步 对每个界面进行设计以及界面的逻辑
（1）分别自定义每个页面的导航栏的标题
分析：不是全局变量，是局部变量，即分别在页面的json文件自定义导航栏标题。
（2）设置全局样式，为微信小程序页面设置全局样式。
设置全局样式，为微信小程序页面设置全局样式。
（3）"首页"界面设计
效果图：
（4）"游戏规则"页面设计
需要组件：text组件。
效果图如下：
（5）"关于我们"页面进行设计
要求：text组件，主要是为了描述开发者等信息。
效果图：
（6）"开始游戏"页面设计
划分为：三个板块，分别是：部欢迎语句、表单----输入框and提交按钮、提示语句；
关键点：样式+内容
样式如下：
效果如下：
页面逻辑：在js文件里面对游戏初始化：
进入游戏界面，需要随机生成一个数，这个数是正确答案（answer），用户输入框可以输入数字(x)，有8次机会，每提交一次（Count）需要有提示语句(tip)，判断游戏状态（isGameStart），当正确答案与输入的数值相同时，结束游戏。
页面加载后调用初始化函数：
页面逻辑：
当游戏结束后，不能再输入数字，跳转到一个页面可以重新开始游戏，游戏又回到初始化。
解决办法：
使用block组件，可以使代码为一个整体，通过判断游戏是否结束（使用if else），来显示不同的内容。
效果图：
js代码：
// pages/game/game.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 数据初始化
*/
initial:function () {
this.setData({
answer: Math.round(Math.random() * 100), //随机数
count: 0, // 回合数
tip : '', //提示语句
x : -1, //用户猜的数
isGageState : true //游戏状态
}
)
},
/*获取用户输入的数字*/
getNumber(e){
//console.log(e.detail.value)
this.setData({x :e.detail.value})
},
/*开始猜数字*/
guess(){
//获取用户输入的数字
let x = this.data.x;
//console.log(x);
//重置x未获得新数字状态
this.setData({x: -1});
if(x < 0){
wx.showToast({
title: '不能小于0',
});
}else if(x > 100){
wx.showToast({
title: '不能大于100',
});
}else{
//回合数增加1
let count = this.data.count + 1;
//获取当前提示消息
let tip = this.data.tip;
//获取正确答案
let answer = this.data.answer;
//判断是否为正确答案
if(x == answer)
{
tip = tip + '\n第' + count + '回合' + x +'，猜对了！';
this.setData({isGageState : false}); //游戏结束
}else if(x > answer){
tip = tip + '\n第' + count + '回合' + x +'，大了';
}else{
tip = tip + '\n第' + count + '回合' + x +'，小了！';
}
//如果次数为8，游戏结束
if(count == 8){
tip = tip + '\n 游戏结束';
this.setData({isGageState : false}); //游戏结束
}
//每次都需要更新原来的值，提示语句和回合数
this.setData({
tip : tip,
count : count
});
}
},
/* 重新开始
*/
restartGame(){
this.initial();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.initial();
}
})
总结知识点：
1、<view class = "样式"></view>
2、<button type = "类型" form-type = "reset是将所有输入内容置为初始状态" bindtap = "点击按钮的事件">内容<button>
3、设置全局样式，如果全局样式需要在这个页面显示
即：使用view组件：<view class = "container"> <view>
4、<text id = "内容，写样式时，需加#">内容<text>
5、<text id = "内容，写样式时，需加#">{{内容未变量时，要将变量放在两个大括号}}<text>
6、<form>表单里面有按钮，点击后提交内容</form>
7、<input bindinput = "输入框事件，一般未获取输入框里面的内容" type = "类型" placeholder = "输入框未输入显示的内容"></input>
js文件里面的知识点总结：
1、在js文件里面调用函数，格式：this.函数名称（）；
2.js文件初始化，可以写一个初始化函数，使用 this.setData({初始化1,初始化2})；setData函数为其赋值。
3、改变变量的值：this.setData({变量名称: 值})
4、想要获取输入框里面的内容，不知道输入框内容是哪一个变量时，可以使用console.log(e)把事件打印出来，通过输入写代码。
5、获取变量：this.data.变量名称
6、使用轻度提示：
wx.showToast({
title: '需要提示的·内容,
});
第三步 四个界面之间的关系
index.wxml代码：
分别点击"开始游戏"、"游戏规则"、"关于我们"字样跳转到对应页面。
index.js代码如下：
Page({
/**
* 页面的初始数据
*/
data: {
},
goToGame(){
wx.navigateTo(
{
url:'/pages/game/game'
}
)
},
goToRules(){
wx.navigateTo(
{
url:'/pages/rules/rules'
}
)
},
goToAbout(){
wx.navigateTo(
{
url:'/pages/about/about'
}
)
}
})
以上为全部内容，如有不正确的地方，敬请批评指正。