Taro&&小程序实际使用

Taro&&小程序

Taro介绍

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

环境搭建

Taro 3.x官方文档
按照官方文档去做项目的搭建就好了
需要注意的是使用公司的源可能会报错导致搭建失败

使用 npm 安装 CLI

$ npm install -g @tarojs/cli

使用命令创建模板项目

$ taro init myApp

安装依赖

$ npm install

项目结构

├── dist                   编译结果目录
├── config                  配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

前置知识

原生小程序开发经验；
React基础；
TypeScript基础(如果项目基于TS开发)。
前置知识是需要提前掌握的，否则可能会在开发中遇到很多问题，事倍功半。

Taro对比原生小程序

一些常见的使用场景

生命周期对比

原生小程序

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  }
})

Taro class组件

export default class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "This is page data.",
    };
  }

  // 对应onLoad方法，官方建议用constructor或componentDidMount(订阅、副作用时)替换，
  // 该钩子在React中已废弃
  componentWillMount() {}
  // 对应onShow方法
  componentDidShow() {}
  // 对应onReady方法
  componentDidMount() {}
  // 对应onHide方法
  componentDidHide() {}
  // 对应onUnload方法
  componentWillUnmount() {}
  // 组件更新前执行(接收到新的props或state时)，首次渲染不触发，
  // 不能在这里setState，该钩子在React中已废弃
  componentWillUpdate(prevProps, prevState) {}
  // 接收到新的props时执行，推荐使用componentDidUpdate替换，该钩子在React中已废弃
  componentWillReceiveProps(nextProps) {}
  // 组件更新后执行
  componentDidUpdate(prevProps, prevState) {
    // 经常会在这里通过判断新旧数据的变化来做一些操作，比如
    // if (prevProps.sessionId !== this.props.sessionId) {
    // 已经登录了
    // }
  }
  // 子组件是否需要重现渲染
  shouldComponentUpdate(nextProps, nextState) {}
  // onPullDownRefresh、onReachBottom、onShareAppMessage...与原生小程序一致
}

在React中已废弃的生命周期componentWillMount、componentWillUpdate、componentWillReceiveProps不建议使用。

路由跳转

1. switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
2. reLaunch 关闭所有页面，打开应用内某个页面
3. redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
4. navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
5. navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

微信的授权–手机号、用户信息

1. 授权个人信息使用 getUserProfile 代替 getUserInfo,后者已经被废弃

2. 获取手机号码使用getPhoneNumber,具体用法见src/components/sign

3. 以上都需要绑定在button上通过点击触发

遇到的一些问题&&坑

1.taro-ui

项目中使用了taro-ui,但是引入的时候却不生效
需要注意taro的版本，如果是3.0需要使用next版本的Taro-ui

2.关注组件

在小程序的管理后台可以配置公众号关注组件

<OfficialAccount onLoad='success' onError='failed'></OfficialAccount>

项目中加入这个组件就可以在对应的位置展示出来

3.获取手机号

因为业务需要，必须获取到用户的手机号码

export default class login extends Component {

    getPhoneNumber(event) {
 
    }
 
    render() {
        return (
            <Button  openType='getPhoneNumber' onGetPhoneNumber="this.onGetPhoneNumberHandler.bind(this)">获取手机号</Button>
        )
    }
}

Taro 的使用和小程序略有不同，在小程序的官方文档是

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

绑定的回调方法是不太一样的需要注意，
还需要注意的一点是拿到的加密信息要先encode一下再传给服务端进行交互

4 自定义头部导航栏和底部tabbar

tabbar的 图片大小无法调整

导航栏的按机型获取高度

5 小程序真机调试报错

1. taro getphonenumber 回调onGetPhoneNumber
   获取到的加密串需要先encode
2. 真机调试报错MiniProgramError U.createEvent is function
   1. 是不是在调用 showLoading 之前调了 hideLoading
   2. 所有的 promise 都需要 catch 一下
3. 没有在app.json里面申明这个页面
4. 使用canvas2d并使用了.exec获取节点信息
5. navigationTo会保留当前页，当保留页数超过上线了就会报错
6. 请求地址请求不到 开始请求的是localhost。所以在开发工具里可以 在真机里需要将请求的那个地址内网穿透一下，或者放真服务器里