Html5手机端网址封装成微信小程序的教程

导读：

微信用户数早已超越10亿（中国使用微信的人已经超过80%），微信小程序也备受用户喜爱，如果你的网站已有H5手机端，可以将H5手机网站直接封装成微信小程序，除了不能使用微信支付功能外，其他类似分享的功能都是和真正的小程序端无异的，如此一来，可以省去开发微信小程序的时间和成本。

教程步骤：

前提要求：H5网站域名必须开启https，比如 https://18pay.net/，是https开头，而不是http

一、登录微信公众平台，注册一个小程序，不懂自行百度，获取AppID(小程序ID)

二、微信开发者工具中创建小程序，填写前面注册小程序的AppID

三、修改app.json配置

• 打开app.json文件，pages项只保留 "pages/index/index" 这一行即可
• window项的navigationBarTitleText填写小程序名称

→→

四、打开/pages/index/index.wxml文件，将里面的代码全部删除，添加下面这一行代码

<web-view src="https://18pay.net/"></web-view>

代码里的https://18pay.net/，就是你H5网站的网址域名

五、测试

1、点击详情 → 本地设置 → 勾选【不校验合法域名】来进行测试，如下图：

2、小程序正式上线的话，需要在微信小程序管理中心中，把H5域名添加为业务域名，如下图：

登录微信公众平台 → 开发管理 → 开发设置  → 业务域名：

 

六、js判断当前html5网址是不是在微信小程序中运行的

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
        wx.miniProgram.getEnv((res)=>{
           if (res.miniprogram) {
               alert("在小程序里");
           } else {
               alert("不在小程序里");
           }
        })
    }else{
        alert('不在微信里');
    }
</script>