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

（1）API路由跳页传参

商品展示页基础：

<!--pages/type/type.wxml-->
<view class="goodsList">

  <block wx:for="{{goodsList}}" wx:key="index">
    <view 
      class="good" 
      bindtap="jump">
        <image src="{{item.imgSrc}}"></image>
        <view>{{item.name}}-----{{item.price}}</view>
    </view>
  </block>

</view>

/* pages/type/type.wxss */
.goodsList{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.good{
  width: 45%;
  height:380rpx;
  border: 1rpx solid #9d9d9d;
  margin:10rpx;
  display: flex;
  flex-wrap: wrap;
  padding:10rpx;
  box-sizing: border-box;
}
.good image{
  width:100%;
  height: 300rpx;
}
.good view{
  height: 50rpx;
}

/**
   * 页面的初始数据
   */
  data: {
    goodsList: [{
        name: "啦啦1",
        price: 56,
        imgSrc: '/images/imgs/01.jpg'
      },
      {
        name: "啦啦2",
        price: 96,
        imgSrc: "/images/imgs/02.jpg"
      },
      {
        name: "啦啦3",
        price: 81,
        imgSrc: "/images/imgs/03.jpg"
      },
      {
        name: "啦啦4",
        price: 45,
        imgSrc: "/images/imgs/04.jpg"
      },
      {
        name: "啦啦5",
        price: 94,
        imgSrc: "/images/imgs/05.jpg"
      },
      {
        name: "啦啦6",
        price: 73,
        imgSrc: "/images/imgs/06.jpg"
      },
      {
        name: "啦啦7",
        price: 68,
        imgSrc: "/images/imgs/07.jpg"
      },
      {
        name: "啦啦8",
        price: 59,
        imgSrc: "/images/imgs/08.jpg"
      }
    ]
  },

点击进入商城列表展示页，如果跳页时直接传参，会发现黄色警告，无法跳页。

 <view bindtap="jump(item)"></view>

小程序事件传递参数

1）在小程序中，给元素绑定事件不能直接传递参数。
正解：
①给元素绑定自定义属性data-item=”{{item}}”
②在js中通过事件对象获取event.currentTarget.dataset.item

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

♥♥♥动物列表传参-------第一种传参方式—API路由跳页传参

<block wx:for="{{goodsList}}" wx:key="index">
    <view 
      class="good" 
      data-item="{{item}}" 
      bindtap="jump">
        <image src="{{item.imgSrc}}"></image>
        <view>{{item.name}}-----{{item.price}}</view>
    </view>
  </block>

 jump(event) {
    const item = event.currentTarget.dataset.item;
    wx.navigateTo({
      url: 'typeIn/typeIn?name=' + item.name + '&imgSrc=' + item.imgSrc + '&price=' + item.price
    })
  },

♥♥♥列表页面传参后在动物详情页接收参数

<!--pages/type/typeIn/typeIn.wxml-->
<text>pages/type/typeIn/typeIn.wxml</text>
<view>
  <image src="{{goodsImg}}"></image>
  <view>{{goodsName}}---{{goodsPrice}}</view>
</view>

/**
   * 页面的初始数据
   */
  data: {
    goodsName:null,
    goodsPrice:null,
    goodsImg:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    this.setData({
      goodsName: options.name,
      goodsPrice: options.price,
      goodsImg: options.imgSrc
    })
  },

♥♥♥动物列表传参---------第二种传参方式—navigator组件跳页传参

<block wx:for="{{goodsList}}" wx:key="index">
    <view 
      class="good" 
      data-item="{{item}}" 
      bindtap="jump">
    <navigator url="typeIn/typeIn?name={{item.name}}&price={{item.price}}&imgSrc={{item.imgSrc}}">
        <image src="{{item.imgSrc}}"></image>
        <view>{{item.name}}-----{{item.price}}</view>
     </navigator> 
    </view>
  </block>

jump(event) {
   
  },

两种都可以实现传参

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

  url: 'typeIn/typeIn?name=' + item.name + '&imgSrc=' + item.imgSrc + '&price=' + item.price

路由跳转API的相关参数