Html5 mobile phone URL package into a WeChat applet tutorial

Introduction:

The number of WeChat users has surpassed 1 billion (more than 80% of the people in China use WeChat), and WeChat applets are also popular among users. If your website has an H5 mobile terminal, you can directly package the H5 mobile website into a WeChat applet. Except that the WeChat payment function cannot be used, other similar sharing functions are no different from a real applet. In this way, the time and cost of developing a WeChat applet can be saved.

Tutorial steps:

Prerequisite: The domain name of the H5 website must be https, such as  https://m.18ka.net/ , which starts with https, not http

1. Log in to the WeChat public platform , register a small program, do not know Baidu by yourself, get AppID (small program ID)

2. Create a mini program in the WeChat developer tool and fill in the AppID of the previously registered mini program

Three, modify the app.json configuration

• Open the app.json file, and only leave the "pages/index/index" line in the pages item
• Fill in the name of the applet in the navigationBarTitleText of the window item

→→

4. Open the /pages/index/index.wxml file, delete all the codes inside, and add the following line of code

<web-view src="https://m.18ka.net"></web-view>

Https://m.18ka.net in the code is the domain name of your H5 website

Five, test

1. Click Details → Local Settings → tick [Do not verify legal domain name] to test, as shown in the figure below:

2. If the Mini Program is officially launched, you need to add the H5 domain name as a business domain name in the WeChat Mini Program Management Center, as shown in the figure below:

Log in to the WeChat public platform → development management → development settings → server domain name:

Six, js judges whether the current html5 URL is running in the WeChat applet

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