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

一、跨页面传值

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;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况,也遇到了开发过程微信小程序限制...
    Evtion阅读 46,827评论 4 28
  • 最近做了一个投票的微信小程序,开发过程主要还是参考官方文档:https://mp.weixin.qq.com/de...
    june5253阅读 22,128评论 1 11
  • 最近学习小程序,记录一下(2018.4.6) 目录结构1.为了方便开发者减少配置项,描述页面的四个文件必须具有相同...
    ZZES_ZCDC阅读 10,334评论 0 6
  • 转载请注明出处, 谢谢! (~ o ~)Y 1月9日,也就是今天,微信推出的“小程序”正式上线。“小程序”是一种无...
    Jimmy_P阅读 14,853评论 52 273
  • 12月6日,我们利用美德课时间进行了三年级国学经典---《论语》的诵读展示,各班都进行了诵读成果汇报。 ...
    木子班主阅读 3,165评论 0 0