最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 手机站怎么做成小程序

    移动站、手机站、响应式的网站如何变成小程序?可以使用小程序中的web-view

    web-view:承载网页的容器。会自动铺满整个小程序页面,就像网页中的框架一样。个人类型的小程序暂不支持使用(微信小程序),域名也需要加入白名单中。

    使用也很简单,在小程序项目的首页的wxml代码输入下面代码,只要一句代码就行。

    <web-view src='http://www.xcxw.cn/'></web-view>
    

    接下来可以通过js判断是否在微信小程序环境,控制一些css的显示和掩藏,此部分在手机站代码中实现。

    微信小程序:

    方法1:
    function ready() {
      console.log(window.__wxjs_environment === 'miniprogram') // true
      }
    if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
      document.addEventListener('WeixinJSBridgeReady', ready, false)
    } else {
      ready()
    }
    方法2:
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>//引入js SDK
    <script type="text/javascript">
    wx.miniProgram.getEnv(function(res) {
      console.log(res.miniprogram) // true
      })
    </script>
    方法3:
    从微信7.0.0开始,可以通过判断userAgent中包含miniProgram字样来判断小程序web-view环境。
    

    百度小程序

    <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan.js"></script>
    <script type="text/javascript">
    swan.webView.getEnv(function(res) {
    	console.log(res.smartprogram);
    	if (res.smartprogram){
    		$("#foot2").css('display','block');   //百度小程序上的显示方式
    		$("#foot1").css('display','none');
    		console.log("1");
    		}
    	else{
    		$("#foot1").css('display','block');   //非百度小程序上的显示方式
    		$("#foot2").css('display','none');
    		console.log("2");
    		};
    		$("#foot2 a").click(function() {
               swan.makePhoneCall({
        phoneNumber: '000000' //仅为示例,并非真实的电话号码
    });
            });
    		
    	
    })
    </script>
    

    通过js获取的环境就可以添加网页上的元素的class或者直接控制显示掩藏,达到调整小程上显示的页面结构。

    另外js sdk还提供一些接口,具体可以看看https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html官方的文档。

    不过话说回来,这也是一时应急之法。还是需要单独做一个小程序比较妥当。

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

    常见问题FAQ

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