微信小程序 “万利商城”实战之十二： 商品列表页跳转到详细页的返回和分享实现

在商品详情页我们要加一个返回按钮， 一个分享按钮，首先在productDetail.wxml中添加如下代码 ：

 1 <view class="container"> 
 2   <image class="image1" src="{{product.imageUrl}}"></image>
 3   <text>{{product.productName}}</text>
 4   <text>{{product.price}}</text>
 5   <text>{{product.originalPrice}}</text>
 6 
 7   <button class="button1"  bindtap="tapReturn">返回</button>
 8 
 9   <button class="button1"  open-type="share">分享</button>
10 </view>

在productDetail.wxml中定义了2个按钮 ， 返回按钮的事件绑定tapReturn函数，

我们在productDetail.js文件中实现这个函数的逻辑 ：

1   tapReturn:function(options)
2   {
3     wx.navigateBack({
4       delta: 0,
5     })
6   },

直接调用小程序的API来实现， wx.navigateBack( )可以通过delta字段指定返回哪一层极，0表示上一级。

分享按钮的实现更简单一些，只需要在按钮中增加属性 open-type="share" 就可以了，

当用户点击时候自动去执行页面的onShareAppMessage: function () { }方法（点击小程序右上角也是调用此方法），如下 ：

1   onShareAppMessage: function () {
2 
3   }

如果这个方法什么代码都不写 ， 小程序会自动截取当前页面顶部的一段信息作为分享的标题和图片，

为了分享出去的信息更美观 ， 我们通常自定义分享出去的内容， 主要是设置分享的图片和文字 ， 代码如下 ：

1   onShareAppMessage: function () {
2     return {
3       title: "女装T恤简洁款上市啦，先睹为快！",
4       path:\'../../images/product11.jpg\'
5     }
6   }

最终效果如下图 ：

至此， 我们已完成首页的全部功能，实际项目中产品可能包含更多的信息，

可以在此基础上根据需要添加就可以，代码结构基本是不需要做改动的。

下一章节我们将介绍购物车的功能。