微信小程序开发总结

1. 认识小程序

1.1 语言及开发工具

改写说明

• JavaScript：微信小程序中的 JavaScript 运行环境既不同于浏览器（Browser），也不同于 Node.js。它运行于微信 App 的特定环境中，并不具备操作 Browser context 下 DOM 的能力。
• WXML：作为微信小程序的展示层，并非基于 Html 而是采用了一种基于 XML 语法的独特设计。
• WXSS：用于修饰展示层样式的一种语言；它定义了 WXML 组件的外观和布局机制。
• 小程序开发工具：通过该工具，开发者能够完成小程序功能模块的设计与实现、代码调试与优化以及 preview测试工作。

1.2 入口文件

小程序主要包含以下三个入口文件:

• app.js 是小程序的核心组件, 主要负责网络状态监测和用户行为数据收集等关键功能模块. 此外, 在其他页面可以通过特定方法引用该模块以简化开发流程（注：无需通过require或import引入）.
• app.json 主要负责小程序的整体配置管理. 包括指定各个页面文件的位置（即路径）、整体窗口显示效果以及设置网络超时时间和支持多窗口交互等功能.
• app.wxss 则是小程序的标准样式定义文档.

2. 项目开发

2.1 生命周期

当然,微信小程序和其他前端框架类似也是有生命周期的:

 Page({

    
 /** * 页面的初始数据
    
 */
    
 data: {},
    
  
    
 /** * 生命周期函数--监听页面加载（像首页数据请求可以放在这里）
    
 */
    
 onLoad: function (options) {},
    
  
    
 /** * 生命周期函数--监听页面初次渲染完成
    
 */
    
 onReady: function () {},
    
  
    
 /** * 生命周期函数--监听页面显示
    
 */
    
 onShow: function () {},
    
  
    
 /** * 生命周期函数--监听页面隐藏
    
 */
    
 onHide: function () {},
    
  
    
 /** * 生命周期函数--监听页面卸载
    
 */
    
 onUnload: function () {},
    
  
    
 /** * 页面相关事件处理函数--监听用户下拉动作（这里添加了下拉刷新的功能）
    
 */
    
 onPullDownRefresh: function () {},
    
  
    
 /** * 页面上拉触底事件的处理函数
    
 */
    
 onReachBottom: function () {},
    
  
    
 /** * 用户点击右上角分享
    
 */
    
 onShareAppMessage: function () {}
    
 })

当我们在data中进行初始化设置时，则可以在各个生命周期以及方法中调用setData()函数来实现数据更新的功能。小程序的应用入口即是首页，在首页部分增加了用户登录功能以及网络状态监测，并在onLoad事件处理过程中完成相关初始化设置。

2.1 tabBar

Tailwind可被视为小程序底部导航条的基础框架。受限于微信平台的规定,该类导航条的数量从最低2个到最多5个不等,仅支持文字说明及图标元素。

2.3 样式

小程序样式基于WXSS语言构建（该语言具备大多数CSS特性）。他提供了灵活的自适应解决方案（一种新的单位rpx）。官方定义屏幕宽度的标准值为750rpx。举例来说，在iPhone6上, 屏幕宽度设定为375个物理像素, 总共包含750个物理像素, 因此, 1rpx等于一个半的物化 pixels (即等同于一个 physical pixel)。因此建议我们的设计师参考该设备的尺寸设定, 即设置为 width: 72vw 。

然而，在开发过程中，并非所有情况下都采用rpx作为字体大小单位都会导致不便。通过测试发现, 将字体大小设置为1.5倍的设计稿尺寸加PX更为合适。

2.4 网络状态

在官方文档中已有明确规定, 本地资源不能用CSS获取. 图片也只能采用网络资源或Base64编码方式. 首页存在判断网络状态的需求, 由于断网情况无法获取到任何网络资源, 最终选择了Base64编码的方式.

官方提供的获取网络状态的API采用getNetworkType作为异步接口，并根据其返回结果确定下一步操作（需判断是否处于无网络状态或调用数据列表接口）。至此大家已然清楚应该如何实现——将该操作封装为一个基于Promise的处理流程

 new Promise((resolve, reject) => {

    
   let req = wx.getNetworkType({
    
     success: function (res) {
    
       var networkType = res.networkType;
    
       if (networkType === 'none') {
    
     resolve(false)
    
       } else {
    
     resolve(true)
    
       }
    
     },
    
     fail() {
    
       reject(false)
    
     }
    
   });
    
 })

3. 调试

在调试过程中遇到的最大挑战在于无论是在电脑端还是移动端都需要先清除缓存后才能开始测试工作。特别值得注意的是，在使用开发者工具时每次切换host都需要清除缓存后再重新打开程序这一操作否则可能会导致一些原本测试良好的功能突然出现故障或者原本有问题的部分恢复正常状态因此建议在遇到异常情况时请尽可能多地进行测试并反复确认问题定位

3.1 开发者工具

该类开发界面设计与Chorem浏览器中的开发调试界面相匹配。该软件的调试工具有七项核心功能模块：包括Wxml管理元素显示功能、Console提供交互控制台接口以及Sources支持代码文件管理操作等详细组件设置。

3.2 真机调试

在开发环境下手机调试需要满足以下条件：

设置

--

• 仅限于通过开发者账号开启的微信进行操作
• 配置本地代理（推荐使用charles或fiddler工具）
• 在开发环境中找到【设置

设置