关于微信浏览器访问app

241 阅读2分钟

1.引入最新版的,微信jdk js包

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

2.配置html

<span class="open"><span>打开APP</span>
    <wx-open-launch-app style="position:absolute;top:0;left:0;right:0;bottom:0;opacity: 0;" id="launch-btn"
        appid="*****" extinfo="your-extinfo">
        <template>
            <style>
                .btn {
                    width100%;
                    padding12px;
                    height150px;
                }
            </style>
            <button class="btn">App内查看</button>
        </template>
    </wx-open-launch-app>
    <script>
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch'function (e) {
            console.log('success');
            console.log(e.detail.errMsg);
            if(e.detail.errMsg.indexOf("fail")!=-1){
                //打开应用商城
                openstore();
            }
        });
        btn.addEventListener('error'function (e) {
            //console.log('fail', e.detail);
            console.log(e.detail.errMsg);
            if(e.detail.errMsg.indexOf("fail")!=-1){
                //打开应用商城
                openstore();
            }
            // alert(e.detail.errMsg);
        });
    </script>
</span>

3.配置微信的权限注入

var imgUrl = 'https://www.foresee-future.com/manager/loge.ico';
var lineLink = window.location.href.split('#')[0];
var lineLinkshare = window.location.href.split('#')[0];
var descContent = '找粮App';
var shareTitle = '打开找粮App';
var shareTitlephone = '打开找粮App';
$.ajax({
    type'POST',
    contentType"application/json;charset=UTF-8",
    url"https://*****/getSignature",
    dataType'json',
    dataJSON.stringify({
        'url': lineLink
    }),
    successfunction (result) {
        if (result.success) {
            configdata = result.data;
            wx.config({
                // debug: true, // 开启调试模式
                appId: configdata.appId// 必填,公众号的唯一标识
                timestamp: configdata.timestamp// 必填,生成签名的时间戳
                nonceStr: configdata.nonceStr// 必填,生成签名的随机串
                signature: configdata.signature,// 必填,签名
                // 必填,需要使用的JS接口列表
                jsApiList: ['updateAppMessageShareData',
                    'onMenuShareTimeline',
                    'updateAppMessageShareData',
                    'wx-open-launch-app',
                    'updateTimelineShareData',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareAppMessage',],
                // 可选,获取开放标签权限
                openTagList: ['wx-open-launch-app']
            });
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: ['wx-open-launch-app'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
                    successfunction (res) {
                        console.log(res)
                        console.log('可用')
                    },
                    fail(err) => {
                        console.log('不可用')
                    }
                })
                wx.updateAppMessageShareData({
                    title: shareTitlephone, // 分享标题
                    desc: descContent, // 分享描述
                    link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    successfunction () {
                    },
                    cancelfunction () {
                        // 用户取消分享后执行的回调函数
                    }
                })
                wx.updateTimelineShareData({
                    title: shareTitle, // 分享标题
                    link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    successfunction () {
                    },
                    cancelfunction () {
                        // 用户取消分享后执行的回调函数
                    }
                });
                // 发送给朋友
                wx.onMenuShareAppMessage({
                    title: shareTitlephone, // 分享标题
                    desc: descContent, // 分享描述
                    link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标 
                    type''// 分享类型,music、video或link,不填默认为link
                    dataUrl''// 如果type是music或video,则要提供数据链接,默认为空
                    successfunction () {
                    },
                    cancelfunction () {
                    }
                });
                // 分享到朋友圈
                wx.onMenuShareTimeline({
                    title: shareTitle, // 分享标题
                    desc: descContent, // 分享描述
                    link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    type''// 分享类型,music、video或link,不填默认为link
                    dataUrl''// 如果type是music或video,则要提供数据链接,默认为空
                    successfunction () {
                    },
                    cancelfunction () {
                    }
                });
                wx.onMenuShareQQ({});
                wx.onMenuShareWeibo({});
                wx.onMenuShareQZone({})
            });
        }
    }
})

4.关于微信浏览器打开App,需要进行的步骤

申请与微信开发平台相同主体的微信公众平台账户,申请为服务号账户,还有开通微信认证

截图 (1).png

该服务号,需要配置js安全域名 IP白名单

image.png

image.png

同时,微信开发平台需要绑定该服务号,微信开发平台也需要绑定APP

image.png

image.png

image.png

引入前端SDK,后端提供接口注入权限,app也需要做相关的配合