使用vue编写h5公众号跳转小程序的实现代码
前言：我使用vue编写的h5公众号，实现点击小程序入口，打开小程序，微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。 跳转小程序主要的标签是 wx-open-launch-weapp 第一步在vue项目下public文件夹下的index.html页面，引入微信配置文件，我直接在body标签引入
<body> <noscript> <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- 引入微信配置文件 --> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> </body>
第二步建一个js文件用来存放接下来要 配置的微信配置信息，需要用到微信功能的就可以在那个页面引入就行， 定位地图啥的，都可以，我建的是这样的
然后在这个js文件里面写如下代码：
//获取微信配置信息--跳转小程序、获取定位信息
export function getWxApplets(href){
var that = this;
this.$loading();//加载中
//调用微信方法跳转小程序
this.$axios({//这里是我封装的axios请求，代码就不贴了，你知道这是请求方法就行
url:'这里是后端配置微信信息的接口url，这个没办法帮，找后端看文档琢磨',
data:{
param: href,//当前页
},
callback(res){
that.$loading.close();
//配置参数
wx.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ['wx-open-launch-weapp','getLocation','openLocation'],//跳转小程序、获取定位信息、导航
openTagList: ['wx-open-launch-weapp']//打开的标签名
});
wx.ready(function(){
//微信获取地理位置并拉取用户列表（用户允许获取用户的经纬度）
wx.getLocation({
type: 'gcj02',
success: function (res) {
console.log("--------------获取经纬度",res)
if(res.errMsg == "getLocation:ok"){
//缓存经纬度信息
that.$stor.Set("latitude",res.latitude);
that.$stor.Set("longitude",res.longitude);
}
}
})
})
}
})
}
第三步注意：需要在main.js里面注册这个标签，如下
import {post,getWxApplets} from './common/js/auth.js';//引入工具文件
Vue.prototype.$axios = post;//post方法 请求----这个请求的封装不贴了
Vue.prototype.$getWxApplets = getWxApplets;//获取微信配置信息
Vue.config.ignoredElements = ['wx-open-launch-weapp'];//注册wx-open-launch-weapp组件
第四步页面显示标签，点击跳转小程序，我写 了两种显示方式，都可行，如下： 先调用方法
created(){
var that = this;
var href = window.location.href;//当前页
//调用微信配置方法
this.$getWxApplets(href);
}
第一种显示方式，直接在页面上写：
<ul>
<li v-for="(item,index) in shopInfo" :key="item.id">
<!-- 点击打开外部链接 -->
<div class="img" v-if="item.jumpType != 2">
<img :src="item.image" alt="" @click="linkJump(item)"/>
</div>
<div class="img" v-else>
<img :src="item.image" alt=""/>
<!-- 点击打开小程序 这里跳转小程序是定位图片上，所以用了个div包裹用于定位，wx-open-launch-weapp这个标签只作用里面的东西，里面的css不影响外面的操作，这个标签外面的css也不会作用在这个标签里面-->
<div class="wepp-btn">
<wx-open-launch-weapp id="launch-btn" :username="item.appletsId" :path='item.link'>
<script type="text/wxtag-template">
<style>
.btn {
width: 300px;
height: 140px;
}
</style>
<div class="btn"></div>
</script>
</wx-open-launch-weapp>
</div>
</div>
<p class="p1">{{item.name}}</p>
<p class="p2">{{item.briefIntroduction}}</p>
</li>
</ul>
第二种显示方式，使用的是v-html，js显示： html:
<ul>
<li v-for="(item,index) in quickList" :key="item.id">
<!-- 跳转外部链接-->
<div v-if="item.jumpType != 2"
class="icon"
:style="{backgroundImage:'url(' + item.image + ')'}"
style="background-repeat: no-repeat;background-size:cover;background-position: center center;"
@click="linkJump(item)">
</div>
<!-- 跳转小程序 -->
<div v-else
class="icon"
:style="{backgroundImage:'url(' + item.image + ')'}"
style="background-repeat: no-repeat;background-size:cover;background-position: center center;">
<!-- 点击打开小程序 -->
<div class="wepp-btn" v-html="item.webApp"></div>
</div>
<p>{{item.name}}</p>
</li>
</ul>
js:
//请求菜单列表--快捷入口
var that = this;
that.$axios({
url:'api/find/quickEntry',
callback(res){
if(res.code == 1){
for(var i in res.data){
if(res.data[i].jumpType == 2){
//使用了反引号来将标签转成字符串，字段显示直接用${}
res.data[i].webApp =`<wx-open-launch-weapp id="launch-btn" username="${res.data[i].appletsId}" path="${res.data[i].link}">
<template>
<style>
.btn {
width: 90px;
height: 90px;
}
</style>
<div class="btn"></div>
</template>
</wx-open-launch-weapp>`;
}
}
that.quickList = res.data;
}
}
})
最后由于微信版本问题就写了个简单的判断，我测试过有的微信版本过低，跳转小程序会没有任何动静，控制台会报一个黄色的代码错误说这个wx-open-launch-weapp，也不知道是啥，还以为是ios不兼容，补充：
mounted() {
//是否登录
if(this.ifLogin){
//获取微信版本号
var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
//判断版本号是否匹配
if(parseFloat(wechatInfo[1].split(".").slice(0,3).join("")) < parseFloat("7.0.12".split(".").join(""))){
this.$toast.center('跳转小程序仅支持微信7.0.12及以上版本');
}
}
},
还缺了啥我就不知道了，都是摸爬滚打，上面 有官方文档，再仔细看看吧！！
到此这篇关于使用vue编写h5公众号跳转小程序的文章就介绍到这了,更多相关vue跳转小程序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案
-
vue中使用微信公众号js-sdk踩坑记录
最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈 上文是从官方文档
-
巧用Vue.js+Vuex制作专门收藏微信公众号的app
本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev // run in dev mode cd backend-serv
-
基于vue开发微信小程序mpvue-docs跳转页面功能
打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留
-
Vue开发Html5微信公众号的步骤
一.调起微信支付 在微信浏览器里面打开H5网页中执行JS调起支付,WeixinJSBridge内置对象在其他浏览器中无效. 具体参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 (1)大致流程: (2)调用代码示例: mounted(){ if (typeof WeixinJSBridge == "undefined") { if (document.addEventListe
-
vue项目使用微信公众号支付总结及遇到的坑
微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = data console.log('微信支付开始请求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付签名时间戳 nonceStr: state.payObject.nonceStr, // 支付签
-
使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求:微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 跳转小程序主要的标签是 wx-open-launch-weapp 第一步在vue项目下public文件夹下的index.html页面,引入
-
vue实现微信公众号h5跳转小程序的示例代码第1/3页
目录 项目概述 涉及知识点 实现 实现容器 computed 实现分页 项目概述 实现类似图中红色框框选中可以左右滑动的组件,点击可以跳转到对应的小程序页面. 涉及知识点 computed 实现分页 开放标签 wx-open-launch-weapp 使用 实现 实现容器 首先我们来实现两行可以左右滑动的容器. 这边为了省事,我是选择了 vue-awesome-swiper@2.6.7: npm i vue-awesome-swiper@2.6.7 -S main.js 引入 import Vu
-
python编写微信公众号首图思路详解
前言 之前一直在美图秀秀调整自己的微信公众号首图,效果也不尽如人意,老是调来调去,最后发出来的图片被裁剪了一大部分,丢失部分关键信息,十分恼火,于是想着用python写一个程序,把微信公众号首图的模式固定下来,方便以后写公众号. 思路 根据微信公众号首图要求,可以上传一个不超过5M的图片,且图片尺寸要是2.35:1的尺寸,换算成像素是900:383,有了这些参数就可以做文章了,这里有两种思路 把今天推文的标题(文字)用图片展示出来,使得文字排列错落有致,简单粗暴,而又不失美感,这里可以利用mat
-
微信公众号测试账号自定义菜单的实例代码
自定义菜单接口可实现多种类型按钮,如下: 1.click:点击推事件 用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互: 2.view:跳转URL 用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息. 3.scancode_push:扫码推事件 用户点击按钮后,微信客户
-
微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果. 微信JS-SDK Demo :这个是微信网页分享出去的标题. 微信JS-SDK,帮助第三方为用户提供更优质的移动web服务:这个是被分享的这个页面的分享描述. 微信图标:这个就是自己网站或者自己自定义的图像. 上面这个是微信官方网页分享出去的定义描述,那么怎样实现自己网站网页的自定义分享
-
php实现微信公众号创建自定义菜单功能的实例代码
目的 创建自定义菜单,实现菜单事件. 首先获取Access_Token 接口: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 我用的是测试号,修改APPID和APPSECRET,然后浏览器访问上面这个Url即可生成Access_Token 然后配置菜单的事件,caidan.php <?php header("Content-t
-
微信公众号开发之设置自定义菜单实例代码【java版】
本实例是为了实现在管理后台实现微信菜单的添加删除管理. 1.首先我们需要新建一个数据库表用于存放menu菜单项 可包含的字段有id.父类id.name.排序.是否显示.类型(view.click).链接.adddate 注意后台存menu菜单数据时,parentId=-1为一级菜单,或parendId为一级菜单的id作为该一级菜单下的二级菜单 2.在设置菜单时需要向微信接口传menuJson字符串,所以要先拼接字符串,后台定义一个creatMenu() public bool creatMenu
-
微信小程序web-view环境下H5跳转小程序页面方法实例代码
目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="
-
使用JS编写的随机抽取号码的小程序
刚开始学习JavaScript,写了一个随机抽取号码的小程序,附上body里的所有代码,供大家参考. 本程序可以实现功能如下: 1.在文本框中输入抽号最大值 2.点击按钮,开始抽号,随机生成1~最大值之间的整数 3.已经抽取的号码不能再次抽取到,保证号码的唯一性 4.将号码结果放入result中显示出来 5.将已经生成的号码存入exist中显示出来 具体代码如下: <body> <input type="text" id="txt" placeho
-
小米5s微信跳一跳小程序python源码
本文实例为大家分享了微信跳一跳小程序python源码,供大家参考,具体内容如下 微信跳一跳小程序小米5s源码python,搭建环境后亲测可用. # coding: utf-8 import os import sys import subprocess import shutil import time import math from PIL import Image, ImageDraw import random import json import re # === 思路 === # 核