源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 网站Html5手机端网址封装成微信小程序的教程 [打印本页]
作者: 洪七公    时间: 2023-8-27 14:59
标题: 网站Html5手机端网址封装成微信小程序的教程

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

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

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

(, 下载次数: 118)


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

(, 下载次数: 119)


三、修改app.json配置

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

window项的navigationBarTitleText填写小程序名称

(, 下载次数: 115)


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

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


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

五、测试

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

(, 下载次数: 121)


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

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

(, 下载次数: 116)


六、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>
复制代码






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3