记一次百度小程序web-view套手机站过程

可实现在手机站变成百度小程序，且手机站页面分享后，别人打开，是分享的页面，而不是都是首页。

手机站上需要处理， 需要引入JSSDK提交分享的数据

1. <script type="text/javascript" src="//b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.21.js"></script>
   
2. <script>
   
3. function isbaiduxcx()
   
4. {
   
5.     return /swan\//.test(window.navigator.userAgent) || /^webswan-/.test(window.name);//检测百度小程序环境
   
6. }
   
7. var webtitle=$(document).attr("title");
   
8. var postData = {
   
9.      url: window.location.href,//分享地址
   
10.      title: webtitle,//分享标题
    
11.          content:"",//分享描述
    
12.      image: ""//分享图片
    
13. };
    
14.         if(isbaiduxcx()){
    
15. //可处理其他在百度小程序内的操作
    
16. 
    
17.           swan.webView.postMessage({
    
18.                   data: postData
    
19.           });
    
20.         }
    
21. </script>

复制代码

百度小程序内代码

index.swan

1. <web-view s-if="webViewUrl" src="{{webViewUrl}}" bindmessage="getMessage"></web-view>

复制代码

index.js

1. Page({
   
2.     data: {
   
3.         webViewUrl: 'https://www.xcxw.cn/',//手机站地址
   
4.         share_url:'',
   
5.         share_title:'',
   
6.         share_desc:'',
   
7.         share_img:'',
   
8.     },
   
9. 
   
10.     onLoad({webViewUrl}) {
    
11.         //console.log(webViewUrl);
    
12.         webViewUrl && this.setData({webViewUrl});
    
13.     },
    
14.     getMessage(event) {
    
15.     //获取手机站获取的数据
    
16.         //console.log('数据---->>>', event);
    
17.         var p_data = event.detail.data;
    
18.         this.setData({
    
19.             share_url:p_data[p_data.length-1].url,
    
20.             share_title:p_data[p_data.length-1].title,
    
21.             share_desc:p_data[p_data.length-1].content,
    
22.             share_img:p_data[p_data.length-1].image,
    
23.         });
    
24.     },
    
25.    onShareAppMessage() {
    
26.    //分享
    
27.     var that = this.data;
    
28.     var p_url = ('/pages/index/index?webViewUrl=' + encodeURIComponent(that.share_url) ) || '/pages/index/index';
    
29.         return {
    
30.             title: that.share_title || '',
    
31.             content: that.share_desc || '',
    
32.             imageUrl:that.share_img || '',
    
33.             path: p_url,
    
34.         };
    
35.     }
    
36. 
    
37. })

复制代码

至此就结束了，简单的封装手机站成百度小程序，多个分享功能。另外手机站上需要调整的挺多了，比如拨打电话操作，客服链接，不能有微信号，微信二维码等等，该隐藏就隐藏，否则审核时候麻烦。