微信生态-公众号h5跳转app及小程序组件封装

跳转app组件：

<template>
	<view class="load-box">
        <wx-open-launch-app
            id="launch-btn"
            :appid="appID"
            :extinfo="extinfoStrTwo"
            @error="handleError"
            @launch="handleLaunch"
            @ready="handleReady"
            style="display: block; position: fixed; width: 100%;height: 100%; z-index: 1000;"
        >
            <script type="text/wxtag-template">
                <style>
                   .minibtn {
                       position: fixed;
                       width: 100%;
                       height: 100%;
                       /* color: #fff; */
                       background: rgba(0, 0, 0, 0);
                       outline: none;
                       appearance: none;
                       border:none;
                       display: block;
                       z-index: 1001;
                       /* border-radius: 50%; */
                   }
                   .minibtn::before {
                       display: none;
                   }
                   .minibtn::after {
                       display: none;
                   }
               </style>
                <button class="btn-open-app minibtn"></button>
            </script>
        </wx-open-launch-app>
	</view>
</template>

<script>
import wx from 'weixin-js-sdk';
import { getWxSign } from '@/api/publicAPi'
export default {
    name: 'to-bank-component', // 跳转手机银行组件
    props: {
      activeUrl: {
          type: String,
          default: ''
      }  
    },
	data() {
		return {
            appID: 'wx739eddd9abea7adc',
            extinfo: 'sccba866://start?appid=sccba&uri=MBOLD1R9000&param=&sharedparam={"expdParamCntnt":{"jumpTyp":"3"}}',
            extinfoStrTwo: '', //传给APP的参数，用来判断跳转指定页面，可传可不传
            iep_redirect: null
        };
	},
	mounted() {
        // let url = this.activeUrl
        // uri 如果有值，不用encodeURIComponent 866000000ACT20220402144447 
        // /pages/hotActive/puzzleGame/Index?activeId=866000000ACT20220317100621&nodeId=-7&sourceType=013
        this.iep_redirect = sessionStorage.getItem('iep_redirect')
        let shareparam = {
            "expdParamCntnt": {
                "jumpTyp": "6",
                "pgNo": this.activeUrl 
            }
        }
        this.extinfoStrTwo = 'sccba866://start?appid=sccba&uri=&param=&sharedparam='+encodeURIComponent(JSON.stringify(shareparam))
		this.getConfig();
	},
    methods: {
        handleReady(e) {
            // console.log('标签初始化完毕', e)
        },
        handleLaunch(e) {
            // console.log('唤醒launch', e)
            // console.log('唤醒launch', JSON.stringify(e))
        },
        handleError(e) {
            // console.log('唤醒error', e)
            // console.log('唤醒error', JSON.stringify(e))
            // 在此处可设置粘贴板内数据，数据是传递给 app 的参数进，
            // 唤醒失败的情况下，可用于降级处理比如在此处跳转到应用宝
        },
        getConfig() {
            let _this = this;
            let url = window.location.href;
            url = url.split('#')[0];
            url = encodeURIComponent(url);
            //调用后台接口用来获取配置微信config的信息
            getWxSign(url).then(res => {
                wx.config({
                    debug: false,  //测试时候用true 能看见wx.config的状态是否是config:ok
                    // appId: res.appId, // 必填，公众号的唯一标识（公众号的APPid）
                    // timestamp: res.timestamp, // 必填，生成签名的时间戳
                    // nonceStr: res.nonceStr, // 必填，生成签名的随机串
                    // signature: res.signature, // 必填，签名

                    appId: res.data.appId,
                    timestamp: res.data.signTm,
                    nonceStr: res.data.signVefInd,
                    signature: res.data.signData,
                    jsApiList: [
                        // 'onMenuShareTimeline', // 分享给好友
                        // 'onMenuShareAppMessage', // 分享到朋友圈
                        // 'updateAppMessageShareData', // 分享给好友1.4
                        // 'updateTimelineShareData' // 分享到朋友圈1.4
                        'openLocation',
                        "onMenuShareAppMessage"
                    ], // 必填，需要使用的JS接口列表
                    openTagList: [
                        'wx-open-launch-app',
                    ] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                });
                wx.error(function (err) {
                    // console.log('wechat-share文件中出现error');
                })
                            
                wx.ready(function (suc) {
                    // console.log('wechat-share', suc);
                    let btn = null;
                    _this.$nextTick(function(){
                        btn = document.getElementById('launch-btn');
                        btn.addEventListener('launch',(e) => {
                            // console.log('launchZz');
                        });
                        btn.addEventListener('error',(e) => {
                            // console.log('errorZz');
                            if(e) {
                                if (uni.getSystemInfoSync().platform == 'ios') {
                                	//跳转app下载页面
                                } else if (uni.getSystemInfoSync().platform === 'android') {
                                	//跳转app下载页面
                                }
                            }
                        });
                    })
                })
            }).catch(err => {
                // console.log("wx open-weapp error")
            });
        },
    }
};
</script>
<style scoped>
    /* .load-box {
        position: absolute;
        left: 0;
        right: unset;
        top: 240upx;
        width: 90upx;
        height: 90upx;
        z-index: 68;
        border-radius: 50%;
        background-color: #fff;
    } */
    .load-box {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: rgba(0,0,0,0);
        /* background: red; */
        /* overflow: hidden; */
    }
</style>

跳转小程序组件：

<template>
	<view class="load-app-box" v-if="dataMap.isShow">
		<wx-open-launch-weapp class="mini" id="launch-btn1" :appid="props.appid" :username="props.username"
		    :path="props.navToPath" @launch="methodsMap.handleLaunch" @error="methodsMap.handleError" style="left:0;top:0;position: absolute;z-index:67;width: 100vw;height: 50vh;">
		    <script type="text/wxtag-template">
		        <style>
		            .minibtn {
		                position: absolute;
		                z-index: 68;
		                top: 0;
		                left: 0;
		                right:0;
		                bottom:0;
		                width: 100vw;
		                height: 50vh;
                        color: green;
                        background-color: red;
                        outline: none;
                        appearance: none;
                        border:none;
		            }
		            .minibtn::before {
		                display: none;
		            }
		            .minibtn::after {
		                display: none;
		            }
		        </style>
		        <button class="btn-open-weapp minibtn">跳转小程序</button>
		    </script>
		</wx-open-launch-weapp>
	</view>
</template>

<script>
    import { computed, reactive,onMounted,onUnmounted,ref, defineProps } from "vue";
    import wx from 'weixin-js-sdk';
    import { getWxSign } from '@/api/publicAPi'
    const props = defineProps({
        appid: {
            type: String,
            default: '',
        },
        username: {
            type: String,
            default: '',
        },
        navToPath: {
            type: String,
            default: '',
        }
    });
    
    const dataMap = reactive({
        isShow: false,
    })
    const methodsMap = reactive({
        setWxConfig() {
            // console.info('setConfig调用')
            let self = this;
            let url = window.location.href;
            url = url.split('web/?')[0];
            url = encodeURIComponent(encodeURIComponent(url));
            // console.log('跳转小程序组件url：', url)
            getWxSign(url).then(res => {
                console.log('zurl', res)
                wx.config({
                    debug: true,
                    appId: res.data.appId,
                    timestamp: res.data.signTm,
                    nonceStr: res.data.signVefInd,
                    signature: res.data.signData,
                    jsApiList: [
                        'checkJsApi'
                    ],
                    openTagList: [
                        'wx-open-launch-weapp'
                    ],
                    fail: function (err) {
                        // console.log('fail', err);
                    }
                })
                        
                wx.error(function (err) {
                    // console.log('wechat-share文件中出现error');
                })
                        
                wx.ready(function () {
                    dataMap.isShow = true
                    self.$nextTick(() => {
                        let btn1 = document.getElementById('launch-btn1');
                        if (btn1) {
                            btn1.addEventListener('launch', e => {
                                // console.log('success')
                            })
                            btn1.addEventListener('error', e => {
                                // console.log('error')
                            })
                        }
                    })
                })
            }).catch(err => {
                // console.log("wx open-weapp error")
            })
        },
        handleLaunch() {
            // console.log("launch")
        },
        handleError() {
            // console.log("error")
        },
    })
    onMounted(() => {
        // console.log('小程序跳转组件加载！！')
        methodsMap.setWxConfig()
    })
</script>

<style scoped>
    .load-app-box {
        width: 100vw;
        height: 50vh;
        background-color: red;
    }
</style>