移动站、手机站、响应式的网站如何变成小程序?
可以使用小程序中的web-view
web-view:承载网页的容器。会自动铺满整个小程序页面,就像网页中的框架一样。个人类型的小程序暂不支持使用(微信小程序),域名也需要加入白名单中。
使用也很简单,在小程序项目的首页的wxml代码输入下面代码,只要一句代码就行。
<web-view src='http://www.baidu.com/'></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环境。
通过js获取的环境就可以添加网页上的元素的class或者直接控制显示掩藏,达到调整小程上显示的页面结构。
另外js sdk还提供一些接口,具体可以看看https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html官方的文档。
不过话说回来,这也是一时应急之法。还是需要单独做一个小程序比较妥当。
