一，样式相关 1，避免使用组合选择器 组合选择器在rn中不受支持、在各大小程序中的支持情况程度不同，在使用插槽的机制的微信小程序不支持 2，基本和 rn 一致，原因是rn布局引擎yoga的限制。 在所有端的样式中，h5的兼容性最好，小程序的次之，最差的就是RN了。统一多端即是对齐短板也就是要以RN的约束来管理样式，同时兼顾小程序的限制 二，部分原理差异 1，setState 一定是异步的。官方文档，https://taro-docs.jd.com/taro/docs/state2，事件绑定传参。与 react 不同的是，这里使用 bind 比 箭头函数 性能好。https://taro-docs.jd.com/taro/docs/event3，ref 拿到的感觉并不是组件实例，而是一堆属性的组合。4, this.props.children 无法操作，无法解构。三，条件编译 1，按文件名进行条件编译 假设目录中存在这些文件 |- Input.tsx |- Input.alipay.tsx |- Input.h5.tsx 在引入 Picker 组件时 import Input from ‘./Input’; 会自动引入特定平台的组件。比如，在支付宝小程序编译时，会引入Input.alpay.tsx 文件，在h5项目会引入Input.h5.tsx. 同样样式文件同样适用于这条规则。 2，按指令进行条件编译 %PLATFORM 用来标记当前编译的平台类型,跟 [代码]process.env.TARO_ENV[代码] 取值相同; 制定平台剔除 /* #ifndef %PLATFORM% */ //样式代码 /* #endif * 指定平台保留 /* #ifdef %PLATFORM% */ // 样式代码 /* #endif */

小程序性能优化[图片]启动加载优化在小程序启动时，微信会在背后完成几项工作：下载小程序代码包、加载小程序代码包、初始化小程序首页。 初始化小程序环境是微信环境做的工作,我们只需要控制代码包大小，和通过一些相关的缓存策略控制，和资源控制，逻辑控制，分包加载控制来进行启动加载优化。 勾选开发者工具中， 上传时压缩代码（若采用wepy高级版本，自带压缩，请按官网文档采取点击）精简代码，去掉不必要的WXML结构和未使用的WXSS定义。减少在代码包中直接嵌入的资源文件。（比如全国地区库，微信有自带的，在没必要的时候，勿自用自己的库）及时清理无用的资源（js文件、图片、demo页面等）压缩图片，使用适当的图片格式，减少本地图片数量等如果小程序比较复杂，优化后的代码总量可能仍然比较大，此时可以采用分包加载的方式进行优化，分包加载初始化时只加载首评相关、高频访问的资源，其他的按需加载。提前做异步请求，页面最好在onLoad时异步请求数据，不要在onReady时请求启用缓存数据策略，请求时先展示缓存内容，让页面尽快展示，请求到最新数据之后再刷新避免白屏，使用骨架屏等数据通信优化为了提升数据更新的性能，开发者在执行setData调用时，最好遵循以下原则： 不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用；数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用setData来设置这些数据；与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下。提升数据更新性能方式的代码示例： Page({ onShow: function() { // 不要频繁调用setData this.setData({ a: 1 }) this.setData({ b: 2 }) // 绝大多数时候可优化为 this.setData({ a: 1, b: 2 }) // 不要设置不在界面渲染时使用的数据，并将界面无关的数据放在data外 this.setData({ myData: { a: '这个字符串在WXML中用到了', b: '这个字符串未在WXML中用到，而且它很长…………………………' } }) // 可以优化为 this.setData({ 'myData.a': '这个字符串在WXML中用到了' }) this._myData = { b: '这个字符串未在WXML中用到，而且它很长…………………………' } } }) 事件通信优化视图层会接受用户事件，如点击事件、触摸事件等。当一个用户事件被触发且有相关的事件监听器需要被触发时，视图层会将信息反馈给逻辑层。这个反馈是异步的，会产生延迟，降低延迟的方法有两个： 去掉不必要的事件绑定（WXML中的bind和catch），从而减少通信的数据量和次数；事件绑定时需要传输target和currentTarget的dataset，因而不要在节点的data前缀属性中放置过大的数据。渲染优化页面方法onPageScroll使用， 每次页面滚动都会触发，避免在里面写过于复杂的逻辑 ，特别是一些执行重渲染页面的逻辑在进行视图重渲染的时候，会进行当前节点树与新节点树的比较，去掉不必要设置的数据、减少setData的数据量也有助于提升这一个步骤的性能。