VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
在微信中開發(fā)使用vue框架,通過 wx-open-launch-app 微信自定義注冊組件開發(fā) 微信H5打開app功能
template
<template>
<div class="beva-home">
<!-- ===== 微信瀏覽器打開貝瓦APP ===== -->
<div class="weixin-open-app" v-if="openAppState">
<img class="close-icon" :src="icon.close" alt="關(guān)閉" @click="handleCloseOpenAppMask">
<div class="detail">微信端暫不支持音視頻播放,請到APP觀看收聽。</div>
<div class="open-btn" v-if="!wechatState" @click="handleOpenBevaApp">打開貝瓦兒歌APP</div>
<div class="" v-else>
<wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn" appid="wxd8799b17ff675637" extinfo="這里是微信H5傳遞給APP的指定參數(shù)">
<script type="text/wxtag-template">
<style>.btn { display: flex;align-items: center; }</style>
<div class="btn" style="border-radius: 50px;font-size:15px;color:#ffffff;font-weight:700;padding: 0 50px;height:45px;line-height: 45px;background-color: #FF9700;margin: 0 auto;">前往貝瓦兒歌</div>
</script>
</wx-open-launch-app>
</div>
</div>
</div>
</template>
script
<script>
export default {
data() {
return {
wechatState:false, // 是否顯示微信打開app功能按鈕
icon:{
close:require("../../assets/close.png")
},
openAppState:false, // 顯示打開app 的按鈕
}
},
methods: {
/**
* 判斷當(dāng)前的環(huán)境是否為微信環(huán)境且版本大于指定版本
*/
handleJudgeWechat(){
let wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ;
let judgewechat = wechat[1].split('.')
if(judgewechat[0]>=7){
if(judgewechat[1]>=0){
if(judgewechat[2]>=12){
this.wechatState = true
console.log("當(dāng)前符合 h5 打開指定app")
}
}
}
},
/**
* 打開應(yīng)用寶下載頁面
*/
handleOpenBevaApp() {
window.location.
},
/**
* 監(jiān)聽error 函數(shù)
*/
handleErrorFn(e){
this.$data.wechatOpenAppData ="【這里是error 函數(shù)】"+ JSON.stringify(e)
if (e.isTrusted == false) {
// alert("跳轉(zhuǎn)失敗")
window.open("https://a.app.qq.com/o/simple.jsp?pkgname=com.slanissue.apps.mobile.erge&g_f=******")
}
},
/**
* 監(jiān)聽launch 函數(shù)
*/
handleLaunchFn(e){
this.$data.wechatOpenAppData ="【這里是launch 函數(shù)】"+ JSON.stringify(e)
},
/**
* 配置當(dāng)前頁面分享信息
*/
handleWeixinShare(){
this.$weixin.share({
imgUrl: window.location.origin + require("../../assets/logo.png"),
title: "貝瓦兒歌-推薦首頁",
desc: "海量精品課程,盡在貝瓦兒歌APP!",
link: window.location.href
})
},
/**
* 關(guān)閉彈框打開貝瓦兒歌app
*/
handleCloseOpenAppMask(){
this.$data.openAppState = false
},
},
mounted() {
this.handleWeixinShare()
console.log("【貝瓦首頁初始化】")
this.handleJudgeWechat()
// 獲取 homelist 組件傳遞過來的打開app的 顯示狀態(tài)
this.bus.$on("openAPP",res=>{
console.log("open app")
if(res.type){
this.$data.openAppState = true
}
})
}
}
</script>
現(xiàn)在只是再做一個(gè)筆記,后續(xù)等現(xiàn)階段開發(fā)完畢了,在詳細(xì)梳理一下教程??梢钥匆幌滦Ч麍D。
在微信開發(fā)者工具上顯示:開發(fā)者工具由于不滿足微信打開app的版本信息,所以顯示的自己寫的一個(gè)默認(rèn)樣式。

在真機(jī)上顯示:
在真機(jī)上因?yàn)楫?dāng)前環(huán)境版本支持打開app功能,所以當(dāng)前展示的真實(shí)的情況。

總結(jié)
到此這篇關(guān)于VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能的文章就介紹到這了,更多相關(guān)vue開發(fā)微信打開APP內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
- vue使用微信掃一掃功能的實(shí)現(xiàn)代碼
- vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解
- vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能
- vue 授權(quán)獲取微信openId操作
- vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
- vue中解決微信html5原生ios虛擬鍵返回不刷新問題
- vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例
- vue項(xiàng)目中微信登錄的實(shí)現(xiàn)操作
- vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作
- vue調(diào)用微信JSDK 掃一掃,相冊等需要注意的事項(xiàng)
相關(guān)文章
vue中使用過濾器filters的this為undefined的問題
這篇文章主要介紹了vue中使用過濾器filters的this為undefined的問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01
解決運(yùn)行vue項(xiàng)目內(nèi)存溢出問題
這篇文章主要介紹了解決運(yùn)行vue項(xiàng)目內(nèi)存溢出問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例,左側(cè)菜單欄與右側(cè)內(nèi)容部分聯(lián)動(dòng),當(dāng)點(diǎn)擊左側(cè)的菜單,右側(cè)會(huì)展示對應(yīng)的tab,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
Vue登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn)的實(shí)踐分享
這篇文章講給大家詳細(xì)介紹一下Vue如何實(shí)現(xiàn)登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn),文章通過代碼示例介紹的非常詳細(xì),對我們的學(xué)習(xí)或工作有一定的的幫助,需要的朋友可以參考下2023-07-07
詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題
這篇文章主要介紹了詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02

