Taro 进阶理解-一一网

根据官方文档花了点时间稍微理了一下大概在项目可以用到知识点，常规的使用可以直接看文档，我这里只是稍微做下tip

taro官方地址：taro-docs.jd.com/taro/docs/R…

配置

taro文档：taro-docs.jd.com/taro/docs/2…

taro可以通过 @tarojs/plugin-mock 来引入mock数据

const config = {
  plugins: [
    // 引入 npm 安装的插件
    '@tarojs/plugin-mock',
    // 引入 npm 安装的插件，并传入插件参数
    ['@tarojs/plugin-mock', {
      mocks: {
        '/api/user/1': {
          name: 'judy',
          desc: 'Mental guy'
        }
      }
    }],
    // 从本地绝对路径引入插件，同样如果需要传入参数也是如上
    '/absulute/path/plugin/filename',
  ]
}
复制代码

样式

taro地址：taro-docs.jd.com/taro/docs/2…

在 Taro 中尺寸单位建议使用px、百分比 %，Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度100px，那么尺寸书写就是100px，当转成微信小程序的时候，尺寸将默认转换为100rpx，当转成 H5 时将默认转换为以rem为单位的值。

如果你希望部分px单位不被转换成rpx或者rem，最简单的做法就是在 px 单位中增加一个大写字母，例如Px或者PX这样，则会被转换插件忽略。

结合过往的开发经验，Taro 默认以750px作为换算尺寸标准，如果设计稿不是以750px为标准，则需要在项目配置config/index.js中进行设置，例如设计稿尺寸是640px，则需要修改项目配置config/index.js中的designWidth配置为640：

const config ={
  projectName:'myProject',
  date:'2018-4-18',
  designWidth:640,
....
}
复制代码

目前 Taro 支持750、640、828三种尺寸设计稿，他们的换算规则如下：

const deviceRatio ={
'640':2.34/2,
'750':1,
'828':1.81/2
}
复制代码

建议使用 Taro 时，设计稿以 iPhone 6750px作为设计尺寸标准。

如果你的设计稿是375，不在以上三种之中，那么你需要把designWidth配置为375，同时在deviceRatio中添加换算规则如下：

{
  designWidth:375,
  deviceRatio:{
'375':1/2,
'640':2.34/2,
'750':1,
'828':1.81/2
}
}
复制代码

在编译时，Taro 会帮你对样式做尺寸转换操作，但是如果是在 JS 中书写了行内样式，那么编译时就无法做替换了，针对这种情况，Taro 提供了 APITaro.pxTransform来做运行时的尺寸转换。

Taro.pxTransform(10)// 小程序：rpx，H5：rem
复制代码

调试

如果要在本地调试线上的问题，可以本地修改配置文件引入线上数据来进行调试

方法一：直接修改引入文件

将config/dev.js 中env的NODE_ENV手动改成 production

方法二：通过cli 的customEnv来进行动态引入响应环境配置

taro地址：taro-docs.jd.com/taro/docs/2…

在pkg文件的scripts中添加

“customEnv:weapp”: “cross-env CUSTOM_ENV=testProduction npm run dev:weapp”,

》这个操作需要引入cross-env包来辅助完成，该包是为了模拟设置NODE环境变量的工具包

然后在config/index.js 中做如下修改

module.exports = function (merge) {
  if (process.env.CUSTOM_ENV === "testProduction") {
    // 利用线上数据进行调试--严格来说只能解决展示问题，禁止从本地进行数据操作
    return merge({}, config, require("./prod"));
}
  if (process.env.NODE_ENV === "development") {
    return merge({}, config, require("./dev"));
  }
  if (process.argv.includes("testEnv")) {
    return merge({}, config, require("./test"));
  }
  return merge({}, config, require("./prod"));
};
复制代码

!–

直接build时也可以编译成线上的资源，然后请求线上的接口，只不过这个模式下就没有–watch ，导致调试不方便

–!

编译

taro编译时才会用到各种压缩代码的包比如uglify.js

性能优化

taro地址：taro-docs.jd.com/taro/docs/2…

预加载

在微信小程序、支付宝小程序和QQ轻应用中，从调用Taro.navigateTo或Taro.redirectTo后，到页面触发 componentWillMount 会有一定延时。因此一些网络请求可以提前到发起跳转前一刻去请求。

Taro 提供了componentWillPreload钩子，它接收页面跳转的参数作为参数。可以把需要预加载的内容通过return返回，然后在页面触发 componentWillMount 后即可通过this.$preloadData获取到预加载的内容。

注意：调用跳转方法时需要使用绝对路径，相对路径不会触发此钩子。

class Index extends Component {
  componentWillMount () {
    console.log('isFetching: ', this.isFetching)
    this.$preloadData
      .then(res => {
        console.log('res: ', res)
        this.isFetching = false
      })
  }

  componentWillPreload (params) {
    return this.fetchData(params.url)
  }

  fetchData () {
    this.isFetching = true
    ...
  }
}
复制代码

在小程序中，可以使用 this.$preload 函数进行页面跳转传参

这个也是实现预加载的功能，能上面的预加载有异曲同工之妙，至于用哪个方法，取决于开发者自己

用法：this.$preload(key: String | Object, [ value: Any ])

之所以命名为 $preload，因为它也有一点预加载数据的意味。

如果觉得每次页面跳转传参时，需要先把参数 stringify 后加到 url 的查询字符串中很繁琐，可以利用this.$preload进行传参。

另外如果传入的是下一个页面的数据请求 promise，也有上一点提到的“预加载”功能，也能够绕过 componentWillMount 延时。不同点主要在于代码管理，开发者可酌情使用。

例子：

// 传入单个参数

// A 页面
// 调用跳转方法前使用 this.$preload
this.$preload('key', 'val')
Taro.navigateTo({ url: '/pages/B/B' })

// B 页面
// 可以于 this.$router.preload 中访问到 this.$preload 传入的参数
componentWillMount () {
  console.log('preload: ', this.$router.preload.key)
}

// 传入多个参数

// A 页面
this.$preload({
  x: 1,
  y: 2
})
Taro.navigateTo({ url: '/pages/B/B' })

// B 页面
componentWillMount () {
  console.log('preload: ', this.$router.preload)
}
复制代码

用react中自带的优化方法

taro地址：taro-docs.jd.com/taro/docs/2…

shouldComponentUpdate

Taro.PureComponent

Taro.memo

Taro.memo是一个高阶组件，它和PureComponent非常相似。但它适用于函数式组件，而非 Class 组件。

如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 Taro.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，Taro 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

默认情况下其只会对复杂对象做浅层对比（和PureComponent行为一致），如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default Taro.memo(MyComponent, areEqual);
复制代码

注意与 class 组件中shouldComponentUpdate()方法不同的是，如果 props 相等，areEqual会返回true；如果 props 不相等，则返回false。这与shouldComponentUpdate方法的返回值相反。

Taro 框架层面优化

Taro 框架做了一些性能优化方面的工作，这部分毋需开发者手动处理，开发者可稍做了解。

小程序数据 diff

在真正调用小程序的 setData 方法之前，Taro 会把页面或组件的 state 和当前页面或组件的 data 做一次 diff，只对必要更新的数据做 setData，开发者无需手动优化。

diff 逻辑：

全等 => 跳过
新增字段 => 使用新值
类型不同 => 使用新值
类型相同、基础数据类型 => 使用新值
其中一方为数组，另一方不是 => 使用新值
都为数组、新数组比旧数组短 => 使用新值
都为数组、新数组长度大于等于旧数组的长度 => 逐项 diff、按路径更新
其中一方为 null，另一方不是 => 使用新值
都为对象，新对象缺少旧对象某些属性 => 使用新值
都为对象，新对象拥有旧对象所有的属性 => 逐项 diff、按路径更新

// 新值
const state = {
  a: 1,
  b: 22,
  d: 4,
  list: [1],
  arr: [1, 'a', true, null, 66],
  obj: {
    x: 5
  },
  foo: {
    x: 8,
    y: 10,
    z: 0
  }
}

// 旧值
const data = {
  a: 1,
  b: 2,
  c: 3,
  list: [1, 2, 3],
  arr: [1, 2, 3],
  obj: {
    x: 10,
    y: 8
  },
  foo: {
    x: 'xxx',
    y: 10
  }
}

diff(data, state)
/**
 * diff 结果
{
  b: 22,
  d: 4,
  list: [ 1 ],
  'arr[1]': 'a',
  'arr[2]': true,
  'arr[3]': null,
  'arr[4]': 66,
  obj: { x: 5 },
  'foo.x': 8,
  'foo.z': 0
}
*/
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端