为了打通生命游戏赛事与线下商家的O2O对接，也为了响应越来越火爆的微信小程序，项目组决定开发一款针对性的微信小程序，方便商家入驻我们平台创建赛事、兑换奖励，进一步推广赛事的玩法和渠道来源。以下是我们作为部门团队第一批拓荒者在开发这款微信小程序过程中遇到的一些坑和总结，分享给大家，欢迎指正交流。

作者：易世良吾 | 腾讯互娱高级开发工程师 本文由微信平台开发，发布于腾讯云+社区

目前【腾讯游戏生活】小程序已经发布，大家可以扫描小程序码进行体验。接下来我主要介绍一下在开发这个小程序过程中的一些思考和积累。

1.1 基本科普介绍

微信小程序是微信公众平台继服务号、订阅号、企业号之后推出的第四类应用，是连接用户与服务的全新方式，可在微信内轻松获取和传播，同时拥有极佳的交互体验和模仿原生应用的实用功能。

我们可以在微信公众平台轻松注册并提交小程序的信息，与微信公众号的注册流程一致。

1.2 配置

用户配置：小程序管理平台提供用户管理功能，支持添加一个管理员。支持根据账号类型、是否认证配置不同数量的开发、测试账号权限。这些配置在小程序开发、内测阶段非常有用，是官方提供的白名单配置功能。

开发配置：和其他微信公众号的开发访问配置类似，需要单独设置开发者ID与密钥、服务器域名配置、开发消息访问地址等信息。可以参考小程序开发文档逐一设置。对于有公众号开发经验的同学来说，上手也比较快。只是要注意这里的域名访问必须是服务域名地址。

2.开发说明 2.1 页面模型

小程序由一个描述整个程序的 app 和多个描述各自页面的 组成，可以看成是一系列页面的组合，这些页面由一个全局的 app 对象调度运行。页面模型是小程序中非常重要的概念，在小程序配置文件 app.json 中也可以看到（如下图）。只有在 app.json 中注册的页面地址才可以被调用并打开展示。小程序展示页面主要分为两种：页面和普通页面。只有页面才会有底部展示。两类页面对应的跳转方法 API 也有所不同：

{ "pages": [ "page/xxx/x1", "page/yyy/y1" ], "window": { "navigationBarTitleText": "test" }, "tabBar": { "list": [{ "pagePath": "page/xxx/xxx", "iconPath": "image/xxx.png", "text": "tab1" }, { "pagePath": "page/yyy/yyy", "iconPath": "image/yyy.png", "text": "tab2" }] }, "networkTimeout": { "request": 10000, "uploadFile": 10000 }, "debug": true }

对于具体的页面模型，它有自己独立的逻辑和数据作用域，主要包括四个组件文件，且它们必须有相同的路径目录和文件名，例如首页对应/page//目录下的.js、.wxml、.wxss、.json文件。

页面的初始化、绘制、交互等逻辑都可以通过页面js中的事件监听、函数调用来响应和处理，和web前端开发类似。不过需要特别注意的是此js开发和web前端js开发的一些区别：

2.2 生命周期

小程序的运行以及各个页面的展示都有各自特定的生命周期，通过一系列声明周期函数进行调度和控制。例如app全局实例的监控函数如、、、等，响应小程序初始化和开发的控制逻辑。对于page页面，有更加丰富的监控和控制函数，实现页面生命周期中更多情况的控制和处理。

函数定义函数功能

生命周期函数--监控页面加载

生命周期函数-监听页面初次渲染的完成

生命周期功能--监控页面展示

生命周期函数--监控页面隐藏

生命周期函数-监控页面卸载

页面相关事件处理函数-监控用户下拉触底动作

页面相关事件处理函数-监控用户上拉、触底动作

下图说明了小程序页面实例的生命周期：

小程序内多个页面之间的切换显示管理，由小程序框架路由与页面栈控制承载，通过路由标签或者导航 API 函数进行页面切换。需要注意的是，如果页面第一次初始化，后台未显示但又未销毁，下次再切换回显示时，不会再触发监听，但会触发监听；每次页面初始化或者显示时都会触发，所以这里有一个小技巧，可以获取并处理一些需要实时更新才能在页面显示的数据。

3. 数据处理 3.1 数据请求

小程序中的网络请求主要通过 wx.()、wx.() 等 API 访问小程序中配置的域名 URL 接口来实现。前者类似 ajax 请求，后者通常用于上传图片文件等。这里请求 API 有一些陷阱需要注意：

为了登录安全，小程序中所有数据请求操作最好都需要验证。这里我们模仿之前H5项目中用到的微信授权验证方式，调用微信登录授权后得到的数据经过加密得到一个，并设置一个过期时间。小程序每次数据请求都需要在后台PHP中附加此参数进行验证，成功则后续请求和返回数据正常进行，失败则通知小程序客户端重新登录授权后再请求数据。验证的核心算法也比较简单，就是判断在有效期内是否满足下面的等式：

登录授权后的初始生成也是利用这个算法的左边公式生成的，返回小程序本地的缓存记录，下次请求可以直接从缓存中取用。

最后对小程序中所有的数据请求进行处理，封装了设置GET/POST请求的逻辑，登录参数的添加与过期处理，请求效果的显示与隐藏控制等逻辑，然后把这些逻辑设置在app全局对象的暴露方法中，方便各个子页面的调用与处理。

由于我们的小程序需要根据用户身份，展示不同状态下的首页，所以需要把用户身份信息的请求放在最前面。这里设计了一个过渡页面，在这个页面进行微信登录、授权，并初始化登录态参数。然后请求用户身份并设置到app全局数据中，并在首页进行相应的判断和展示。