微信小程序 “万利商城”实战之十一： 商品列表页跳转到详细页的实现

商品列表页点击商品图片时可以查看商品详情，我们先在pages/index这个文件夹下增加一个page，

名称叫productDetail, 建好后index文件夹下的文件结构是这样的：

然后我们修改index.wxml这个文件， 在<image>这个控件上加上tap事件，代码如下 ：

  <view>
    <image class="image1" src="{{item.imageUrl}}" 
    data-productId="{{item.productId}}" bindtap="tapDetail"></image>
  </view>

bindtap="tapDetail"是点击图片时要执行的函数，
data-productId="{{item.productId}}" 是传递给函数的参数，参数名称为productId

在index.wxml文件加上事件代码就可以了，如下：

  tapDetail: function (options) { 
    let productId = options.currentTarget.dataset.productid;
 
    wx.navigateTo({
      url: '../index/productDetail?productid='+ productId,
    })
  },

这个函数很简单， 先用let productId = options.currentTarget.dataset.productId;获取页面传递过来的productId ,

然后调用小程序提供的页面跳转函数 wx.navigateTo(), 传入页面名称和参数就可以了。

接下来我们完善productDetail.wxml这个页面。

<view class="container"> 
  <image class="image1" src="{{product.imageUrl}}"></image>
  <text>{{product.productName}}</text>
  <text>{{product.price}}</text>
  <text>{{product.originalPrice}}</text>
</view>

productDetail.js中的代码如下 ：

  data: {
    product:{}  //定义一个对象用于传值到productDetail.wxml页面， 用来显示商品信息
  },

  initProduct:function(productId)
  {
    console.log("productId:"+productId); //调试打印语句
    var _this=this;
    wx.request({ //调用API从服务器上获取当前product信息
      url: 'http://www.tm.com/webapi/product',
      data:{'productId':productId},
      method:'GET',
      success:function(res){
        //var productObj=res.data;
        var productObj={
          'productId':111,'productName':'女装T恤简洁11','price':12.9,'originalPrice':22.9,'imageUrl':'../../images/product11.jpg',
          'inShoppingCart':0,'productQty':11};
19         _this.setData({product:productObj}); //从服务器上获取的productObj值通过setData()函数设置到页面上显示出来。
      }
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let productId = options.productid; //接收上一个页面传递过来的参数
    console.log(productId); //打印输出，调试用。
    this.initProduct(productId); 调用函数用来初始化产品信息。
  },