• 技术文章 >微信小程序 >小程序开发

    微信小程序之页面传值详解

    零下一度零下一度2017-05-22 11:50:11原创1033
    最近组里开发小程序,遇到了一个前端亘古不变的话题:页面传值
    刚开始使用路径传参解决,但是众所周知:

    各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下:
    IE6.0 :url最大长度2083个字符,超过最大长度后无法提交。
    IE7.0 :url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符。
    firefox 3.0.3 :url最大长度7764个字符,超过最大长度后无法提交。
    Opera 9.52 :url最大长度7648个字符,超过最大长度后无法提交。
    Google Chrome 2.0.168 :url最大长度7713个字符,超过最大长度后无法提交。

    所以觉得不靠谱。
    研究了一下官网,发现有两种方式可以“比较优雅”地干这件事,当然不能和vuex/flux比。

    1. 使用全局变量
      在项目app.js中定义globalData

      App({
       globalData:{
       userInfo:'angeladaddy'
      }
      });

      在需要的地方使用:

      getGlobalVar:function(){
       var that=this;
      that.setData({
        globalvar_str:JSON.stringify(getApp().globalData)
      }) 
      }

      当然也可以随时赋值:

      onLoad:function(options){
       getApp().globalData.userInfo+=' is an awesome man';
      },

      效果:


    Paste_Image.png

    2.使用模板
    根据官方介绍如下:

    首先定义模板,使用name属性

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>

    接着,使用模板

    • 使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

      <template is="msgItem" data="{{...item}}"/>

      给item赋值以显示模板数据

      Page({
      data: {
       item: {
         index: 0,
         msg: 'this is a template',
         time: '2016-09-15'
       }
      }
      })

    这样就“duang~~~”的一下解决了页面传值问题

    后记:既然小程序可以使用ES6的所有特性,那么那个var that=this又是什么鬼?为何不能用箭头函数解决作用域问题?回头再试试。

    【相关推荐】

    1. 微信小程序完整源码下载

    2. 微信小程序游戏类demo挑选不同色块

    3. 微信小闹钟:对话实现

    以上就是微信小程序之页面传值详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:HTML5实现图片压缩上传功能的深度解析 下一篇:小程序开发--页面传值
    大前端线上培训班

    相关文章推荐

    • 小程序Vant组件怎么将默认样式单位px转为rpx• 浅谈小程序中怎么创建页面二维码• 小程序学习记录之Linux出现Could not resolve-api.weixin.qq.com问题的处理方案• 浅谈小程序中下拉刷新和上拉加载功能怎么实现?(附代码)• 手把手带你在小程序中实现保存图片组件功能

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网