您好,登錄后才能下訂單哦!
小編給大家分享一下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" >前往貝瓦兒歌</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)前符合 h6 打開指定app") } } } }, /** * 打開應(yīng)用寶下載頁面 */ handleOpenBevaApp() { window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.slanissue.apps.mobile.erge&g_f=******" }, /** * 監(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í)的情況。
看完了這篇文章,相信你對VUE使用wx-open-launch-app組件如何開發(fā)微信打開APP的功能有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。