vue实现微信公众号h5跳转小程序的示例代码第1/3页

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

本文主要介绍了vue实现微信公众号h5跳转小程序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

项目概述

实现类似图中红色框框选中可以左右滑动的组件，点击可以跳转到对应的小程序页面。

涉及知识点

computed 实现分页
开放标签 wx-open-launch-weapp 使用

实现

实现容器

首先我们来实现两行可以左右滑动的容器。

这边为了省事，我是选择了 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)
文件中直接使用

当然了现在我们的页面并不会非常好看，不过容器部分第一步是实现了。如下所示

computed 实现分页

接着就是用 computed 来实现分页，代码入下

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页面间相互跳转代码实例
小程序跳转到的H5页面再跳转回跳小程序的方法
小程序跳转H5页面的方法步骤
使用vue编写h5公众号跳转小程序的实现代码
微信小程序web-view环境下H5跳转小程序页面方法实例代码

详解vue 中使用 AJAX获取数据的方法
本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法，在VUE开发时，数据可以使用jquery和vue-resource来获取数据，有兴趣的可以了解一下。
2017-01-01
vue3单文件组件中style特性的深入讲解
单文件就是把一个页面拆分为多个,多层次的组件,通过多层引用,大大缩小vue文件的长度和页面复杂度,下面这篇文章主要给大家介绍了关于vue3单文件组件中style特性的相关资料,需要的朋友可以参考下
2021-09-09
VUE中常用的四种高级方法总结
开发vue项目的时候一般都会开发很多自定义的全局组件,下面这篇文章主要给大家总结介绍了关于VUE中常用的四种高级方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
Vue打包部署到Nginx时,css样式不生效的解决方式
这篇文章主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
解决vue 更改计算属性后select选中值不更改的问题
下面小编就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue如何判断dom的class
这篇文章主要介绍了vue如何判断dom的class,vue点击给dom添加class然后获取含有class的dom文件，具体内容详情大家参考下本文
2018-04-04
谈谈VUE种methods watch和compute的区别和联系
本篇文章主要介绍了谈谈VUE种methods watch和compute的区别和联系，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
用了这么久的Vue3你真的了解Proxy了吗
Proxy是ES6引入的一个新特性，它允许你创建一个代理对象，用于拦截对目标对象的访问，但用了这么久的vue3，你真的懂Proxy吗，本文就来和大家深入聊聊Proxy吧
2023-06-06
vue删除html内容的标签样式实例
今天小编就为大家分享一篇vue删除html内容的标签样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3中使用pnpm搭建monorepo开发环境
这篇文章主要为大家介绍了Vue3中使用pnpm搭建monorepo开发环境示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08