小程序分享功能

小程序web-view支持的jssdk能力

支持的jssdk的api比较少，并不包括分享api，分享api对公众号是开放的，如下：

 

结论：

 在h5页面中点击按钮来分享是不能实现的

分享到朋友圈目前只在andriod上支持：

解决办法：

1、跳转小程序原声页面，使用小程序原声button按钮实现分享

2、小程序右上角按钮分享

实现代码：

 

1、h5页面代码：（index.js是小程序的页面中，从分享进入的h5的落地页，对应小程序的share目录）

//该方法在页面create完成之后就可以调用，不需要事件去触发，提前将信息发出去，等到点击分享的时候就可以获取到这个信息了     wx.miniProgram.postMessage({       data: {         title: '分享的标题',         desc: '分享的描述',         path: '/pages/share/index.js?data=' + JSON.stringify({ url: encodeURIComponent('http://localhost/page') })       }     });

2、小程序页面代码（小程序需要两个页面来加载web-view：一个是加载显示h5页面-→web目录，一个是点击分享链接打开小程序后显示链接对应的h5的页面 ---->share目录）：

web目录：

.wxml文件

<web-view wx:if="{{url}}" src="{{url}}" bindmessage="h5PostMessage">

 

.js文件

h5PostMessage: function (e) {     this.h5Data=  e.detail.data;  //当用户点击这个h5页面的分享时获取到   },     /**    * 用户点击右上角分享    */   onShareAppMessage: function (options) {     return {       title: this.h5Data.title,       desc: this.h5Data.desc,       path: this.h5Data.path,       success: function (res) {         // 转发成功之后的回调         if (res.errMsg == 'shareAppMessage:ok') {         }       },       fail: function () {         // 转发失败之后的回调         if (res.errMsg == 'shareAppMessage:fail cancel') {           // 用户取消转发         } else if (res.errMsg == 'shareAppMessage:fail') {           // 转发失败，其中 detail message 为详细失败信息         }       },       complete: function () {         // 转发结束之后的回调（转发成不成功都会执行）       }     }   }

 

share目录：

.wxml文件

<web-view wx:if="{{url}}" src="{{url}}">

.js文件

/**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     var data = options.data;//postMessage path中带的url 参数         var url =decodeURIComponent(data.url);         this.setData({url:url});   },   /**    * 用户点击右上角分享    */   onShareAppMessage: function (options) {     　　　　var path = '/pages/share/share.js';           　　　　var url = encodeURIComponent(options.webViewUrl);            path += '?data=' + JSON.stringify({ url: url });     　　　　return { path: path };     }