Taro && 微信小程序

Taro && 微信小程序

微信小程序官方的编程风格是基于 Vue 改造的,对于习惯 React 技术栈的 coder 来说,还是很不习惯的。

幸好,京东推出了 Taro,使得 React 也可以编写微信小程序。而且,通过在本小组项目中使用 Taro 重构微信小程序客户端的体验来看,Taro 的体验相当好。

因此,如果你熟悉且热爱 React 技术栈,又需要编写微信小程序,Taro 值得一试。

Taro 介绍

通过Taro 官方文档,Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发各种小程序应用(文档说明支持:微信、京东、百度、支付宝、字节跳动、QQ 小程序、H5)。

本小组因为项目需求,只测试了微信小程序端,体验良好,其他端需读者自行测试。

通过文档介绍,Taro 3.X 版本采用重运行时的架构,使得通过 Taro 可以获得完整的 React/Vue 等框架的开发体验。这也表面,众多的第三方库,可以更好的在 Taro 框架上使用。这一特性,使得 Taro 的编程体验和实用性得到了极大的提升,对于很多特殊的需求,比微信小程序原生开发的体验提升了很多。

快速开始

  1. 安装@tarojs/cli工具
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# 使用yarn安装也可以,但在Windows下,可能会出现安装后无法寻找到环境路径的情况
  1. 创建项目
# 创建taro项目
taro init soul-catcher-taro

# 稍后按需要选择合适项目的选项即可
# 本小组项目开启了TypeScript支持
  1. 初始化项目
# 使用 yarn 安装依赖
$ yarn
  1. 编译项目
# yarn

# 开发时使用,编译出来的包比较大,支持热重载
$ yarn dev:weapp

# 发布时使用,编译出来的包的大小极大的减小
$ yarn build:weapp
  1. 运行项目

打开微信开发者工具,选择Taro项目根目录导入项目,即可预览或者上传项目。

推荐的包

  1. Hox

Hox 是阿里推出的 React 状态管理器,其有如下特性:

  • 只有一个 API,简单高效,几乎无需学习成本

  • 使用 custom Hooks 来定义 model,完美拥抱 React Hooks

  • 完美的 TypeScript 支持

  • 支持多数据源,随用随取

在 soul-catcher-taro 项目中,使用 Hox 管理全局状态。实践效果表明,Hox 在 Taro 中运行正常,体验良好。

  1. Taro-UI

Taro 官方提供的 UI 组件,较为美观,而且有很多专门为移动设备设计组件,极大的简化了 UI 界面的开发难度,提升了界面美观程度和使用体验。

踩坑指南

网络请求

由于各端小程序对于网络请求都有不同的要求,并不能使用标准的浏览器组件发送请求,如微信小程序需要使用wx.request并配置后才能发送网络请求。所以,不能直接使用各类网络请求库,如axiosrequest/umijs,而需要使用Taro.request

如果有需要,可以使用Taro.request自行封装。

Taro.request的异常

Taro.request的异常并不和其他的网络库一样,获取到 Http 异常的状态码(如 400)即抛出异常。但Taro遵循微信小程序的规则,只对网络本身错误抛出异常,对于请求的异常,并不抛出异常。故要自行判断请求状态码并分布处理。

posted @ 2020-11-23 00:04  null小组  阅读(33)  评论(0编辑  收藏