vue實(shí)現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼第3/3頁
因?yàn)槲覀兡J(rèn)是4個(gè)一行,一頁8個(gè),所以我們將原來的數(shù)組列表稍微更改一下數(shù)據(jù)結(jié)構(gòu),將其變?yōu)閿?shù)組套數(shù)組的套娃模式,根據(jù) innerArray
的個(gè)數(shù)來判斷需要分幾頁。有興趣的朋友可以自己 cv 一下代碼看看實(shí)現(xiàn)效果。
computed
中的 pages
寫好之后我們需要將原來遍歷的 iconList 修改為 pages。
這樣就實(shí)現(xiàn)了可以左右滾動的容器了。
開放標(biāo)簽 wx-open-launch-weapp 使用
接下來是使用微信給我們提供的標(biāo)簽來實(shí)現(xiàn)跳轉(zhuǎn)微信小程序
前置準(zhǔn)備 - 引入 js
在我們使用之前,需要在溫馨公眾平臺里填寫必要的 js接口安全域名
,這里不詳細(xì)說明,有需要的話可以點(diǎn)這里移步查看一下.
如果想在我們的項(xiàng)目中使用微信開放標(biāo)簽的話需要引入相關(guān) js 文件。
我們打開 index.html
,引入相關(guān) js 文件。
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
配置 config
所有需要使用開放標(biāo)簽的頁面必須先注入配置信息,并通過
openTagList
字段申請所需要的開放標(biāo)簽。
這一步需要我們調(diào)用接口,把當(dāng)前頁面的 url 地址傳給后端然后拿到 appId、timestamp、nonceStr 和 signature。然后進(jìn)行相對應(yīng)的配置。
這里不得不吐槽一下,由于后端和我都沒有寫過 h5 跳轉(zhuǎn)小程序相關(guān)內(nèi)容,公司里也是第一次遇到這種需求,一開始就產(chǎn)生了各種非常奇葩的情況。
當(dāng)時(shí)情況是我先給后端把 openId 傳過去,他給我返對應(yīng)的 ticket。接著我把 ticket 傳給后端,他給我返我需要的東西。。。反正最后寫的兩個(gè)人都懵了,還是另一個(gè)還算清醒的后端過來看了下,給我們重新整理了思路,只需要我把 url 給后端就可以了,其余的我不用管,拿值就完事了。
大致代碼如下
let url = window.location.href.slice(0, window.location.href.indexOf('#')) const res = await getSignatureInfo({ url }) wx.config({ debug: false, appId: res.appId, timestamp: res.timestamp, nonceStr: res.nonceStr, signature: res.signature, jsApiList: ['closeWindow'], openTagList: ['wx-open-launch-weapp'] })
配置完成之后可以通過 ready
接口處理成功驗(yàn)證
wx.ready(() => { console.log('success') })
當(dāng)控制臺輸出了 success
之后,我們配置這一塊就成功了
wx-open-launch-weapp 使用
wx-open-launch-weapp
標(biāo)簽用起來其實(shí)很簡單
<wx-open-launch-weapp :username="item.originalId" :path="`${item.pageUrl}?phone=${user.phone}`" > <script type="text/wxtag-template"> code... </script> </wx-open-launch-weapp>
將需要跳轉(zhuǎn)小程序的原始 id 和需要跳轉(zhuǎn)到哪個(gè)路徑寫一下就完事了。這里比較坑的是樣式問題。
處理樣式
我們這里的跳轉(zhuǎn)需要根據(jù)后端傳的一個(gè) appType 判斷是跳轉(zhuǎn)到另外的 h5 或者 公眾號 或者 小程序。
本來我的思路是直接循環(huán),判斷當(dāng)前 app 是否是跳轉(zhuǎn)小程序,如果是就渲染 wx-open-launch-weapp
,否則渲染普通的 div
標(biāo)簽。
但是這里有個(gè)大坑,wx-open-launch-weapp
這個(gè)鬼東西里面 script
寫的 dom 元素是沒辦法使用 rem 的。等于說只要是小程序跳轉(zhuǎn)類型的 icon 大小都會和另外兩個(gè)類型的大小有一些細(xì)微的差別。這種差別在正常手機(jī)上看倒是還好,但是只要用 pad 打開那直接爆炸。而且這個(gè)標(biāo)簽還必須在真機(jī)上用微信打開才能調(diào)試,等于只要我有一些改動,不論大小都要先上傳測試環(huán)境然后再嘗試效果,總之就是極其之坑。
花了一點(diǎn)功夫網(wǎng)上沖浪尋找辦法最終找到一個(gè)我個(gè)人認(rèn)為最好的辦法 -- 蒙層。
.icon { width: 25%; float: left; overflow: hidden; text-align: center; margin-bottom: .22rem; }
通過浮動 + 相對定位的方法把所有 icon 在 .common_component
元素中渲染出來,然后還是通過 v-if
來判斷當(dāng)前 icon 是否是需要跳轉(zhuǎn)小程序的,如果是就展示。和之前唯一的區(qū)別就是我們將開放標(biāo)簽中的內(nèi)容提了出來,標(biāo)簽中只有一對 div 元素,樣式就是絕對定位,寬高 100%并提高一下 z-index
的值。
這樣就可以完美實(shí)現(xiàn)我們需要的功能了。
到此這篇關(guān)于vue實(shí)現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼的文章就介紹到這了,更多相關(guān)vue 公眾號跳轉(zhuǎn)小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!