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="關閉" @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: { /** * 判斷當前的環(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("當前符合 h5 打開指定app") } } } }, /** * 打開應用寶下載頁面 */ 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) }, /** * 配置當前頁面分享信息 */ handleWeixinShare(){ this.$weixin.share({ imgUrl: window.location.origin + require("../../assets/logo.png"), title: "貝瓦兒歌-推薦首頁", desc: "海量精品課程,盡在貝瓦兒歌APP!", link: window.location.href }) }, /** * 關閉彈框打開貝瓦兒歌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)在只是再做一個筆記,后續(xù)等現(xiàn)階段開發(fā)完畢了,在詳細梳理一下教程??梢钥匆幌滦Ч麍D。
在微信開發(fā)者工具上顯示:開發(fā)者工具由于不滿足微信打開app的版本信息,所以顯示的自己寫的一個默認樣式。
在真機上顯示:
在真機上因為當前環(huán)境版本支持打開app功能,所以當前展示的真實的情況。
總結(jié)
到此這篇關于VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能的文章就介紹到這了,更多相關vue開發(fā)微信打開APP內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
- vue使用微信掃一掃功能的實現(xiàn)代碼
- vue項目中企業(yè)微信使用js-sdk時config和agentConfig配置方式詳解
- vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能
- vue 授權(quán)獲取微信openId操作
- vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
- vue中解決微信html5原生ios虛擬鍵返回不刷新問題
- vue swipeCell滑動單元格(仿微信)的實現(xiàn)示例
- vue項目中微信登錄的實現(xiàn)操作
- vue單應用在ios系統(tǒng)中實現(xiàn)微信分享功能操作
- vue調(diào)用微信JSDK 掃一掃,相冊等需要注意的事項
相關文章
Vue中computed、methods與watch的區(qū)別總結(jié)
這篇文章主要給大家介紹了關于Vue中computed、methods與watch區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-04-04vue項目中如何配置env環(huán)境的實現(xiàn)
本文主要介紹了vue項目中如何配置env環(huán)境的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07