taro小程序开发、h5前端开发有什么不一样呢？

接触了小程序大概半年的时间，今天来浅浅的总结一下和react开发的异同点，首先登场的是相似的地方：

适配问题

• 对于带有border的高度尽可能的使用padding去撑开，而不是直接写死当前view的高度，因为对于不同手机对像素的解释不一样，会导致border只有一半。
• 对于绝对布局尽可能小像素处理，比如left:300px，我们需要尽可能的让这个值变小并且尽可能的取0（原因同上，不同手机对像素解释不同，写的像素值越大就越有可能导致视觉效果的偏差）。
• 大View包裹小View的时候，中间又间距的时候要避免使用高度和padding、margin去处理，尽量使用flex去做居中处理。
• 对于服务端返回的带有宽高的图片（比如大图、背景图），在实际展示过程中，要去计算图片的宽高比，从而减少图片在页面上被拉伸的可能性。

接下来就是不同点了：

生命周期

1. 在小程序开发中除了基本的react生命周期函数constructor、componentDidMount、componentWillUnmount、shouldComponentUpdate、componentDidUpdate等，还有componentDidShow、componentDidHide 等生命周期函数
2. hooks中除了使用了React Hooks的常用hooks方法，还有一些经常用到的useRouter 、useReady、useDidShow、useDidHide等生命周期相关的钩子，还有一些常用交互相关钩子例如usePullDownRefresh、useReachBottom、usePageScroll、useResize、useShareAppMessage、useTabItemTap等

小程序预加载机制（跳转预加载）

• Taro.preload是小程序中用到的跳转预加载的API，在Trao中使用Taro.navigateTo方法跳转页面，到小程序页面触发onLoad的时候会有一些延迟，如果想解决这个问题可以把一些网络请求提前到发起跳转的前一刻去请求。
• Taro中提供了Taro.preload API，可以把需要预加载的内容作为参数传入，然后在新页面加载后通过Taro.getCurrentInstance().preloadData获取到预加载的内容。
• 主要使用场景：在电商小程序的商品详情页面，这个页面的接口返回数据一般比较复杂，可以在条赚钱就调用Taro.preload方法预加载商品详情的接口，在详情页监听到有预加载请求时就可以直接减少页面请求的时间去直接处理数据并展示商品内容，从而减少页面的加载时间，提高用户体验。

事件机制

• 在小程序的开发中，当时用滑动蒙层、弹窗等覆盖式的元素时，滑动事件会冒泡到页面上，是页面元素也会跟着一起滑动，通常情况下我们会通过catchTouchMove去阻止冒泡。但是由于Taro3事件机制的限制，小程序事件都是以bind的形式进行绑定的，所以和Taro1,Taro2不同，调用e.stopPropagation()并不能阻止滚动穿透。

lazyload

• 在电商的项目中进行列表加载的时候，通常会有很多的图片展示，这个时候肯定会用到懒加载lazyload，在Taro小程序中图片Image自身就有lazyload属性，加上之后就会有懒加载的效果。

JSX渲染问题

1. Taro不支持render中使用函数进行多条件渲染

// 错误用法
matchResult = () => {
  const { isShow, isHave } = this.state;
  let content = null; // 初始化时，必须赋值，否则小程序报错undefined
  if (isShow && isHave) {
    content = (
      <view>全员通过</view>
    )
  } else if (!isShow && isHave) {
    content = (
      <view>一组通过，二组淘汰</view>
    )
  } else {
    content = (
      <view>平局</view>
    )
  }
  return content;
}
  
render () {
  return (
    <view>
      {this.matchResult()}
    </view>
  )
}

// 正确用法
render () {
  const { isShow, isHave } = this.state;
  let content = null;
  if (isShow && isHave) {
    content = (
      <view>全员通过</view>
    )
  } else if (!isShow && isHave) {
    content = (
      <view>一组通过，二组淘汰</view>
    )
  } else {
    content = (
      <view>平局</view>
    )
  }
  return (
    <view>
      {content}
    </view>
  )
}

2. 组件内部的渲染jsx必须以render开头，比如说：renderTitle
3. 不能对props.children进行任何的操作

对于2、3的具体原因可参考其他小伙伴的解释 lequ7.com/taro-cai-ke…

小程序开发过程中重点需要关注包大小问题

> 小程序严格要求主包大小不能超过2M 总包大小不能超过8M 。由于电商小程序迭代时间也很长，内容比较丰富，所以包大小问题经常会被困扰。

目前解决的方案：

1. 资源文件都放线上cdn 不放在本地，必须在本地资源文件存储的要经过压缩（目前应该只有底部tab要求图片必须放在本地，新版本API 说是要支持线上了，目前使用版本2.7还不支持）

2. 分包:主包下只有tab 页面 其他放在分包 ，需要注意的规范是分包相关组件要放到分包下，直接放在src 下的component下  会打到主包 增加主包的大小（这个整体和优化曾经把小程序大小降低20%左右），这个也是开发过程需要注重的一个代码规范。