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

洪七公 · 发表于 2023-8-27 14:59:05

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

前提要求：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文件，将里面的代码全部删除，添加下面这一行代码

<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>

复制代码

		自动登录	找回密码
密码			会员注册

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