前段时间项目里要开发一个微信小程序，我也是临危受命吧，大概学习了几个小时，然后花了一天写好（功能比较简单所以…）。一般使用一个新东西的时候我都会先大致了解一下文档，然后才开始开发，主要是为了少踩点坑。记录一下自己开发这个小程序的一些经验，说不定以后能用到。

小程序账号

首先，我们需要申请一个小程序账号。有个人账号也有企业账号。我这里是公司申请的企业账号，我之前自己也试过申请个人账号，印象中个人账号还是挺容易申请的。

登录这个账号的管理后台，就可以管理自己的小程序，可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

这个AppID 在开发阶段不是必须的。微信开发者工具可以生成测试号，所以在没有账号的时候，我们还是可以开发的。

微信开发者工具

微信小程序有自己的那一套代码结构（JSON, WXML, WXSS, JS），所以也就有自己的一个开发工具了。下载一个开发工具，然后装上就可以开始开发了。

小程序结构

小程序是前后端分离的，所以小程序基本是一些前端代码组成，虽然小程序有自己的一套前端。但是，具备HTML，JS，CSS的基本使用就能直接入手了。当然，会Vue，Angular等数据驱动的框架就更好了。

在我看来小程序就是由不同的页面组成，然后使用一些路由方法(例如: wx.navigateTo)跳转。每个页面由

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

4个文件构成。这些文件，我们可以直接使用微信开发工具直接生成。

除了页面的文件，还有就是一些公共的配置（例如：app.js，app.json，app.wxss，project.config.json等）

对于我的这次开发也就改了project.config.json里的appid。在app.json里修改了小程序首页路径，标题，标题颜色等配置。在app.js里设置了一些全局变量。

小程序UI

小程序自己本身的一些组件的UI能基本满足我们的需求，但是有时候还是需要一些额外的UI组件。官方也提供了WeUI的小程序版（WeUI有企业微信版的，但是小程序的WeUI没有企业微信版。所以要做出企业微信风格的还是需要我们自己改样式）。我们可以使用WeUI来满足我们的其他需求。由于，官方的文档有些不太清楚的地方。所以，我说一下我是怎么使用的。

  1. 下载WeUI的代码包。

  2. 将代码包解压后，放到小程序的根目录下（与pages目录平级，解压的目录名为weui-miniprogram）。

  3. 在 app.wxss 里面引入 weui.wxss。

    1

    @import './weui-miniprogram/weui-wxss/dist/style/weui.wxss';

  4. 在需要的页面引入组件。例如，我要在index页面使用cell和cells组件。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    {

 "usingComponents": {

  "mp-cells": "../../../weui-miniprogram/cells/cells",

  "mp-cell" : "../../../weui-miniprogram/cell/cell"

 }
}

    mp-cells和mp-cell的路径为WeUI里cells和cell相对于index页面的路径。

  5. 在index页面使用mp-cells和mp-cell标签。

WXS

一开始看文档的时候，我都忽略了这部分。直到我需要在WXML里面处理一些数据。

由于数据驱动的原因，我们使用数据来渲染页面的时候，可能需要做一些处理。例如，我有一些数据的格式不确定，可能是对象可能是数组。在WXML里对数组和对象的处理方式是不一样的，所以我们需要判断一下，但是怎么判断呢？

我们可以在WXML里写一段WXS。

1
2
3
4
5
6
7
8
9

<wxs module="m">
var isArray = function(o) {

 return o.constructor == "Array";

}
module.exports.isArray = isArray;

</wxs>

然后使用

1

wx:if="{{!m.isArray(item)}}"

这样的方式来处理。还有一些像字符串分割等操作也可以用类似的方法。

调试

小程序的前端的效果都可以在模拟器中看到。但是，调后台接口的就稍微麻烦一点。因为小程序调的接口的域名得是小程序账号后台配置的域名。一开始，可能我们的接口还是调的本地的，所以要使用局域网通信来调试。因为不能同本机通信，所以我们可以让手机跟电脑连同一wifi来使用手机调试。

预览

直接点击微信开发者工具的预览，然后用手机扫描后即可在手机上预览效果了，然后可以在手机上打开调试模式。

真机调试

真机调试需要使用小程序的appId，测试号的appId的话，微信开发者工具上就没有真机调试按钮。

Q&A

  1. 为什么调试模式程序正常，关掉调试模式就不行？

    这基本就是，域名设置问题。注意wx.request和wx.uploadFile都要设置域名。

  2. 为什么this.setData不起作用？

    注意this指的是什么，可以在外层使用var that = this，然后使用that.setData来设置数据。

  3. 如何设置域名？

    登录小程序管理后台，开发设置里设置，注意一个月只能改5次。

  4. 怎么发布小程序？

    微信开发者工具，点击上传，然后在管理后台发布。