zoukankan      html  css  js  c++  java
  • 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啊

     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 这样结合方式传递数据的!

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

        
  • 相关阅读:
    数组集合之间的转换
    eclipse 大小写转换
    Linux下查看文件内容的命令
    linux常用命令:创建文件和文件夹
    Error Downloading Packages: yum更新出现错误
    XShell上传文件到Linux服务器上
    linux最常用的20个命令
    Sonar理论篇
    如何查看DLL文件的函数列表
    C++在C的基础上的扩充
  • 原文地址:https://www.cnblogs.com/l-yabiao/p/9136327.html
Copyright © 2011-2022 走看看