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