Wepy预处理数据$preload

文章来源：https://www.jianshu.com/p/29226aeecb60   仅为自己学习记录使用

 

 

 大家好,学渣的wepy采坑之路又来啦....还记得当初自己的第一个项目传参的时候 页面之间传值怎么做啊..
问问度娘 看看小程序的api 噢 很简单啊.. url拼接 和'GET'请求很像嘛...

//扫码传值 传一堆我也不知道的值...
wepy.scanCode({}).then(res => {
   wepy.navigateTo({ url: `qrCodeDetail?type=0&codeParam=${res.result}&storeCode=${this.accDetail.storeName[this.storeIndex].storeCode}` })
})


//qrCodeDetail.wpy接
onLoad(option){
  option.type 巴拉巴拉
}

是不是很傻...我现在都不知道我传了一堆什么值给qrCodeDetail页面..数据可视化很差.. 如果我传个对象怎么办....

wepy.navigateTo({ url: `whiteCode?from=${from}&detailObj=${JSON.stringify(this.detailObj)}` })

low不low.....

言归正传... 今天来聊聊wepy自己封装的 一些数据预处理的用法

预加载数据
用于 page1 主动传递数据给 page2，比如 page2 需要加载一份耗时很长的数据。我可以在 page1 闲时先加载好，进入 page2 时直接就可以使用。
预查询数据
用于避免于 redirecting 延时，在跳转时调用 page2 预查询。

我在官网没有看到相关的api..是在别人论坛看到的...

先搂一眼代码
aaa页面传值给BBB页面需要的数据

//aaa.wepy
  data = {
    list:'我是B页面需要的LIST'
}
  methods = {
    toB(){
      this.$preload('list', this.list)
      wepy.navigateTo({
        url: `bbb?a=111`
      })
    }
}

//bbb.wepy
// params 正常跳转的参数
// data.from: 来源页面，page1
// data.preload: 预加载数据
  onLoad(params,data) {
    //如果存在
    if(data.preload){
      console.log('获取到aaa页面的值为:' + data.preload,list)
    }
  }

这样当我们从a页面跳转到B的时候 能拿到正常跳转的参数 也可以拿到预处理的参数
主要是方便数据追踪 当然你也可以使用别的方法
然而当我们从a页面跳转到b页面的时候 b页面的onLoad执行大概有300毫秒的延迟才会执行 我们可以利用这时间做点自己想做的事情
这时候就要用到以下两个方法(wepy自行封装的跳转)

this.$redirect 删除当前页跳转

this.$navigate 新开一个页面

使用且只有使用这两种方法做跳转.. 才会触发目标页面的 onPrefetch 钩子函数(wepy封装的)..他的触发时机比onLoad 还要早 他的值需要return出来以后才可以在onLoad中获取 让我们看看例子
需要注意的是url必须是相对路径

//aaa.wpy
methods = {
    go(){
        this.$navigate('./bbb')
    }
}

//bbb.wpy
onPrefetch(){
  console.log('触发onPrefetch')
  //这里可以提前调取接口 然后把数据return出去
  return [1,2,3,4,5]
}
//data.prefetch: 预查询数据
onLoad(params,data) {
  data.prefetch  //[1,2,3,4,5]
}

这样 wepy为我们节约了300ms 鼓掌!!!!
写的有点混乱 有时间再整理以下

 

 一个条件渲染不同入口的小技巧

  import wepy from 'wepy'
 export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: '我是B入口'
    }

  //预处理数据
  async onPrefetch(){
    let change  = await this.change()
    return new Promise((resolve,reject) =>{
      resolve({
        change
      })
    })
  }
  change(){
    return wepy.request({url:'http://mobile.weather.com.cn/data/sk/101010100.html?_=1381891661455'}).then(res=>{
      return res.data.sk_info.sd
    })
  }
  onLoad(params,data) {
    data
    debugger
    if(data.prefetch){
      data.prefetch.then(list=>{
        this.list = list.change
      })
    }
  }
    data = {
      huhai:'B数据过来了',
      list:null
    }

    computed = {
      now () {
        return +new Date()
      }
    }

    methods = {
      change(){
        wepy.$event.emit('changeName',this.huhai )
      }
    }



  }

最后自己mark一下大佬的文章

浅谈wepy源码：https://www.colabug.com/2968419.html

wepy框架的API的预加载$preload这功能阔以喔：https://www.cnblogs.com/l-yabiao/p/9136327.html

来源：https://www.cnblogs.com/lyspace/p/11951888.html