微信小程序（路由及组件跳页传参）

API路由跳页传参

商品列表展示页


商品展示页编写

<view class="list-area">
  <view class="listBox"
  bindtap="backPage"
  data-item="{{item}}"
   wx:for="{{goods}}" wx:key="name">
   <view >
     <image src="{{item.imgSrc}}"></image>
     <view>{{item.name}}  {{item.price}}￥</view>
     </view>
  </view>
</view>

goods:[
      { name: '柴犬', price: 1000, imgSrc:'http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20160901/b7daa52648ed4f6db2554a043268de8e_th.jpg'},
      { name: '金毛', price: 3000, imgSrc: 'http://dpic.tiankong.com/lb/sg/QJ6656328402.jpg' },
      { name: '拉布拉多', price: 4000, imgSrc: 'http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8d5494eef01f3a29c5154e6e9925bc315d607cb5.jpg' },
      { name: '博美', price: 1600, imgSrc: 'http://n.sinaimg.cn/sinacn/w440h373/20180114/a810-fyqrewh9406158.jpg' },
      { name: '恶霸', price: 5000, imgSrc:' http://pic3.58cdn.com.cn/zhuanzh/n_v26d263b88fe19431f96f17add7c4f1856.jpg?w=750&h=0' },
      { name: '法斗', price: 2000, imgSrc: 'http://tct.ganjistatic1.com/gjfsqq/84d33dba71594faca1f5fb506849cfd9_600-0_6-0.jpg' }
    ]
  },
  backPage(event){
    const item = event.currentTarget.dataset.item;
    console.log(item);
    wx.navigateTo({
      url: '/pages/detailsPage/cq/cq?name=' +item.name +'&src='+item.imgSrc+'&price='+item.price,
      success(){},
      fail(){},
      complete(){}
    })
  },

.list-area{
   width: 100%;
   height: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap; 
     
}
.list-area image{
  width: 100%;
  height: 330rpx;
  display: block; 
}
.listBox{
  width: 45%;
  height: 400rpx;
  margin: 10rpx 0;
  border: solid 1px rgba(0, 0, 0, .3);
  border-radius: 6rpx;
}
.listBox view{
   line-height: 70rpx;
   font-size: 32rpx;
   text-align: center;
}

回到商城列表展示页，如果跳页时直接传参，会发现黄色警告，无法跳页

<view class="list-area">
  <view class="listBox"
  bindtap="backPage （item）"
  data-item="{{item}}"
   wx:for="{{goods}}" wx:key="name">
   <view >
     <image src="{{item.imgSrc}}"></image>
     <view>{{item.name}}  {{item.price}}￥</view>
     </view>
  </view>
</view>

小程序事件传递参数

小程序事件传递参数

在小程序中，给元素绑定事件不能直接传递参数，如果写成

正解：
①给元素绑定自定义属性data-item=”{{item}}”
②在js中通过事件对象获取event.currentTarget.dataset.item

API路由跳页传参

所以接下来做下调整，添加自定义属性data-***，然后在js中通过事件对象获取
语法：event.currentTarget.dataset.自定义属性名

<view class="list-area">
  <view class="listBox"
  bindtap="backPage"
  data-item="{{item}}"
   wx:for="{{goods}}" wx:key="name">
   <view >
     <image src="{{item.imgSrc}}"></image>
     <view>{{item.name}}  {{item.price}}￥</view>
     </view>
  </view>
</view>

JS中通过event.currentTarget.dataset.item获取，然后拼接到url后面
参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

 backPage(event){
    const item = event.currentTarget.dataset.item;
    console.log(item);
    wx.navigateTo({
      url: '/pages/detailsPage/cq/cq?name=' +item.name +'&src='+item.imgSrc+'&price='+item.price,
      success(){},
      fail(){},
      complete(){}
    })
  },

这里补充说明下路由跳转API的相关参数

商城页面传参后在详情页接收参数

<image class="goodImgArea" src="{{goodImg}}"></image>
<view class="goodInfoArea">{{goodName}} {{goodPrice}}￥</view>

 data: {
    goodImg:null,
    goodPrice:null,
    goodName:null
  },
 */
  onLoad: function (option) {
      this.setData({
        goodImg:option.src,
        goodName: option.name,
        goodPrice:option.price
      })
      console.log(option)
  },

navigator组件跳页传参

除了使用路由API跳页传参外，使用导航组件navigator进行跳页时，也可以传参，直接往url里拼写即可。