微信小程序开发总结

[Hancoson]

微信小程序出来也有一段时间了，之前也陆续做过demo练练手，毕竟自己的demo还是比较简单的，如今参与公司的项目也是一路踩坑而来。

认识小程序

语言及开发工具

首先，小程序类Web，但不同于我所认识的HTML，他有属于自己的开发语言及工具：

• JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通过 Node.js 相关接口访问操作系统 API。
• WXML: 作为微信小程序的展示层，并不是使用 Html，而是自己发明的基于 XML 语法。
• WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。”
• 小程序开发工具，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

入口文件

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

• app.js 这个文件是整个小程序的入口文件，我们主要做了网络检测、用户信息获取等；当让也可以注入公用的方法在其他页面中去通过getApp()调用（注：页面中调用app.js中的方法时不需要通过require或者import引入）
• app.json 这个文件可以对小程序进行全局配置，决定页面文件的路径、整体窗口表现、设置网络超时时间、设置多tab等.
• app.wxss 是小程序的公共样式表

项目开发

本次项目只负责了首页、授权和一些公共模块的开发，接下来就着重从这些模块展开。

生命周期

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

Page({
/**
* 页面的初始数据
*/
data: {},

/**
* 生命周期函数--监听页面加载（像首页数据请求可以放在这里）
*/
onLoad: function (options) {},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},

/**
* 页面相关事件处理函数--监听用户下拉动作（这里添加了下拉刷新的功能）
*/
onPullDownRefresh: function () {},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})

当我们在data中初始化的值需要修改时，可在各生命周期及方法中通过setData()修改。由于小程序的入口页面就是首页，在首页添加了用户登陆和网络状态的检测在onLoad中。

tabBar

tabBar即小程序的底部导航栏，由于微信的限制，最少2个最多5个导航栏，只可设置文案、图标。

样式

小程序样式采用WXSS语言（具有CSS大部分特性）。他也提供了一种新的单位rpx（可根据屏幕宽度自行适应）。官方规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素，既然这样我们也推荐了我们设计师采用iPhone6作为设计标准，即750px宽度。

但是在实际的开发过程中如果字体大小也使用rpx做单位的话，在iPhone6 Puls上显示文字过大，影响美观。后经过测试采用了px做单位，即原设计稿尺寸的一半+px，这样可以保证文字大小在各设备中保持一致。

网络状态

在官方文档上有明确规定，本地资源是无法通过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)
    }
  });
})

调试

调试的时候最大的问题呢是：无论是开发者工具上还是手机上，记得先把缓存删干净再测。特别是开发者工具每次切换host都要清理缓存，再重新打开，而且出现bug的时候尽量多测几次，进行反复确定。不然的话，你可能会发现，本来测好的功能又出现问题了，或者是本来有问题的部分又没有问题了。

开发者工具

开发者工具调试界面和Chorem浏览的开发者工具类似，调试工具分为 7 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace。

真机调试

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

• 必须使用开发者账号微信打开
• 手机需要配置代理（常用charles或fiddler进行代理）
• 在开发者工具中：设置—代理—代理设置—手动设置代理（填写本机ip127.0.0.1，端口号：8888）
• 手机扫码（通过开发者工具预览生成二维码），点击右上角--打开调试手机上调试也可以有类似开发者工具一样的调试体验，可以看到Log、System、WeChat、WXML等，也可以看到页面的性能数据。总体来说还是挺齐全的。

些题外话

虽然 期已经成功发布，但是还有些需要修改个优化的地 ，需要添加及开发的新功能还可能很多，遇到的坑可能也只是冰山一角，有些坑只有去踩过才知道有多深。