最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 小程序页面间参数传递的几种办法

      1. 页面URL传递参数

        wxml页面(参数多时可用“&”)

    <navigator url='../list/list?id=1'></navigator>
    

    或者添加点击事件,js用navigateTo跳转传参,两种效果一样

    wx.navigateTo({
    url: '../list/list?id=1',
    })
    

    取值:js页面 在onLoad里直接获取

    onLoad: function (options) {
    //页面初始化 options为页面跳转所带来的参数
    var id = options.id    //获取值
    },
    
    1. 全局变量

      全局变量实际上是定义了一个全局的对象,并可在每个页面中引入。

      在初始化代码的时候,小程序会读取app.js的文件,在这里我们可以定义我们所需要的全局变量。

      //app.js
      app({
      globalData:{
       id:null
      }}
      );
      

      赋值:(如果上面已经赋值,可跳过)

      var app = getApp();
      app.globalData.id = 2
      

      赋值:

      var app = getApp();
      var id = app.globalData.id
      

      app.js在项目中是用来做基础配置的,因此不建议将很多变量放在这里配置。一般情况下会将一些持久化的常量配置在这里,对于经常需要变动的量不建议用这个方法。

    2. 列表index下标取值

      wxml页面

      <navigator url='../list/list?id=1'></navigator>
      

      如果需要传递多个,可以写多个data-[参数]的方式进行传递

      JS代码

      clickMe:function(e){
        var id = e.currentTarget.dataset.id
        console.log(id);
      },
      

      注意:通过wxml设置data-[参数名]传递参数,[参数名]只能是小写,不能有大写

    3. form表单取值

      方式一:通过

      通过<form bindsubmit="formSubmit">与<button formType="submit">标签配合使用
      

      wxml页面

      <form bindsubmit="formSubmit">
        <input name="detail" placeholder="详情地址" />
        <input name="realname" placeholder="收件人姓名" />
        <input name="mobile" placeholder="手机号码" type="number"/>
        <button formType="submit" type="primary">Submit</button>
      </form>
      

      JS代码

      formSubmit: function(e) {
        // detail
        var detail = e.detail.value.detail;
        // realname
        var realname = e.detail.value.realname;
        // mobile
        var mobile = e.detail.value.mobile;
      }
      

      方式二:

      通过<input bindconfirm="realnameConfirm">实现
      

      JS代码

      // 实现相应多个**Confirm方式
      detailConfirm: function(e) {
        var detail = e.detail.value;
      }
      realnameConfirm: function(e) {
        var realname = e.detail.value;
      }
      mobileConfirm: function(e) {
        var mobile = e.detail.value;
      }
      

      通过方式一与方式二的对比可以看出,虽然同样都能实现取值的目标,但是它们的使用场景有所不同,前者适合与提交大量表单项时,比如用户完善个人资料,收货地址填写;而后者适合只做一两个表单项时,比如快递单号录入,绑定手机号码。

      如果需要类似ajax即时响应的,应该选用后者,因为input能使用<input bindinput=”bindInput”>来实现即时取到值,比如商品搜索框输入关键字,应出现一些候选词这样的场景。

    小结

    微信小程序中有以上并且不局限于以上几种的方式进行页面间数据传递、交互, 在实际应用中可以组合使用。比如说:

    1.一些常量,可以交由 app.js 管理;需要持久化的量可以放在本地保存。

    2.涉及到下级页面或者模板元素的数据,可以通过传入参数的方式传入。

    3.后级页面可以通过获取堆栈里的页面对象快速修改上级的数据。

    在实际应用中结合使用,可以更好地管理小程序的数据。

    免责需知
    1、本站所有资源均来源于网络收集,一切版权©归原作者所有,请保留原版权信息。
    2、本站分享仅供参考学习和演示,禁止商用,如需商用,请从正规渠道选择购买正版!使用正版!支持正版!维护一个良好的知识产权环境。
    3、内容故是参考与学习,不确保能正常演示,也不包含其中的技术服务。
    4、排除在某个功能上存在有其它的BUG或源码残缺的可能,购买后一率不能退款。
    5、资源下载不含技术服务,需付费安装请联系客服100元/次。
    6、文件储存在网盘,如发现链接或者密码有误,请联系客服。
    7、如果付款后下载不了,请提交工单说明,客服会在24小时内解决,如果解决不了,会为您退款。
    8、侵权反馈邮箱:yutongyuncom@qq.com
    顺风猫 » 小程序页面间参数传递的几种办法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    顺风猫
    一个高级程序员模板开发平台