欢迎来到抓头网一站式建站平台

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

日期: 2022-01-22 02:09:27

导读:

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


教程步骤:

前提要求:H5网站域名必须开启https,比如 https://www.zhuatou.cn/,是https开头,而不是http


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


1.png


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


2.png


三、修改app.json配置


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

window项的navigationBarTitleText填写小程序名称

→→


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


<web-view src="https://www.zhuatou.cn"></web-view>

代码里的https:/www.zhuatou.cn,就是你H5网站的网址域名


五、测试

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


3.png

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

5.png

登录微信公众平台 → 开发管理 → 开发设置  → 服务器域名:




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

 




上一篇:如何获取小程序的Scheme码

下一篇:微信小程序【用户隐私保护指引】填写范本

  • 会员中心
  • 浏览记录
  • 我的订单
  • 我的收藏
  • 在线客服

    点击这里给我发消息 点击这里给我发消息 点击这里给我发消息

    官方微信

    仅处理投诉、举报及平台使用问题;
    商品问题请咨询商家客服!

  • 意见反馈
  • 返回顶部
浏览记录