# 一、小程序开发框架

Vue-like、React-like 代码，如何在小程序中运行?

# 1.1 基本原理

• 编译时处理（转译成小程序语法）
• 运行时适配（管理生命周期、数据，处理事件等）

编译原理

源代码->词法/语法/语义分析->抽象语法树->转换->目标代码

抽象语法树 AST

# 1.2 小程序框架多端支持情况

# 二、Taro原理

Taro: 多端统一开发框架，支持用 React 的开发方式编写一次代 码，生成能运行在微信小程序、H5、React Native 等的应用

多端能力：提供对应端的runtime、组件、redux、router等实现

• 提供相应端的 Runtime 实现，具备适配 API 的能力
• 提供统一的基础组件，编译时替换为相应端的组件实现

# 三、Taro项目中遇到的坑

# 3.1 一些坑

1、React-like，不完全等同 React

2、端能力差异不可避免：某些功能在相应端上没有支持

3、样式支持、写法上存在差异

4、还没有真正支持多端的 UI 组件库能在 Taro 上使用

5、React Native 的 view 不支持 click 事件，需要用 Touchable 组件

6、React Native 不支持 text-overflow，而是提供原生支持（Text 组件传入 numberOfLines={num} 属性）

Taro 目前没有暴露原生 RN Text 组件的 numberOfLines 属性。因此目前通过 Text 基础组件没法实现多端统一的文本截断

H5情况较为乐观

• 主要差异1: 小程序的页面、组件样式都是独立的，H5会受同名样式影响
• 主要差异2: 小程序的组件多了一层标签

7、多端要求较高

• 对不同端的具体差异有所了解
• 样式实现较为苛刻，需兼顾多端、有所取舍
• 端能力差异可能需要自己填坑

8、多端填坑方式

多端实践经验

• 对多端差异做好封装
• 采用 BEM 命名方式管理样式
• 采用全局样式维护基础组件 @taro/components 的样式
• 基于 @taro/components 自行封装组件库

# 3.2 注意事项

• 函数需要on+函数名来规范命名
• 子组件中接收的props需要定义defaultProps。否则小程序端报错
• 在 Taro 中，JS 代码里必须书写单引号，特别是 JSX 中，如果出现双引号，可能会导致编译错误
• css样式单位写PX大写会转成rem单位
• 根据环境变量引入不同平台组件、编译到对应平台
• 小程序端不支持在render()之外定义jsx。比如在外面renderForm()
• 页面布局：拆分组件方法–由上到下，由左到右拆分
• Taro 目前还没有支持 React.Fragment 语法
• 运行时 报缺少包，需要要在 .rn_temp 目录里面安装
• 文字要包在 Text 组件里面，否则不显示
• position:fixed React Native 不支持
• Animation 和 transform React Native 动画不支持
• 状态更