微信小程序开发体验 - 1

记录微信小程序开发遇到的一些特殊tips

小程序开发文档

1. 微信登陆：

一般都是调用微信接口后，拿到code再调用自己服务端的登陆接口传输刚才拿到的code过去，最后由服务端返回用户信息

// 自动调用微信接口登陆
wx.login({
    timeout: 30000,
}).then(res=>{
    return Promise.resolve(res.code)
}).then(code => {
    return myApi.login({code})
}).then(userInfo => {
    // 登陆成功处理
}).catch(err => {
    // 登陆失败处理（这里服务端可配合，自动注册之类的东西）
})

// 手动拉起用户
wx.getUserProfile({
      desc: '用于绑定平台账号', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
}).then(res=>{
    return wx.login({
         timeout: 3000,
    })
}).then({ code } => {
    return myApi.login({ code })
}).then(userInfo => {
    // 登陆成功处理
}).catch(err => {
    // 登陆失败处理（这里服务端可配合，自动注册之类的东西）
})

1. 设置css背景

在微信小程序中CSS无法设置 图片静态资源 为路径的 background-url，只接受 <image> 标签 或者将图片转换成 database64

1. 模块语法

在小程序中，可以同时使用 commonJs 与 ESModule

1. 双向数据绑定实现

小程序没有帮我们实现类似vModel的语法糖，不过根据原理我们可以自己很容易实现

// 模板
<input value="{{ form.someValue }}" bindinput="handleInput" />

Page({
    ...

    handleInput (e) {
        var value = e.detail.value // 当前值
        var pos = e.detail.cursor // 当前光标位置
        this.setData({
           'form.someValue': value
        })

        return {
              value, // 可以过滤值
              cursor: pos - 1 // 还可以控制光标的位置
        }
    }
})

1. Toast 提示问题

wx.showToast(options) 中 options.icon 支持以下值： 'success' | 'error' | 'loading' | 'none'，需要注意的是:

当icon !== 'none' 时，最多都只能显示出七个汉字长度；

当icon === 'none' 时，最多显示两行文本。

故此在使用时需要注意文案的选择

1. 人脸识别调用

人脸识别涉及到用户隐私信息，因此需要申请使用API，在开通小程序后台的接口权限入口后，开发者可以登录mp.weixin.qq.com小程序账号，在设置-接口能力中，开通接口能力。

• wx.checkIsSupportFacialRecognition(opt) 函数，检查当前设备是否支持人脸识别

• wx.startFacialRecognitionVerify(opt) 函数，拉起微信人脸识别组件，进行人脸识别

eg：

wx.checkIsSupportFacialRecognition({
      success() {
        wx.startFacialRecognitionVerify({
            name: '待验证者姓名',
            idCardNumber: '待验证者身份证号',
            success (res) {
                ... // 此时已通过人脸识别认证，可以用res即认证后结果来做其他事了
            },
            fail(){...}
        })
      },
      fail() {
        wx.showToast({
          title: '当前设备不支持人脸识别，请更换设备后重试',
          icon: 'none'
        })
      }
})