VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
在微信中開發(fā)使用vue框架,通過 wx-open-launch-app 微信自定義注冊(cè)組件開發(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">微信端暫不支持音視頻播放,請(qǐng)到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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
- vue使用微信掃一掃功能的實(shí)現(xiàn)代碼
- vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解
- vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能
- 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 掃一掃,相冊(cè)等需要注意的事項(xiàng)
相關(guān)文章
Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue.js實(shí)現(xiàn)簡(jiǎn)易折疊面板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易折疊面板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10Vue中computed、methods與watch的區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中computed、methods與watch區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中如何配置env環(huán)境的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue入門學(xué)習(xí)筆記【基本概念、對(duì)象、過濾器、指令等】
這篇文章主要介紹了Vue入門學(xué)習(xí)筆記,結(jié)合實(shí)例形式分析了vue.js的基本概念、對(duì)象、過濾器、指令等的相關(guān)原理與簡(jiǎn)單使用方法,需要的朋友可以參考下2019-04-04