在微信中開發(fā)使用vue框架，通過 wx-open-launch-app 微信自定義注冊組件開發(fā) 微信H5打開app功能
template
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<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.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("跳轉失敗") 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ā)完畢了，在詳細梳理一下教程。可以看一下效果圖。
在微信開發(fā)者工具上顯示：開發(fā)者工具由于不滿足微信打開app的版本信息，所以顯示的自己寫的一個默認樣式。
在真機上顯示：
在真機上因為當前環(huán)境版本支持打開app功能，所以當前展示的真實的情況。
總結
到此這篇關于VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能的文章就介紹到這了,更多相關vue開發(fā)微信打開APP內容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/WangYC_/article/details/107089709
