开发微信小程序那些小事

腾讯的官方文档依然是历史的风格，一些报错信息也依然非常的有意思（提示信息相当不友好），以致于无法直接通过学习官方文档的方法来顺利完成开发。

现将一些基本的步骤记录如下：

测试账号

拥有一个测试账号将有助于我们快速的开发各种功能:

微信小程序测试账号申请：
https://developers.weixin.qq.com/sandbox

需要注意的是微信这玩意有个特别大的坑，如果我们由官方的文档中点击进入的话，如果我们恰恰也申请了公众号的测试账号，就会掉到这个坑当中。

申请 -> 扫码 -> 提示我们已经有了测试号 -> 点击进行公众号 -> 然后发现我们有的是测试公众号而非测试小程序。

此时需要注意的是，使用手机微信选择登录的账号时，应该选择申请的测试小程序序，而不能使用默认账号。因为默认账号仅是一个公众号，它可能没有小程序的功能。

微信小程序注册
https://mp.weixin.qq.com/wxopen/waregister?action=step1

对typescript支持

官方支持了typescript，看到这点时感觉非常的好。但是，一使用就不淡定了。官方并没有给出自动编译的demo，这对刚入门typescript又比较喜欢它的小伙伴而言是不可接受的。

在此给出一段自己用着还行的代码：

npm install --save-dev node-watch

然后在根目录下创建以下yunzhi.js

// 创建一个子进程
const exec = require('child_process').exec;
// 调用 node-watch 监听模块
const watch = require('node-watch');

// 运行一次编译
exec('npm run compile');

// 监听相关文件、文件夹，有变化则重新运行编译
watch(['src/app.ts', 👈
    'src/types.ts', 👈
    'src/utils', 👈
    'src/pages', 👈
    'src/service', 👈
    'src/components' 👈], { recursive: true }, function(evt, name) {
    if (name.split('.').pop() === 'ts') {
        console.log('监听到TypeScript文件改动，重新编译中...');
        exec('npm run compile');
    }
});

console.log('云智TypeScript自动编译脚本已成功运行...');

注意这的内容，换成你当前目录中有的。如果在项目中新增了文件夹，也注意来维护一下这个列表。

最后执行node yunzhi.js，便可以在文件发生变更时，自动的将ts构建为js文件了。

与后台交互

即使使用了测试账号，也是不能够随意与任意后台进行交互的。此时，我们可以到微信小程序测试账号中找到相关的请求后台配置，也可以在微信开发者工具中找到配置中的 本地，点击：不校验请求域名

第三方库

如果不是特别有必要，不建议使用第三方库。如果我们使用了第三方库，最好能够使用精减型的，比如我们使用什么就加入什么，也不是全局引入。这主要是由于微信小程序的大小限制决定的。

虽然我们可以在微信小程序中的根目录中找到package.json，但你绝对相不到它是不可以被直接引用的。如果你直接引用的话，微信小程序则会无情的发出错误。

正确的姿势参考：在微信小程序中引入rxjs

mock数据

微信开发者工具提供了模拟返回数据的功能：Mock，启用后添加规则即可：

但我还是希望能在官方文档中找到单元测试某个页面或是组件的单元测试方法。

http请求

微信提供了wx.request(options)用于发起http请求。options有两个字段，分别代码请求成功后的回调以及请求失败后的回调：

        fail: (value) => {
          // 失败
        },
        success: (value) => {
          // 成功
        },        

但要注意的是：这里的失败仅当请求的地址无响应时，才会执行。如果你习惯了把一些非2XX 的状态码做为执行失败的条件，则还需要手动的进行处理。

        success: (value) => {
          const code = value.statusCode;
          if (code >= 400) {
            // 这才是执行失败
          } else {
            // 而这才是执行成功
          }
        },

模板语法

官方文档地址：https://developers.weixin.qq....

绑定方法

绑定点击事件，不是click，而是bindtap:

        <view class="page__desc">
            <button class="weui-btn_primary" bindtap="onRefreshButtonClick">立即刷新{{leftRefreshSeconds}}</button>
        </view>

组件定义属性

为组件定义properties，格式一定要是{type: xxx, value: xxx}

  properties: {
    a: {
      type: String,
      value: ''
    }
  },

否则会报 VM2135 WAService.js:2 TypeError: Cannot read property 'name' of undefined的错误.

属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。

多数情况下，属性最好指定一个确切的类型。这样，在 WXML 中以字面量指定属性值时，值可以获得一个确切的类型，如：

引入js

默认情况下，我们在ts是没有办法没有类型声明的js库。但有些时候某个js库就是没有 TS 的版本，这时候可以这样：

1. 修正tsconfig.json

    /**关闭在引入一些声明为any的类型时的报错检查*/
    "noImplicitAny": false,

   关键对类型为any的校验。

2. 使用require来引入js库，比如：

   const echarts:any = require('./../ec-canvas/echarts');

未完，待续