1.6 开发第一个微信小程序
本节将从零开始开发一款微信小程序。该程序是一个猜拳游戏，功能很简单，单击“开始”按钮后，会快速切换“锤子”“剪刀”和“布”，直到按“停止”按钮，会显示“锤子”“剪刀”和“布”中的一个，该游戏可以实现双方或多方猜拳。本节的目的是通过该例子，将开发微信小程序的过程完整讲述一遍，从配置开发环境、建立小程序项目，一直到将微信小程序发布到微信平台，并在真机上测试为止。通过该例子，读者可以掌握微信小程序的开发流程。
1.6.1 配置开发环境
腾讯在推出微信小程序的同时，也推出了自己的开发工具，读者可以到下面的地址中下载该开发工具的最新版本。
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1477656486010
这套开发工具目前支持Windows32位、Windows64位以及Mac OS X系统，读者需要根据自己使用的OS下载合适的版本。本书主要使用Mac OS X版本进行讲解，Windows版本和Mac OS X大同小异，并不影响读者阅读本书的内容。
运行微信小程序IDE后，会看到如图1-7所示的窗口。
▲图1-7 扫描二维码进入IDE
进入手机微信，扫描该二维码（需要管理员微信账号才可以正常登录），就会自动登录，并进入如图1-8所示的窗口。
▲图1-8 微信开发者工具
目前该工具同时支持开发小程序和公众号网页开发，由于本书主要讲解小程序开发，所以读者要选择第一项“本地小程序项目”，进入如图1-9所示的窗口。
▲图1-9 微信小程序IDE建立项目窗口
读者如果第一次使用该IDE，可以单击“添加项目”，新建一个小程序项目，图1-9所示的列表是已经建立的小程序项目。
1.6.2 建立小程序项目
单击“添加项目”后，会看到如图1-10所示的页面。
▲图1-10 新建小程序项目
进入如图1-10所示的新建项目窗口后，如果读者有小程序的AppID，可以直接在AppID中输入。如果没有，单击“无AppID”，也可以开发小程序，只是无法在真机上测试，也无法发布，但可以在本地运行。最后按图1-11所示输入项目名称和项目目录。
▲图1-11 输入小程序工程信息
单击“添加项目”按钮后，会创建新的小程序项目，开发主界面如图1-12所示。下一节我们会在这个项目中开发第一个小程序，并介绍该开发界面的主要组成部分。
▲图1-12 微信小程序开发主界面
1.6.3 猜拳游戏的布局
进入小程序IDE，单击IDE左上角的“编辑”选项（如图1-13所示），开始编辑代码。
猜拳游戏的布局非常简单，如图1-14所示。
▲图1-13 IDE左上角的控制选项
▲图1-14 猜拳游戏的布局样式
猜拳游戏的布局是纵向显示了3个组件：文本组件（text）、图像组件（image）和按钮组件（button）。在创建小程序工程时，默认建立了两个页面：index和logs，如图1-15所示。我们不需要考虑logs，在这个例子中只修改和index页面相关的文件。index是小程序第一个显示的页面。
▲图1-15 index和logs页面的文件结构
其中，index.wxml文件是index页面的布局文件，现在打开该文件，并按下面的内容修改代码。
<!--index.wxml-->
<view class="container">
<text class="finger_guessing">猜拳游戏</text>
<view class="userinfo">
<image class="userinfo-avatar" src="{{imagePath}}" background-size="cover"/>
<button bindtap="guess">{{title}}</button>
</view>
</view>
在这段代码中，image和button组件的内容都需要动态改变，所以image组件的src属性和button组件的文本值（夹在和之间的部分）都分别与一个变量绑定。这是小程序的一个重要特性（和React Native完全相同）。在改变组件的属性值时，并不需要直接获取该组件的实例，而只需将该属性与某个同类型的变量绑定，一旦该变量的值改变，属性值也就会随之改变了。绑定变量的格式是“{{变量名}}”。改变了的定义和初始化部分，在下一节会详细介绍。
我们发现，就算按前面的布局，仍然不能像图1-14所示那样摆放组件，这是因为还需要调整下面代码的样式（index.wxss文件）。
/index.wxss/
.userinfo {
display: flex;
flex-direction: column;
align-items:center;
margin-top: 50px;
}
.userinfo-avatar {
width: 500rpx;
height: 500rpx;
margin: 40rpx;
}
.userinfo-nickname {
color: #aaa;
}
.finger_guessing {
color: #F00;
font-size: 30px;
margin-top: 20px;
}
前面的布局代码主要调整了userinfo-avatar的宽度和高度，让图像显示得更大一些。
最后，还需要修改app.wxss文件的代码，将padding属性的值改成50rpx 0，代码如下：
/app.wxss/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 50rpx 0;
box-sizing: border-box;
}
当然，现在可能仍然无法显示图像，因为还没有设置imagePath变量，而且还没有把图像放到工程目录中。现在读者可以到网上找3张图片，分别是剪子、石头和布，当然，也可以用本例提供的图像，并在小程序工程根目录建立一个images目录，将这3个图像文件放到该目录中。
1.6.4 控制剪子、石头、布的快速切换
猜拳游戏的核心就是快速切换剪子、石头、布3个图像，当单击“停止”按钮后，会停到其中一个图像上。这里涉及到如下两个动作：
用定时器快速切换图像。
当一开始单击图像下方的按钮时，文本变成了“停止”，当再次单击该按钮后，按钮文本又变成了“开始”，也就是说，一个按钮同时负责开始和停止图像快速切换两个动作。
控制图像快速切换和按钮文本变化两个动作的代码都要写在index.js文件中。首先会将这3个图像文件名存储在一个全局的数组中，并使用定时器快速从这个数组中依次循环获取图像文件名，并将该文件名指定的图像显示到image组件中。修改按钮的文本只需要修改title变量即可。
这里涉及到两个主要变量：imagePath和title。这两个都定义在data对象中，单击按钮会执行guess函数（在index.wxml文件中使用bindtap属性指定按钮的单击事件函数名），该函数也需要在index.js中编写。完整的实现代码如下：
//index.js
//获取应用实例
var app = getApp()
// 在数组中存在三个图像文件名
var imagePaths = ['../../images/scissors.png', '../../images/stone.png', '../../images/cloth.png'];
// 当前图像的索引
var imageIndex = 0;
Page({
data: {
imagePath: imagePaths[0], // 用于修改image组件显示图像的变量
title: '开始', // 用于改变按钮文本的变量
isRunning:false, // 该变量为true，表示图像正在快速切换
userInfo: {},
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
// 定时器要执行的函数
change: function (e) {
imageIndex++;
// 当前图像索引大于最大索引时，重新设为第一个索引值（已达到循环显示图像的目的）
if (imageIndex > 2) {
imageIndex = 0;
}
// 修改image组件要显示的图像（改变imagePath变量的值）
this.setData(
{
imagePath: imagePaths[imageIndex]
}
)
},
// 单击按钮要执行的函数——单击要执行的函数按钮
guess: function (e) {
// 获取isRunning变量的值
let isRunning = this.data.isRunning;
// 根据是否正在快速切换图像，决定如何修改按钮文本，以及是开启定时器，还是移除定时器
if (!isRunning) {
this.setData(
{
title: '停止',
isRunning:true
}
);
// 开启定时器（没100毫秒调用一次change函数）
this.timer = setInterval((function () {
this.change()
}).bind(this), 100);
}
else {
this.setData(
{
title: '开始',
isRunning:false
}
);
// 移除定时器
this.timer && clearInterval(this.timer);
}
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
})
}
})
至此，猜拳游戏的代码已全部介绍完毕，现在可以通过左侧的模拟器测试我们的成果了。大家可以单击“开始”按钮，看看图像是否会快速切换，再单击“停止”按钮，看看是否会停止在某个图像上。
1.6.5 真机测试小程序
现在轮到用真机测试我们的成果了。如果只想在真机上测试，可以用管理员微信登录小程序IDE。
现在单击IDE左上角的“项目”选项，右侧会显示如图1-16所示的项目操作页面。
▲图1-16 项目操作页面
单击“预览”按钮，会显示如图1-17所示的二维码窗口，用管理员的微信扫描该二维码，即可将小程序上传到真机上运行。
在真机（Android手机）上的测试结果如图1-18所示。
▲图1-17 扫描二维码上传小程序到真机
▲图1-18 在真机上的测试结果
1.6.6 真机调试小程序
如果在模拟器上开发小程序，很容易在Console中查看调试信息，但如果在真机上运行呢？其实也有办法查看调试信息。现在按着前面讲解步骤在真机上运行小程序，然后单击右上角的省略号（…）菜单，会弹出如图1-19所示的菜单。
单击“打开调试”菜单项，这时当前小程序需要关闭，然后重新进入。这时会看到右下角有一个绿色的“vConsole”按钮，如图1-20所示。
▲图1-20 vConsole按钮
单击“vConsole”按钮，就会打开真机上的Console，并显示调试信息，如图1-21所示。关闭Console，执行同样的操作即可。
▲图1-21 真机上的Console
1.6.7 上传和审核小程序
如果在真机上测试没问题，那么可以单击图1-16所示的“上传”按钮将小程序上传到腾讯的服务器。单击“上传”按钮后，也会显示一个类似图1-17的二维码窗口，用管理员的微信扫描该二维码，然后会显示如图1-22所示的窗口，输入相应的版本号和项目备注，最后单击“上传”按钮上传即可。
▲图1-22 完成最后的上传设置工作
成功上传小程序后，回到小程序的后台，单击左侧的“开发管理”选项，会看到如图1-23所示的3个小程序版本的管理页面。我们直接上传的是开发版本，如果管理员认为没问题，可以单击“提交审核”按钮，将小程序提交给腾讯，这就是审核版本。如果腾讯审核通过正式上线了，这就是线上版本。读者也可以单击“提交审核”按钮右侧的向下箭头按钮，并单击“删除”按钮删除当前开发版本。要注意的是，下一次上传的版本会覆盖当前的开发版本。
▲图1-23 管理小程序的版本