vue如何實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序

今天小編給大家分享一下vue如何實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

涉及知識(shí)點(diǎn)

• computed 實(shí)現(xiàn)分頁(yè)

• 開(kāi)放標(biāo)簽 wx-open-launch-weapp 使用

實(shí)現(xiàn)

實(shí)現(xiàn)容器

首先我們來(lái)實(shí)現(xiàn)兩行可以左右滑動(dòng)的容器。

這邊為了省事，我是選擇了 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)

• 文件中直接使用

  

當(dāng)然了現(xiàn)在我們的頁(yè)面并不會(huì)非常好看，不過(guò)容器部分第一步是實(shí)現(xiàn)了。如下所示

computed 實(shí)現(xiàn)分頁(yè)

接著就是用 computed 來(lái)實(shí)現(xiàn)分頁(yè)，代碼入下

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

computed: {
  pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[ page ]) {
          pages123下一頁(yè)閱讀全文

以上就是“vue如何實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。