uniapp H5唤起APP跳转指定页面 wx-open-launch-app
引微信js-sdk 可以用 npm 安装 (npm install weixin-js-sdk --save)配置wx.config 信息一定要正确1.在根目录common文件下新建wechat.js 配置wx.config//引入js-sdkimport wx from ‘./jweixin.js’//jweixin.js是我自己新建的js,内容为引入的微信sdk的复制版//引入request(
·
引微信js-sdk 可以用 npm 安装 (npm install weixin-js-sdk --save)
配置wx.config 信息一定要正确
1.在根目录common文件下新建wechat.js 配置wx.config
//引入js-sdk
import wx from '@/node_modules/weixin-js-sdk/index.js';
//引入request(可以直接用uni.request)
export default {
getConfig() {
WxOpenApp({ //调用后台接口用来获取配置微信config的信息
targetUrl: 'https:/xxx.xxx.xxx/share/' //传给后台的参数
}).then(res => {
wx.config({
debug: false, //测试时候用true 能看见wx.config的状态是否是config:ok
appId: res.data.appid, // 必填,公众号的唯一标识(公众号的APPid)
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.noncestr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: [
'onMenuShareTimeline', // 分享给好友
'onMenuShareAppMessage', // 分享到朋友圈
'updateAppMessageShareData', // 分享给好友1.4
'updateTimelineShareData' // 分享到朋友圈1.4
], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
});
}
}
新建一个唤起APP的组件 load.vue
<template>
<view>
<wx-open-launch-app id="launch-btn" appid="需要唤起app的appid" :extinfo="extinfoStrTwo">
<script type="text/wxtag-template">
<button style="margin-top: 30rpx!important;font-size: 32rpx;">APP内打开</button>
</script>
</wx-open-launch-app>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
extinfoStrTwo: String //传给APP的参数,用来判断跳转指定页面,可传可不传
},
mounted() {
setTimeout(() => {
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', e => {
// 在此处可设置粘贴板内数据,数据是传递给 app 的参数进,
});
btn.addEventListener('error', e => {
// 在此处可设置粘贴板内数据,数据是传递给 app 的参数进,
if (uni.getSystemInfoSync().platform == 'ios') {
location.href = 'http://itunes.apple.com/app/id1541793795';
} else if (uni.getSystemInfoSync().platform === 'android') {
location.href = 'http://app.xiaomi.com/detail/1276426';
}
// 唤醒失败的情况下,可用于降级处理比如在此处跳转到应用宝
});
}, 1000);
}
};
</script>
在main.js全局注入
import upload from './components/load.vue'
// #ifdef H5
import wx from './common/jweixin.js'
import wechat from './common/wechat.js'
Vue.prototype.$wx = wechat
// #endif
Vue.component('upload', upload)
在需要唤起APP的H5页面调用load组件
<template>
<view>
<upload :extinfoStrTwo="extinfoStrTwo"></upload>
</view>
</template>
data(){
extinfoStrTwo: ' ' //传给APP的参数,用来判断跳转指定页面,可传可不传
},
onLoad(){
this.extinfoStrTwo = 'dakaDetail/' + '111';
}
app的启动页 ,接到参数判断跳转指定页
plus.globalEvent.addEventListener('newintent', e => {
// plus.runtime.argumrnts为打开时APP传的值(<wx-open-launch-app>中的extinfo),可以传字符串通过符号截取判断类型
if (plus.runtime.arguments) {
//我截取了字符串,判断是商品并且根据ID跳转到商品详情页
var str = plus.runtime.arguments;
var arr = str.split('/');
if(arr[0] == 'dakaDetail') {
uni.navigateTo({
url: '/pages/tabbar/tabbar-1/dakaDetail/dakaDetail?professorId=' + arr[1]
});
}
}
});
更多推荐
已为社区贡献15条内容
所有评论(0)