h5与小程序

判断h5在小程序里面

var ua = window.navigator.userAgent;
if(ua && ua.indexOf("miniProgram")>0){

}

判断浏览器类型

var isWXWork = ua.match(/wxwork/i) == 'wxwork'
var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
var isMobile = false
var isDesktop = false
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
    isMobile = true
} else {
    isDesktop = true
}

打开小程序

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>


<p class="open-btn" onclick="openWeapp()">打开小程序</p>


<wx-open-launch-weapp id="launch-btn">
    <template>
        <style>
            img{
                width: 100%; 
                height: 100%;
            }
        </style>
        <img src="https://www.domain.com/f7e3.png" />
    </template>
</wx-open-launch-weapp>

if (isWeixin) {
    console.log('isWeixin');
    var launchBtn = document.getElementById('launch-btn')
    launchBtn.addEventListener('ready', function(e) {
        console.log('开放标签 ready')
    })
    launchBtn.addEventListener('launch', function(e) {
        console.log('开放标签 success')
    })
    launchBtn.addEventListener('error', function(e) {
        console.log('开放标签 fail', e.detail)
    })

    $.ajax({
        //请求方式
        type: "GET",
        //请求的媒体类型
        contentType: "application/json;charset=UTF-8",
        //请求地址
        url: 'https://www.domain.com/xxxx/getJsSdkKey',
        //数据,json字符串
        data: {},
        //请求成功
        success: (res) => {
            wx.config({
                debug: false,
                appId: res.appid,
                timestamp: res.timestamp,
                nonceStr: res.nonceStr,
                signature: res.signature,
                jsApiList: [
                    'wx-open-launch-weapp'
                ],
                openTagList: [
                    'wx-open-launch-weapp'
                ]
            })

            wx.ready(function(e) {
                //alert(e)
            });

            wx.error(function(res) {
                alert(res)
            });
        },
        //请求失败,包含具体的错误信息
        error: function(e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    })
}else {
//浏览器
$.ajax({
    //请求方式
    type: "GET",
    //请求的媒体类型
    contentType: "application/json;charset=UTF-8",
    //请求地址
    url: 'https://www.domain.com/wx/pf/urlScheme',
    //数据,json字符串
    data: {
        appid: appid,
        path: '/pages/index/index',
        query: 'id='+id
    },
    //请求成功
    success: (data) => {
        console.log('success')
        console.log(data)
        openLink = data.openLink
        if(openLink){
            window.location = openLink
        }
    },
    //请求失败,包含具体的错误信息
    error: function(e) {
        console.log('err')
        console.log(e);
    }
})
小程序
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。