微信小程序之web-view中的页面分享

由于整个小程序都是用web-view嵌入的,这个时候,如果单纯的进行页面分享,只会导致不管在web-view的哪个页面进行分享,都会在点击后进入首页。

解决思路

首先是开启小程序的页面分享功能

wx.showShareMenu({ withShareTicket: true, // 该参数在做分享到群内的统计的时候可以用到,单独分享给某个人是undefined,在小程序的load或者show的回调中可以拿到这个值 })

然后在onShareAppMessage中包装一下分享的信息,该回调是在点击右上角的分享之后,但是信息还没有发出去之前进行的一次回调,传入了一个包含from,dataset以及webViewUrl三个参数的对象。它的返回值就是对应的分享信息,这个时候我们拿到了对应的webview里面的url之后就可以做一些自己需要的操作了。

onShareAppMessage(options) { console.log(options); const { webViewUrl } = options; const i = webViewUrl.indexOf(\'?\'); let search = \'\', url = webViewUrl; if(i !== -1) { url = webViewUrl.slice(0, i); search = `${webViewUrl.slice(i + 1)}`; } const shareObj = { title: "分享的标题", // 默认是小程序的名称(可以写slogan等) path: `/pages/index?url=${url}${search ? \'&\' : \'\'}${search}`, // 默认是当前页面,必须是以‘/’开头的完整路径,通过拼接的方式,把需要分享的web-view的url以及参数拼接进去,然后在该`web-view`的页面中去做参数判断,一旦传入了对应的url和参数,就进入对应的url并携带对应的参数 // imageUrl: \'\', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 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 () { // 转发结束之后的回调(转发成不成功都会执行) } } // 来自页面内的按钮的转发 if (options.from == \'button\') { var data= options.target.dataset; console.log(data.name); // shareBtn // 此处可以修改 shareObj 中的内容 // shareObj.path = \'/pages/index\' + data.name; } // 返回shareObj return shareObj; } 还存在的问题

这样分享之后,进入之后确实能够进入到对应的url中,但是会出现无法回退到小程序首页的问题。由于整个小程序只有一个web-view,导致了所有页面的切换都是在一个原生页面下进行的,所以如果需要进行回退,***是新增一个web-view的页面,用到专门处理分享的链接。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgfzsf.html