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

洪七公

我想把我的网站封装成小程序其实很简单，但是有一点是微信支付是无法使用的，需要改微信支付的接口，如果你的网站用不到微信支付那么就可以直接封装了！

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

一、登录微信公众平台，注册一个小程序，不懂自行百度(锦尚中国的vip会员可以免费申请小程序，需要的话联系咱们客服)，在平台上获取AppID(小程序ID)

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

三、修改app.json配置

打开app.json文件，pages项只保留 "pages/index/index" 这一行即可

window项的navigationBarTitleText填写小程序名称

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

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

复制代码

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

五、测试

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

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

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

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

这一段代码可以放在你的网站页面中，这样可以判断使用端后进一步触发动作，可以用来扩展很多的功能的！

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

复制代码