wepy框架的API的预加载$preload这功能阔以喔
优势:比 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啊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | data = { preloadData: { name: 'Hello' , age: '18' } }; methods = { navigateToBPage() { this .$preload( 'preload' , preloadData) //先 wepy.navigateTo({ url: `/pages/b/b?sourcePage=${ this .sourcePage}` }); } //后 }; // 'preload' 自己命名一个想要的有意义的变量名就好 // preloadData 数据格式,根据自己需求定义 |
B页面接收
1 2 3 4 5 6 7 8 9 | //必须在 onLoad 钩子函数才可以接收到 // options 为 url 的参数 // preloadData 为上个页面 preload 过来的 // 具体打印 出来 查看 preloadData 具体是什么 onLoad(options, preloadData) { if (preloadData.preload && preloadData.preload.name) { cosole.log( '拿到A页面preload过来的数据了:' , preloadData.preload); } }; |
假如是A页面的组件触发的,那preload就要变通一下,方法有可以多种的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //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 这样结合方式传递数据的!
看到这里,不放你也使用,试一试......
1 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步