优势:比 url 传递、或是 storage 、或是 globalData 更方便

1:如 url 不能直接传一个 Object 要传的又要序列化与反序列化操作,麻烦(普通的单个变量还是挺便捷简单实在的)

2:如 storage 也麻烦,又要set 到用的时候还要 get

3:  globalData 来虽然比上面两种貌似更有优势,但是这个交互的数据挺大,整天挂载在globalData,同时挂载上后去到那个页面能访问的到(别人说可以设置null,即使这样还不是      多以key在globalData上)

但是很多的preload数据只是单一渲染后就不要,也没有必要挂载在 globalData 上,所以本人觉得 $preload 大有用处

$preload 使用

A页面preload数据

注意:先 preload 再进行页面路由跳转,编程序路由跳转啊,

不要使用给navigator组件绑定点击事件preload啊

 data = {
preloadData: {
name: 'Hello',
age: '18'
}
};
methods = {
navigateToBPage() {
this.$preload('preload', preloadData) //先
wepy.navigateTo({
url: `/pages/b/b?sourcePage=${this.sourcePage}`
});
} //后
};
// 'preload' 自己命名一个想要的有意义的变量名就好
// preloadData 数据格式,根据自己需求定义

  

B页面接收

  //必须在 onLoad 钩子函数才可以接收到
// options 为 url 的参数
// preloadData 为上个页面 preload 过来的
// 具体打印 出来 查看 preloadData 具体是什么
onLoad(options, preloadData) {
if (preloadData.preload && preloadData.preload.name) {  
cosole.log('拿到A页面preload过来的数据了:', preloadData.preload);
}
};

  

假如是A页面的组件触发的,那preload就要变通一下,方法有可以多种的

//1: 直接定义组件的methods的方法里面
methods = {
navigateToBPage() {
this.$parent.$preload('preload', preloadData) //先
wepy.navigateTo({
url: `/pages/b/b?sourcePage=${this.sourcePage}`
});
} //后
};
//***********************************************************
//2:使用组件的通讯交互
methods = {
navigateToBPage() {
this.$emit('emit_parent_preload', preloadData);
}
};
//$emit一个事件出去,触发父页面preload
//A页面在events定义:
events = {
emit_parent_preload(preloadData) {
this.$preload('preload', preloadData);
wepy.navigateTo({
url: `/pages/b/b?sourcePage=${this.sourcePage}`
});
}
}

  

  

我个人在使用 wepy框架开发小程序,是挺喜欢用 prelaod 与路由导航的 API 这样结合方式传递数据的!

看到这里,不放你也使用,试一试......

    

wepy框架的API的预加载$preload这功能阔以喔的更多相关文章

  1. ASP.NET MVC3 Razor 调试与预加载

    目录(?)[-] 获取服务器信息 FormsAuthenticationSlidingExpiration 属性 MVC3预加载   在ASP.NET MVC3开发中,调试中怎么也是不可缺少的,那对于 ...

  2. javascript设计模式实践之代理模式--图片预加载

    图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...

  3. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  4. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  5. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  6. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  7. mui webview 预加载

    所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验.mui提供两种方式实现页面预加载. 方式一:通过mu ...

  8. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  9. spine实现预加载(一)

    前言 本文实现了spine动画的预加载,解决在战斗等大量加载spine动画的时候出现卡顿现象. 这里使用和修改三个类,直接修改的源码,当然你也可以继承LuaSkeletonAnimation,自己封装 ...

随机推荐

  1. ZBrush中如何反选遮罩

    通过对ZBrush的学习,我们知道了如何手动创建遮罩,手动创建遮罩相对来说是最简单有效的方法,在某些特定的使用场合会起到事半功倍的效果.创建遮罩我们可以结合Ctrl键在物体保持编辑的状态下来执行,您可 ...

  2. ZBrush软件特性之Marker标记调控板

    在ZBrush®中使用Marker标记调控板来记忆物体属性,因此能在任何时间回到标记并使用它给其他物体或改变物体作为参考点. ZBrush软件下载:http://pan.baidu.com/s/1sl ...

  3. 区间dp+四边形不等式优化

    区间dp+四边形优化 luogu:p2858 题意 给出一列数 \(v_i\),每天只能取两端的数,第 j 天取数价值为\(v_i \times j\),最大价值?? 转移方程 dp[i][j] :n ...

  4. Multipartfile与File类型相互转换

    特殊情况下需要做转换 1.M转F File file = new File(path); FileUtils.copyInputStreamToFile(multipartFile.getInputS ...

  5. 关于samsung连接BLE设备的一些资料汇总和开发过程一些经验总结

    1 忙了这么久,终于有时间把最近几个月弄的东西整理一下,顺便我的开发过程和经历. 被公司分到做一个蓝牙4.0的项目,对这种软硬结合的东西也比较感兴趣,所以很快投入到android蓝牙4.0的项目中来. ...

  6. java中Collection 与Collections的区别

    1. Collection是集合类的一个顶级接口,其直接继承接口有List与Set 而Collections则是集合类的一个工具类/帮助类,其中提供了一系列静态方法,用于对集合中元素进行排序.搜索以及 ...

  7. nodejs 中使用 ftp

    转自原文 nodejs 中使用 ftp 1.  npm install ftp 项目 https://github.com/mscdex/node-ftp 2.  转自 http://www.open ...

  8. AssetBundle打包优化解决方式

    第一阶段:AssetBundle出一套解决方式 1.解决如今同一个资源打2个bundle的冗余问题 2.測试验证节省资源的比率是多少 问题拆分 一.bundle反复 问  题  :同样资源拆分问题? ...

  9. POSIX 线程编程(一)简介

    简介 在共享内存的多处理器结构中,可以用线程来实现并行.对于UNIX系统, IEEE POSIX 1003.1c标准规定了C语言线程编程接口的标准.这份标准的实现就是POSIX threads, 或者 ...

  10. Android Touch事件传递机制全面解析(从WMS到View树)

    转眼间近一年没更新博客了,工作一忙起来.非常难有时间来写博客了,因为如今也在从事Android开发相关的工作,因此以后的博文也会很多其它地专注于这一块. 这篇文章准备从源代码层面为大家带来Touch事 ...