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

【本节大纲】
（1）API路由跳页传参
（2）navigator导航组件跳页传参

API路由跳页传参

商品列表展示页

商品展示页编写

<!--pages/zhuanti/zhuanti.wxml-->
<view class="goodsList">
  <view class="goodBox" bindtap="toDetail" data-item="{{item}}" wx:for="{{goods}}" wx:key="name">
    <image src="{{item.imgSrc}}"></image>
    <view>{{item.name}} {{item.price}}￥</view>
  </view>
</view>

/* pages/zhuanti/zhuanti.wxss */
.goodsList{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.goodBox{
  width: 45%;
  height: 400rpx;
  margin: 10px auto;
  border: 1rpx solid rgba(0, 0, 0, 0.3);
  border-radius: 6rpx;
}
.goodBox image{
  width: 100%;
  height: 330rpx;
  display: block;
}
.goodBox view{
  line-height: 70rpx;
  font-size: 32rpx;
  text-align: center;
}

  /**
   * 页面的初始数据
   */
  data: {
    goods:[
      { name: '雷神', price: 20, imgSrc: 'https://www.agri35.com/UploadFiles/img_0_1116268190_1801441364_26.jpg' },
      { name: '机器人', price: 13, imgSrc: 'http://images.ali213.net/picfile/pic/2013/03/22/927_zem (6).jpg' },
      { name: '柴犬', price: 30, imgSrc: 'https://www.agri35.com/UploadFiles/img_0_4206379571_53855437_26.jpg' },
      { name: '贝壳', price: 46, imgSrc: 'https://www.agri35.com/UploadFiles/img_0_800837951_203223793_26.jpg' },
      { name: '火影', price: 28, imgSrc: 'https://www.agri35.com/UploadFiles/img_1_3695192305_4134652568_26.jpg' },
      { name: '二狗', price: 17, imgSrc: 'https://www.agri35.com/UploadFiles/img_1_4288039849_2595693982_26.jpg' }
    ],
  },

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

小程序事件传递参数

在小程序中，给元素绑定事件不能直接传递参数，如果写成bindtap = 'showDetail()'//不能写小括号，会报黄色警告

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

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

JS中通过event.currentTarget.dataset.item获取，然后拼接到url后面

• 参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

/**跳页 */
toDetail(event){
const item = event.currentTarget.dataset.item;
console.log(item)
wx.navigateTo({
  url: '/pages/zhuanti/shangcheng/shangcheng?name=' + item.name + '&src=' + item.imgSrc + '&price=' + item.price,
  success(){},
  fail(){},
  complete(){}
})
},

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

属性参数	类型	是否必填	说明
url	string	是	跳转页面的路径
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

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

<!--pages/zhuanti/shangchecng/shangcheng.wxml-->
<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里拼写即可。

<!--pages/zhuanti/zhuanti.wxml-->
<view class="goodsList">
  <view class="goodBox" bindtap="toDetail" data-item="{{item}}" wx:for="{{goods}}" wx:key="name">
    <navigator url="/pages/zhuanti/shangcheng/shangcheng?name={{item.name}}&src={{item.imgSrc}}&price={{item.price}}">
      <image src="{{item.imgSrc}}"></image>
      <view>{{item.name}} {{item.price}}￥</view>
    </navigator>
  </view>
</view>