跳转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¶m=&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=¶m=&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>