📖将移动端网页封装成微信小程序

前言

将自己的网站封装成小程序并能够正常获取信息 😀

工具:微信开发者工具,一个小程序ID,网站地址

步骤

首先当然是去微信公众平台注册一个小程序账号了,由于网上有很多教你如何注册小程序的教程,这里我就不多说了

登录微信公众平台——>开发——>开发管理——>开发设置——>AppID(小程序ID)
将移动端网页封装成微信小程序插图

接着往下拉找到——>服务器域名,增加你的域名上去
将移动端网页封装成微信小程序插图1

打开微信开发者工具,输入名称,路径,与APPID
将移动端网页封装成微信小程序插图2

修改app.jsonpages——>index——>index.wxml

  1. app.json
  2. //将 pages 多余的删除,只留下 index 即可
  3. "pages": [
  4. "pages/index/index"
  5. ],
  6. index.wxml
  7. //删除原本的内容,只留以下内容并改成你直接的网站
  8.  

将移动端网页封装成微信小程序插图3

点击右上角详情按钮——>本地设置——>不校验合法域名……. 勾选上
清楚全部缓存——>编译——>小程序正常访问

将移动端网页封装成微信小程序插图4

结尾

你的网站也可以对当前的页面进行判断并执行相对应的操作

将以下代码放到你网页的代码中

  1. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  2. //↑ 微信开放jweixin API接口
  3. <script>
  4. var ua = navigator.userAgent.toLowerCase();
  5. if(ua.match(/MicroMessenger/i)=="micromessenger") {
  6. //如果是 IOS 系统的话,需要将 miniProgram 换成 MicroMessenger
  7. wx.miniProgram.getEnv((res)=>{
  8. if (res.miniprogram) {
  9. alert("在小程序中访问网站");
  10. } else {
  11. alert("不在小程序中访问网站");
  12. }
  13. })
  14. }else{
  15. alert('当前不在微信中访问');
  16. }
  17. </script>

标签