微信小程序的简单总结

前言

最近学习小程序的开发，基于小程序的原生架构，写了个小demo，基本的控件使用与网络请求，页面跳转有涉及到。算是有了个初步的入门。所以有了这篇总结，一方面是做下笔记，另一方面是给大家做下分享

项目结构

如下图所示，基于微信的工程结构，我的理解是pages每个目录的子目录，都是基于UI维度来管理与维护一个模块的代码。当你创建了一个子目录后，在子目录增加一个page页面时，对应的配置文件（json文件）、视图文件（wxml）、对于该模块的局部样式文件（wxss）会自动生成，另外也会在根目录的app.json的pages属于中，添加新创页面的路由/路径。（这里有个小细节，第一个路径是小程序打开时的第一个页面）

其中一个pages的子目录，是可以放多个page页面的，但不建议这个做！一个模块仅有一个套pages，更能表现模块的独立与方便后期的维护。

控件的使用

控件的使用，主要有两点，第一是UI，这就需要熟悉CSS的语法和基础的用法；第二是事件处理，这个基本很简单，查看文档，看监听事件的属性是那个。属性值写个方法的各称，在js文件声名该方法，添加相关业务逻辑即可。一个控件的使用，一般会处理数据的输入/展示，还有数据的输出，即对某个数据的操作，然后有个结果值。所以一个在page对应的js的data数据区会有定义一个变量来存在操作的数据，然后控件在用户的操作后，会有一个结果输出。对于picker控件，首先需要有显示的数据集，然后有一个当前选中的索引。在控件的选择按钮事件，我们来更改当前选中的索引值。如下是picker选择器的示例。

weui的使用

我一般是下载到本地，放到本地一个目录下边，在app.wxss中import进去

网络API的使用

最好是做下二次封闭，使用promise，如下是个简单的示例

const getToken = (appId, uid) => new Promise((resolve, reject) => {
  wx.request({
    url: `${autherServer}${autherPath}?uid=${uid}&appid=${appId}`,
    header: {
      'content-type': 'application/json;charset=utf-8'
    },
    method: 'GET',
    success({ data, statusCode }) {
      util.log(TAG, `获取token的返回, data = ${data}, statusCode = ${statusCode}`)
      if (statusCode === 200) {
        resolve(data)
      } else {
        reject(data)
      }
    },
    fail(error) {
      util.log(TAG, `获取token失败, error = ${error}`)
      reject(error)
    }
  })
})

一些小技巧

不校验请求域名

在微信开发者工具中，开发者可以临时开启“开发环境不校验请求域名、TLS版本及HTTPS证书”，跳过服务器域名的校验，这样，在微信开发者工具中及手机开启调试模式时，不会校验服务器域名。方便开发与测试

使用求值表达来组成字符串

如下示例

      util.log(TAG, `createRoom, new region = ${region}, roomId = ${roomId}`)

页面跳转

 wx.navigateTo({
      url: '../roommember/roommember' //目录页面路由，注意不需要文件名后缀
    })

页面标题栏的更改

在当页面对应的js配置文件添加navigationBarTitleText以及配置其值

格式化代码

mac下，command + A, Shift + alt + F，来格式化代码，保持代码风格的统一，以及减少多余的无用的空格等