vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼第1/3頁

更新時間：2022年08月07日 11:04:08 作者：_詹某_

本文主要介紹了vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

項目概述

實現(xiàn)類似圖中紅色框框選中可以左右滑動的組件，點擊可以跳轉(zhuǎn)到對應的小程序頁面。

涉及知識點

computed 實現(xiàn)分頁
開放標簽 wx-open-launch-weapp 使用

實現(xiàn)

實現(xiàn)容器

首先我們來實現(xiàn)兩行可以左右滑動的容器。

這邊為了省事，我是選擇了 vue-awesome-swiper@2.6.7：

npm i vue-awesome-swiper@2.6.7 -S
main.js 引入
- import VueAwesomeSwiper from 'vue-awesome-swiper'
- Vue.use(VueAwesomeSwiper)
文件中直接使用

當然了現(xiàn)在我們的頁面并不會非常好看，不過容器部分第一步是實現(xiàn)了。如下所示

computed 實現(xiàn)分頁

接著就是用 computed 來實現(xiàn)分頁，代碼入下

data() {
  return {
    iconList: [
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 1 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 2 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 3 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 4 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 5 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 6 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 7 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 8 },
        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 9 },
      ]
  }
}

computed: {
  pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[ page ]) {
          pages
                            123下一頁閱讀全文
                            
                                您可能感興趣的文章:微信小程序和H5頁面間相互跳轉(zhuǎn)代碼實例
小程序跳轉(zhuǎn)到的H5頁面再跳轉(zhuǎn)回跳小程序的方法
小程序跳轉(zhuǎn)H5頁面的方法步驟
使用vue編寫h5公眾號跳轉(zhuǎn)小程序的實現(xiàn)代碼
微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面方法實例代碼