React语法开发微信小程序 Demo

登来
Hello World !
4 人赞同了该文章

前言

从16年微信小程序内测的时候至今，微信小程序用实践证明了自己的创新和价值，微信小程序的规则也在社区的影响下变得更加完善。

但是不得不说，用惯了VSCode，官方的开发工具确实不怎么好用。之前没有接触过小程序开发，这次用了一两个星期的时间，大致熟悉了开发模式和流行的开发框架：Vue规范的uni-app、类Vue规范的wepy、近Vue写法的mpvue、O2实验室遵循React规范的Taro。

因为个人比较熟悉React和TypeScript，最后选择了Taro。不得不说使用框架开发小程序真的太爽了，感谢下Taro的开发者们。他能解决以下几个问题，编辑器、语言、调试、UI：

1. 能使用VSCode编辑器开发，不用去适应小程序的编辑器，配合格式化插件Prettier，能有效控制团队代码规范。以及各种其他插件，各种方便。偷懒是程序员进步的根本动力。
2. React+TypeScript能大大的提高开发效率和降低Bug率。真的是大大的提高，能使用jsx写模版和TypeScript的智能提示。如果你熟悉React的话，能轻松无痛过渡到小程序开发。
3. 调试，还是要吐槽一下原生的开发工具，UI调试的时候真的太难用了：元素选择慢；直接写css没有代码提示；而且无法查看伪元素（after、before）但是css中是可以写的。平时用惯了Chrome DevTools，对这种降低效率的工具有点无法接受。好在Taro可以编译H5和微信小程序，这样可以同时开启微信小程序调试和Chrome DevTools，两端一起预览，虽然会有一些差别，但是能及时发现以做好兼容小程序。
4. UI框架，其他的UI框架没有怎么了解，主要说一些Taro-UI，他包含了大部分交互所需组件。通过覆盖scss，基本上可以只保留交互效果，完全定制属于自己的主题，除了官方说的定制方法，完全可以自己定制到 类名 级别，原理就是选择器优先级覆盖，但是会有一些问题，比如升级UI框架版本的话，可能有影响。同时因为微信组件样式作用域的关系，覆盖代码要放在pages层级。

Demo

Taro 框架(v1.2.17)，React+TypeScript 语法，Mobx 管理数据，Taro UI 框架。

Mobx 管理数据，这是 React 流行的数据管理方案之一，简单、可扩展的状态管理。需要注意是Taro使用的是 Mobx 4 版本，在对象动态写入等地方有些坑。
同时项目使用 TypeScript 。可能大部分前端开发人员没有接触过强类型语言，自从我使用之后就放不下了，也一直在团队中安利。TypeScript 的学习难度不算太高，但是收获绝对很值。

Taro 框架支持TypeScript，所以在调用wx的api的时候会有类型提示，接口规范也基本支持Promise方式。可能社区用TypeScript+Mobx开发的还是比较少，所以有一些框架上的问题，项目过程中也提了几个issue和PR。将demo分享出来也是希望更多的人在选择的时候有个参考，同时也能对社区有些贡献。

leidenglai/weapp-taro-typescript​github.com

目录结构

— config/  // 构建配置，Taro默认生成
— dist/ // 小程序构建缓存和输出目录
— src/            // 项目文件
    assets/ // 所有资源文件 如图片、字体、样式文件
    components/// 组件目录
    interface/// 公共接口
    libs // 手动导入的库，此目录不会进行代码检查和压缩编译
    pages/ // 项目页面目录，对应微信小程序的pages		
    services/// 与后端交互的接口请求文件
    stores/  // mobx数据管理
    utils/  // 一些中间件、插件方法等
    app.scss// 项目的配置
    app.tsx// 应用入口
- .eslintrc.json  // eslint配置
- .stylelintrc.json  // stylelint配置
- tsconfig.json   // ts语言的配置
— package.json  // 项目描述文件
— README.md     // 项目文档
- project.config.json // 小程序配置文件

Taro 框架

Taro 介绍 · Taro

Taro是一套遵循React语法规范的多端开发解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用Taro，我们可以只书写一套代码，再通过Taro的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码。

开发环境

进入项目根目录，安装依赖包：

## 安装依赖包
yarn

## 小程序调试模式
yarn dev:weapp

## h5
yarn dev:h5

开发时可以先在 h5 模式下完成大部分业务逻辑和 UI 调试，然后同时开启小程序和 H5 模式，对照查看效果，调试页面。

构建发布和问题多看看Taro官方文档，有问题上github看看issue。

注意事项

1. Taro只是React语法糖，并不是真正的React框架

Taro 的生命周期/路由 和setState在小程序端其实是包装成 React API 的一层语法糖，我们把这层包装称之为 Taro 运行时框架。几乎所有 Taro 提供的 API 和语法糖最终都是通过小程序本身提供的 API 实现的。

2. 开发之前一定要多看几遍Taro官方文档的注意事项和进阶指南

3. Taro官方对Mobx的引入的例子漏了一点。其实多页面的应用，只需在入口文件的render函数导入全部store即可，不需要引入Page组件。这样在全局所有页面中都可以注入store。

const store = {
  commonStore: new CommonStore(),
  userStore: new UserStore()
}

class App extends Component {
  // ...

  render () {
    return <Provider store={store} />
  }
}

4. （自1.3.6后已支持）框架使用的是React语法糖，所有关于组件的props，使用的是小程序的Component构造器properties属性，但是properties是Object类型，所以组件的props不能是Mobx的Observable，否则会被转化为普通的对象或者值。解决方法是传入关键信息如key字段，然后在子组件中注入Store，获取Observable数据。

资源

• 项目配置 解释 package.json 文件 — JavaScript 标准参考教程（alpha）
• Taro 中文文档：Taro 介绍 · Taro
  Taro UI：Taro UI | O2Team
• React 官方中文文档：React 是一个用于构建用户界面的 JavaScript 库
• Mobx 中文文档：MobX 介绍 · MobX 中文文档
• TypeScript 中文文档：文档简介 · TypeScript中文网 · TypeScript——JavaScript的超集
• Lodash.js 中文文档： https://www.html.cn/doc/lodash/
• scss：Sass 参考手册 | Sass 中文文档