h5网页跳转微信小程序

H5网页跳转微信小程序

再次记录下， 通过使用微信开放标签，可便捷的跳转到微信小程序。

官方文档

效果图

请忽略样式， 刚好页面上有分享功能，临时在此页面上展示功能哈。

• debug模式开启后，如成功会弹出如图一所提示， 当触发确定按钮时，页面会展示相关按钮。

• 仔细的你会发现， 安装设备上样式有点不一样哈【最后一张图片】

一、小程序跳转按钮

• 个人项目基于公众号，使用vue框架搭建
• path属性， 需要跳转的小程序页面路径及参数。必须添加.html后缀。【demo：跳转小程序首页，再加上.html即可】
• **注意：**直接在浏览器上查看是没有效果的，可在真机上调试。

<template>
    <div>
        <wx-open-launch-weapp
            id="launch-btn"
            username="gh_xxxxxxxx"
            path="page/tabBar/index/index.html"
            @launch="handleLaunchFn"
            @error="handleErrorFn"
         >
            <script type="text/wxtag-template">
                <style>
                    .btn { 
                    	display: flex;
                        align-items: center;
                        font-size: 30px;
                        border-radius: 30px;
                        background: #fff;
                    }
                </style>
                <button class="btn">打开小程序</button>
            </script>
        </wx-open-launch-weapp>
    </div>
</template>

二、开放标签使用步骤

• 具体的使用步骤文档已说明，这里阐述下个人在项目所应用的。

• 同分享好友、朋友圈方法类似。只需加上需要的JS接口列表、开放标签列表

• 微信分享好友具体使用方法可查看此文章

1. 绑定域名

• 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
• 效果图【只配置使用的域名即可。请忽略如图配置其他项目的域名】

2. 引入js文件

• 这里安装 微信JS-SDK，当然还用其他方式文档已说明。

npm i weixin-js-sdk -S

3. config权限配置及ready处理

• 通过config接口注入权限验证配置并申请所需开放标签
• 调用config接口时建议开启debug模式。页面会alert出错误信息。

getOpenLaunchWeapp() {
    let that = this;
    let params = {
        url: decodeURIComponent(location.href.split('#')[0])
    }
    this.axios.getShareSdk(params).then((response) =>{
        // wx.config(response.data); // 如果后端返回数据格式符号，可直接传入数据，不用单独赋值
        
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: response.appId, // 必填，公众号的唯一标识
            timestamp: response.timestamp, // 必填，生成签名的时间戳
            nonceStr: response.nonceStr, // 必填，生成签名的随机串
            signature: response.signature,// 必填，签名，见附录1
            jsApiList: ['wx-open-launch-weapp'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            openTagList: ['wx-open-launch-weapp'], //可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });

        /**
         * 通过ready接口处理成功验证
         * config信息验证成功后会执行ready方法
         * 需在用户可能点击分享按钮前就先调用
         */
        wx.ready(function() {
            // config验证后会执行ready方法，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
            
            
            // 比如： 分享好友、朋友圈时则在些方法中调用相关的api。
            let shareData = {
                title: '我发现一个不错商品~',
                desc: '好商品值得分享~',
                link: '分享url',
                imgUrl: '分享图片',
            };

            if(wx.onMenuShareAppMessage){ //微信文档中提到这两个接口即将弃用，故判断
                wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
                wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
            }else{
                wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
                wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
            }
        });
        wx.error(res =>{//通过error接口处理失败验证
            // config信息验证失败会执行error函数
            console.log(res);
        });
    })
},

4. 调用方法

mounted() {
    // 获取配置信息
    this.getOpenLaunchWeapp();
},
    
methods: {
    /**
     * 用户点击跳转按钮触发成功
     */
    handleLaunchFn(e){
        console.log('success');
    },

    /**
     * 用户点击跳转按钮出现错误
     */
    handleErrorFn(e){
        console.log('fail', e.detail);
    }
}

解决VUE中警告

如图浏览器会提示相关警告

• 使用开放标签时，出现如图警告！ 在main.js中加入此代码即可。

Vue.config.ignoredElements = ['wx-open-launch-weapp']

注意：

更多请看文档中使用说明

微信版本要求

• 7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

浏览器无法直接查看效果

• 在浏览器中无法直接查看展示的按钮，可在真机上调试