# 一、小程序开发框架
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目前没有暴露原生RNText组件的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组件里面，否则不显示
