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

迈不过友情╰ 2023-06-17 13:56 4阅读 0赞

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

# API路由跳页传参 #

商品列表展示页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
商品展示页编写

<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.自定义属性名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]  
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的相关参数

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

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

<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)
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

# navigator组件跳页传参 #

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

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129115336600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112912392192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129124621459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70