美文网首页
微信小程序有哪些参数传值的方法?

微信小程序有哪些参数传值的方法?

作者: 秋玄语道 | 来源:发表于2018-06-09 21:49 被阅读0次

    一、跨页面传值

    1、用navigator标签或wx.navigateTo(wx.redirectTo或wx.reLaunch或wx.switchTab或wx.navigateBack)例如:
    (1)单个数据或几个数据传值
      wx.navigateTo({
        url: "../detail/detail?objectId=122342341"+"&?index=12",
      })
    
    <navigator class="detailItem" url="../detail/detail?objectId=122342341"+"&?index=12"></navigator>
    

    这里将objectId=12234234和index=12参数传入detail页面, 然后detail页面的 onload 方法内接受。

      onLoad:function(options){
        var objectId=options.objectId;
        var index =options.index;
    }
    
    (2)数组传值,先用JSON.stringify()转成字符串传递
    var  mode=[{img:"/1.jpg",title:"香蕉",price:"3"},
                       {img:"/2.jpg",title:"苹果",price:"7"},
                       {img:"/3.jpg",title:"梨",price:"4"}];
    //通过提供的JSON.stingify方法,将对象转换成字符串后传递
     wx.navigateTo({
        url: "../detail/detail?mode="+JSON.stringify(mode),
      })
    

    这里将mode=JSON.stringify(mode)参数传入detail页面, 然后detail页面的 onload 方法内接受。

      onLoad:function(options){
        var objectId=options.model;
    }
    
    2、从页面路由栈中直接获取和操作目标Page对象
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面
    //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
    prevPage.setData({
      mydata: {a:1, b:2}
    })
    
    3、使用全局数据存储
    //存储到app对象上的方式 
    var app = getApp()
    app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
    

    二、页内传值

    1、设置id或data-xxx传值
    <view bindtap="getId" id="{{item.id}}" data-index="{{item.index}}"></view>
    
    getId:function(event){
       var id =event.currentTarget.dataset.id;
       var index=event.currentTarget.dataset.index;
    }
    
    2、form表单和input输入框
    <form bindsubmit=“formSubmit”>
          <input name="detail" placeholder="收件人的地址"/>
          <input name="username" placeholder="收件人姓名”/>
          <input name="phone" placeholder="收件人手机号”/>
    </form>
    
    formSubmit:function(e){
         var detail =e.detail.value.detail;
         var  name=e.detail.value.username;
         var  phone =e.detail.value.phone;
    }
    

    相关文章

      网友评论

          本文标题:微信小程序有哪些参数传值的方法?

          本文链接:https://www.haomeiwen.com/subject/lydxeftx.html