手机站怎么做成小程序

移动站、手机站、响应式的网站如何变成小程序？可以使用小程序中的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官方的文档。

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