Taro原理总结

来自掘金小册笔记

# 一、Taro 的安装与使用

# 1.1 安装

$ npm install -g @tarojs/cli

taro -V

# 1.2 使用

使用命令创建模板项目

$ taro init myApp

# 1.2.1 微信小程序

选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览

微信小程序编译预览及打包

# npm script
$ npm run dev:weapp
$ npm run build:weapp

# 1.2.2 百度小程序

选择百度小程序模式，需要自行下载并打开百度开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览

百度小程序编译预览及打包

# npm script
$ npm run dev:swan
$ npm run build:swan

# 1.2.3 支付宝小程序

选择支付宝小程序模式，需要自行下载并打开

• 一、Taro 的安装与使用
  • 1.1 安装
  • 1.2 使用
    • 1.2.1 微信小程序
    • 1.2.2 百度小程序
    • 1.2.3 支付宝小程序
    • 1.2.4 H5
    • 1.2.5 React Native
  • 1.3 更新 Taro
• 二、Taro 开发说明与注意事项
  • 2.1 微信小程序开发工具的配置
  • 2.2 Taro 与 React 的差异
    • 2.2.1 暂不支持在 render() 之外的方法定义 JSX
    • 2.2.2 不能在包含 JSX 元素的 map 循环中使用 if 表达式
    • 2.2.3 不能使用 Array.map 之外的方法操作 JSX 数组
    • 2.2.4 不能在 JSX 参数中使用匿名函数
    • 2.2.5 不能在 JSX 参数中使用对象展开符
    • 2.2.6 不允许在 JSX 参数（props）中传入 JSX 元素
    • 2.2.7 不支持无状态组件（Stateless Component)
  • 2.3 命名规范
  • 2.4 推荐安装 ESLint 编辑器插件
  • 2.5 最佳编码方式
• 三、Taro 设计思想及架构
  • 3.1 抹平多端差异
• 四、CLI 原理及不同端的运行机制
  • 4.1 taro-cli 包
    • 4.1.1 Taro 命令
    • 4.1.2 包管理与发布
    • 4.1.3 taro-cli 包的目录结构如下
  • 4.2 用到的核心库
  • 4.3 Taro Init
    • 4.3.1 命令关联与参数解析
    • 4.3.2 参数解析及与用户交互
    • 4.3.3 模版文件操作
  • 4.4 Taro Build
    • 4.4.1 编译工作流与抽象语法树（AST）
    • 4.4.2 Babel 模块
    • 4.4.3 解析页面 Config 配置
• 五、Taro 组件库及 API 的设计与适配
  • 5.1 多端差异
    • 5.1.1 组件差异
    • 5.1.2 API 差异
  • 5.2 多端适配
    • 5.2.1 样式处理
    • 5.2.2 组件封装
• 六、JSX 转换微信小程序模板的实现
  • 6.1 代码的本质
  • 6.2 Babel
  • 6.3 实践例子
    • 6.3.1 设计思路
    • 6.3.2 WXML 和 JSX
• 七、小程序运行时
  • 7.1 注册程序、页面以及自定义组件
  • 7.2 组件 state 转换
  • 7.3 将组件的生命周期对应到小程序组件的生命周期
  • 7.4 事件处理函数对应
  • 7.5 对 API 进行 Promise 化的处理
• 八、H5 运行时
  • 8.1 H5 运行时解析
    • 8.1.1 组件实现
  • 8.2 API 适配
  • 8.3 路由
  • 8.4 Redux 处理
• 九、更多参考

← Nginx中常用的模块整理docker结合pm2部署node项目 →