最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 记一次百度小程序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,
            };
        }
    
    })
    

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

    免责需知
    1、本站所有资源均来源于网络收集,一切版权©归原作者所有,请保留原版权信息。
    2、本站分享仅供参考学习和演示,禁止商用,如需商用,请从正规渠道选择购买正版!使用正版!支持正版!维护一个良好的知识产权环境。
    3、内容故是参考与学习,不确保能正常演示,也不包含其中的技术服务。
    4、排除在某个功能上存在有其它的BUG或源码残缺的可能,购买后一率不能退款。
    5、资源下载不含技术服务,需付费安装请联系客服100元/次。
    6、文件储存在网盘,如发现链接或者密码有误,请联系客服。
    7、如果付款后下载不了,请提交工单说明,客服会在24小时内解决,如果解决不了,会为您退款。
    8、侵权反馈邮箱:yutongyuncom@qq.com
    顺风猫 » 记一次百度小程序web-view套手机站过程

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    顺风猫
    一个高级程序员模板开发平台