$cover

Taro多端开发沉淀

编程时要考虑代码在不同的端是否兼容，开发时请定时编译到各个平台，保持代码的多端能力！

跨端千万条，兼容第一条， 代码不兼容，同事两行泪。

小程序API

获取用户信息

最佳实践：

  1. 调用 wx.login 获取 code，然后从微信后端换取到 session_key，用于解密 getUserInfo返回的敏感数据。

  2. 使用 wx.getSetting 获取用户的授权情况，success回调中返回res.authSetting[scope.userInfo]即为用户授权情况。

  3. 如果用户已经授权，直接调用 API wx.getUserInfo 获取用户最新的信息；

  4. 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。使用Button组件，openType属性设置为getUserInfo，从onGetUserInfo回调中获取用户信息。

  5. 获取到用户数据后可以进行展示或者发送给自己的后端。

onPullDownRefresh

监听用户下拉刷新事件，需要在全局配置的 window 选项中或页面配置中开启 enablePullDownRefresh，仅在小程序端有效：

   config: Taro.Config = {  
      navigationBarTitleText: '首页',  
      enablePullDownRefresh: true  
   }

可以通过 Taro.startPullDownRefresh 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，Taro.stopPullDownRefresh 可以停止当前页面的下拉刷新。
下拉刷新的loading样式，三个点默认是白色的，在白色背景下会看不见。可以在页面里修改页面的背景颜色，或者设置backgroundTextStyle属性：

config: Taro.Config = {  backgroundTextStyle: "dark"  }

Web-view

  • navigationStyle: 'custom'对于webview页面不起作用。
  • 页面内可通过userAgent判断是否为小程序环境，微信小程序的UA包含miniProgram，头条小程序的UA包含toutiaomicroapp ## 小程序与WEB端差异 - 小程序端没有window，document，process等对象 - 小程序原生有onPullDownRefresh，onReachBottom等页面函数，Web端没有，需要手动实现上拉加载和下拉刷新。 - 需要取消冒泡的时候，要把e.stopPropagation()写到JSX绑定事件处，否则Taro不会将事件绑定指令编译成catchTap。
  // JSX 
  // correct
  <view onClick={
    e.stopPropagation()
    doSomething()
    }}
  />
  // wrong
  <view onClick={doSomething(e)} />
  doSomething(e) {
    e.stopPropagation()
  }

样式

ScrollView组件内不能直接使用Flex布局，可能不会按照预料的情况排列。