微信小程序商品跳转详情带参

701 阅读1分钟

1、微信小程序For循环写法:

   <view wx:for="{{数组}}">
<view>取值{{item.名字}}</view>
<image src="{{item.imgUrl}}" bindtap="goDetails" data-productid="{{item}}"/></view>

2、绑定点击事件,定义传参值:

<image src="{{item.imgUrl}}" bindtap="goDetails" data-productid="{{item}}"/>

3、点击事件方法:传递参数的时候,数组和对象处理方式相同,注意通过提供的JSON.stingify()方法,将对象转换成字符串后传递,如果传的字符串就直接传

如果传的参数过长,需要在加两个方法

encodeURIComponent(obj) 跳转url时的转换方法

decodeURIComponent(options.obj) 页面接收参数页面的转换方法

goDetails(e){ 
   var details = e.currentTarget.dataset.productid; 
 wx.navigateTo({   
   url: '/page/details/details?details=' + JSON.stringify(details)  
// url: '/pages/details/details?details=' + encodeURIComponent(JSON.stringify(details))  //参数过长的写法
 },

4、在跳转到的页面接收参数:在onLoad函数中获取,注意将字符串通过JSON.parse()转换成对象,details即为上个js中传递的key

/**   * 生命周期函数--监听页面加载   */  
onLoad: function (options) { 
     var details = JSON.parse(options.details) //将数据转换为对象
 //var details = JSON.parse(decodeURIComponent(options.details)) //接收的参数过长的写法 
  var img = details.imgUrl
this.imgList = img.split(",") //将图片切割转换为数组   this.setData({ 
     detailsList: details   
 })   
  },

5、点击图片预览

//图片点击事件
imgYu () {   
 //图片预览  
  wx.previewImage({  
    urls: this.imgList, //需要预览的图片http链接列表,注意是数组   
   current: '', // 当前显示图片的http链接,默认是第一个  
  })   
 },