官方文档 必读

taro 官方文档

注意点

  1. 如果要使用taro-ui，请务必保持设计稿尺寸（designWidth）与taro ui保持一致：750
  2. taro 组件与小程序代码混写taro 官方示例

  3. 自定义组件 class、function 均可。有时需要配置可以使用外部样式

    1. static options = {
    2.  addGlobalClass: true
    3. }
    4. TestComponent.options = {
    5. addGlobalClass: true
    6. }

  4. taro 跨平台开发
    跨平台开发：主要就是根据运行环境加载不同代码 process.env.TARO_ENV

  5. 打包命令配置
    通过 NODE_ENV 参数配置加载文件，主要是请求地址；
    dev开发（watch）时文件不压缩，文件可能回过大，上传会失败，提交测试时使用build命令。

    1. "buildtest:weapp": "cross-env NODE_ENV=development taro build --type weapp"
    2. "build:weapp": "taro build --type weapp"
    3. "dev:weapp": "npm run build:weapp -- --watch",
    1. token 存在的问题：由于没有登录页面，token过期时目前采用的是 relauch 页面的形式，用户会有清晰感知。当前只是把token再页面onShow时重新获取，暂未解决token失效时页面刷新的问题
      token 问题后续更新： token问题后期采用 Promise 与callback 数组结合的方式，将失效请求缓存，调用登录接口成功后再回调，详见 promise 与await

  6. 跳转页面入口问题，推荐采用统一入口，在统一入口中再细分职能，方便后续维护（增加埋点等操作）

  7. request 必须封装、README 操作说明等。

  8. 防止样式冲突，强烈推荐使用css-modules, h5能有效防止样式覆盖
    taro css-modules

    微信小程序相关

    小程序运行机制介绍
    微信小程序架构原理
    微信小程序登录能力调整

    获取用户信息

  9. 获取用户信息必须使用button微信小程序 button 弹出授权

    注意事项

  10. wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，请使用 <button open-type="getUserInfo"/>

  11. 需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明。
    1. // open-type getUserInfo getPhoneNumber
    2. // 授权之后 可以通过api获取用户信息（加密）
    3. // session-key 失效市不能解析正确信息，需重新调用wx.login 到后台更新session-key，之后再重新解密信息
    4. wx.getUserInfo({
    5.  success: function(result) {
    6.    getUserInfo(result)
    7.  }
    8. })

    获取手机号

    在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
    1. <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

填坑总结

image.png
小程序.png