在商品详情页我们要加一个返回按钮， 一个分享按钮，首先在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 }
最终效果如下图 ：
至此， 我们已完成首页的全部功能，实际项目中产品可能包含更多的信息，
可以在此基础上根据需要添加就可以，代码结构基本是不需要做改动的。
下一章节我们将介绍购物车的功能。
