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

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

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

<script type="text/javascript" src="//b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.21.js"></script> 
<script>
function isbaiduxcx()
{
    return /swan//.test(window.navigator.userAgent) || /^webswan-/.test(window.name);//检测百度小程序环境
}
var webtitle=$(document).attr("title");
var postData = {
     url: window.location.href,//分享地址
     title: webtitle,//分享标题
	 content:"",//分享描述
     image: ""//分享图片
};
	if(isbaiduxcx()){
//可处理其他在百度小程序内的操作

	  swan.webView.postMessage({
		  data: postData
	  });
	}
</script>

百度小程序内代码

index.swan

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

index.js

Page({
    data: {
        webViewUrl: 'https://www.xcxw.cn/',//手机站地址
        share_url:'',
        share_title:'',
        share_desc:'',
        share_img:'',
    },

    onLoad({webViewUrl}) {
        //console.log(webViewUrl);
        webViewUrl && this.setData({webViewUrl});
    },
    getMessage(event) {
    //获取手机站获取的数据
        //console.log('数据---->>>', event);
        var p_data = event.detail.data;
        this.setData({
            share_url:p_data[p_data.length-1].url,
            share_title:p_data[p_data.length-1].title,
            share_desc:p_data[p_data.length-1].content,
            share_img:p_data[p_data.length-1].image,
        });
    },
   onShareAppMessage() {
   //分享
    var that = this.data;
    var p_url = ('/pages/index/index?webViewUrl=' + encodeURIComponent(that.share_url) ) || '/pages/index/index';
        return {
            title: that.share_title || '',
            content: that.share_desc || '',
            imageUrl:that.share_img || '',
            path: p_url,
        };
    }

})

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