微信小程序Taro + React开发实践

微信小程序Taro + React开发实践

微信小程序原生开发有一套自己的规范和写法，开发体验十分类似Vue，但如果你想减少学习成本，那么Taro框架是一个在此基础上又封装了一层的轮子，从社区热度到开发体验上都十分优秀，支持React/Vue等框架来开发微信/支付宝等小程序，非常值得一试。

初始化

安装@tarojs/cli

$ npm install -g @tarojs/cli

$ yarn global add @tarojs/cli

$ cnpm install -g @tarojs/cli

安装成功可以查看Taro版本信息

npm info @tarojs/cli

初始化项目, 选择一个React mobx模板

taro init taro_project_test

编译

使用npm 命令编译运行，发生了一个小插曲竟然提示Error：Cannot find module ‘autoprefixer’, 怀疑taro cli初始化项目时安装依赖有问题。

那就重新安装一下依赖，再编译即可成功构建

编译配置

config/index.js 是通用配置，包含有一些实用配置：

• projectName: 项目名
• designWidth: 设计稿宽度
• deviceRatio: 设计稿转换规则
  taro中建议使用px和百分比为单位，Taro会进行转换，小程序时则转换为rpx单位。转换规则为designWidth为标准，比如375，则deviceRatio中增加：‘375’: 2 / 1;
  例如我们想在配置中加入alias，
  

项目配置

• 路由：app.config.ts pages 属性
• 分包：subpackages 等等
  当主包超过size限制时，可以分包。通过配置实现（当然小程序的资源等都尽可能放到线上）
  subpackages: [
  {
  “root”: “pages-activities”,
  “pages”: [
  ‘aprilfool/index’
  ]
  }
  ],

开发

• 使用npm命令进入开发模式，支持热更新。

• 支持小程序规范的内置组件如 等

• taro还内置了一些常用组件如Swiper等，代码中引用：import { Swiper, SwiperItem } from ‘@tarojs/components’

• 获取小程序 DOM

  onReady () {
  // onReady 触发后才能获取小程序渲染层的节点
  Taro.createSelectorQuery().select(‘#only’)
  .boundingClientRect()
  .exec(res => console.log(res))
  }

Taro hooks

• useShareAppMessage: 【Breaking】Taro 3.0.3 开始，使用此 Hook 时必须为页面配置 enableShareAppMessage: true。（修改配置文件后请重新编译项目）
• useResize 小程序屏幕旋转时触发。等同于 onResize 页面生命周期钩子。。
• React hooks：useEffect, useState等

路由

• pages配置
• Taro.navigateTo({
  url: ‘/pages/page/path/name’
  })

开发实践

比方说项目中需要开发一个微信获取手机号注册功能，那么我们可以用Button组件的onGetPhoneNumber方法来实现：

<Button type='primary' openType='getPhoneNumber' onGetPhoneNumber={onGetPhoneNumber} style={{ marginTop: 20, background: '#3968cd' }}>微信一键登录</Button>

const onGetPhoneNumber = async (value) => {
  console.log(value, 'onGetPhoneNumber values', 'checked', checked)
  if (!checked) return false;

  const { encryptedData, iv, errMsg } = value?.detail || {};
  if (iv && encryptedData) {
    Taro.reportAnalytics(EVENT_NAME.auth_operation, { // 日志埋点，小程序后台可查看统计数据
      [EVENT_ACTIONS_KEYS.grant_auth]: getUserDateKey() // 日期 + openId
    })
    const result = await api.register(XXXX)

    if (!!result) {
     ...
    }
  } else {
    Taro.reportAnalytics(EVENT_NAME.auth_operation, {
      [EVENT_ACTIONS_KEYS.refuse_auth]: getUserDateKey()
    })
  }
}

微信小程序是依赖token进行识别登录状态的，这里也简单记录一下工作中碰到的小程序项目注册页面开发中的注册登录流程：

开发中踩到的坑

• 和网页不一样，小程序返回上一页时页面是不会重新渲染的
• 需求方希望知道小程序码扫码时带的推荐码有没有配置成功。。。即url中的参数是啥，在开发版开启调试模式再去扫码可以临时开启正式版的调试模式（。。。）