小程序webview页面分享后打开分享页面url并显示页面title和...

升平网络工作室

现在做小程序的用户越来越多，有时候用户需要电脑端、手机端、小程序端、3端内容同步的时候，我们往往通过小程序的webview标签来直接把移动端打包小程序是最方便快捷的。但是在使用小程序一些小的组件时会遇到一些问题。

今天就来说说H5页面通过webview打包成小程序后，小程序页面分享出去后，别人打开仍然显示你分享时候的页面，并且显示分享页面title和简介的实现方法。

首先我们用webview标签打包我们的移动网址，看下面wml代码；

1. <web-view class='page_web' src="{{url}}" bindmessage="bindGetMsg"></web-view>

复制代码

这里注意需要给web-view组件上绑定bindmessage事件。

接下来看分享组件的使用，看下面js代码；

1. Page({
   
2. data: {
   
3. url: ' https://www.LTXBBS.cn'   //h5地址
   
4. },
   
5. bindmessage(e) {                 //接收web-view传递的参数
   
6. if (e.detail.data[e.detail.data - 1].title) {
   
7. this.setData({                       //存储状态
   
8. title: e.detail.data[0].title
   
9. })
   
10. }
    
11. },
    
12. 
    
13. //分享功能部分代码
    
14. onLoad: function (options) {
    
15. options.url ? this.setData({ url: decodeURIComponent(options.url) }) : this.setData({ url: options.url });
    
16. },
    
17. 
    
18. //获取网页标题  
    
19. bindGetMsg: function (e) {
    
20. this.data.shareObj = e.detail.data[e.detail.data.length - 1];
    
21. },
    
22. 
    
23. //分享并返回页面标题和链接  
    
24. onShareAppMessage: function (options) {   
    
25.     console.log(options)
    
26.     let shareObj = this.data.shareObj;
    
27.     if (shareObj) {
    
28.       return {
    
29.           title: shareObj.shareTitle,
    
30.           desc: shareObj.shareDesc,
    
31.           path: '/pages/webview/webview?url=' + encodeURIComponent(options.webViewUrl),
    
32.           imageUrl: ''
    
33.       }
    
34.     }else{      
    
35.       return {
    
36.         title: shareObj.shareTitle,
    
37.         desc: shareObj.shareDesc,
    
38.         path: '/pages/webview/webview?url=' + encodeURIComponent(options.webViewUrl),
    
39.         imageUrl: ''
    
40.     }
    
41.     }
    
42.        
    
43. },
    
44. })

复制代码

到这里还没结束，我们还需要在你的html页f (shareObj) {
return {
title: shareObj.shareTitle,
desc: shareObj.shareDesc,
path: '/pages/index/index?url=' + encodeURIComponent(options.webViewUrl),
}
}