《微信小程序开发入门精要》——第1章，第1.6节开发第一个微信小程序

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第1章，第1.6节开发第一个微信小程序，作者 李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看

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　管理小程序的版本