vue 实现H5跳转小程序

vue实现H5跳转小程序

公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅。

适用环境

微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

微信SDK

引入https://res.wx.qq.com/open/js/jweixin-1.6.0.js*（注意要用jweixin-1.6.0.js，低版本不支持，这里掉坑了）*

页面报错找不到模板wx-open-launch-weapp,可以在main.js配置

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

封装request

import axios from 'axios'const request = axios.create({// baseURL: 'http://localhost:8080'
})request.defaults.responseType = 'json'
request.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
request.interceptors.request.use(function (config) {// // 判断用户是否登录const token = window.localStorage.getItem('token')// // 如果用户已登录就为请求接口统一添加用户 tokenif (token) {config.headers.Authorization = 'Bearer ' + token}return config
}, function (error) {return Promise.reject(error)
})
request.interceptors.response.use(function (response) {return response
}, function (error) {return Promise.reject(error)
})export default request

封装接口()

import request from '@/common/js/request'//获取微信配置信息--跳转小程序
export const openWxmini = (info) => {return request({method: 'post',url: '服务器地址',data: info})
}

页面使用

<template><div style="width: 100%; height: 100%;">按钮按钮：<wx-open-launch-weappusername="gh_xxxxxxxx"path="pages/login/main.html?user=123"><script type="text/wxtag-template"><style>.btn { padding: 12px}</style><button class="btn">跳转小程序</button></script></wx-open-launch-weapp></div>
</template><script>
import { openWxmini } from "@/common/js/auth.js";
export default {data() {return {};},created() {const oScript = document.createElement("script");oScript.type = "text/javascript";oScript.src = "https://res2.wx.qq.com/open/js/jweixin-1.6.0.js";oScript.onload = this.get_wx;document.body.appendChild(oScript);},mounted() {},methods: {get_wx() {// 获取授权信息openWxmini({ url: window.location.href }).then(res => {console.log('分享',res)// let { appId, nonceStr, signature, timestamp } = res.data;wx.config({// eslint-disable-linedebug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId:res.data.app_id, // 必填，公众号的唯一标识timestamp:res.data.timestamp, // 必填，生成签名的时间戳nonceStr:res.data.noncestr, // 必填，生成签名的随机串signature:res.data.signature, // 必填，签名jsApiList: ['wx-open-launch-weapp', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo','startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice'],  // 必填，需要使用的JS接口列表openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']});/* eslint-disable */wx.ready(function() {console.log("ready");});});}}
};
</script><style scoped lang="less"></style>

vue 实现H5跳转小程序相关推荐

H5跳转小程序，小程序跳转小程序
一.H5跳转小程序 wx-open-launch-weapp官网文档 jsapi_ticket 生成官方文档 jsapi_ticket加密时官方说url不加#及后面部分,但尝试后会debug报错,加 ...
H5跳转小程序 (成功案例)
H5跳转小程序 (踩坑记-成功案例) 自我的一段独白找到这篇文章之前我相信你也踩了不少坑,遇到了不少bug,请认真阅读步骤,带你走出雾霾:项目的需求是H5跳转微信小程序,H5项目是原生的html方法 ...
微信浏览器跳转小程序php,微信浏览器里面h5跳转小程序
微信浏览器里面h5跳转小程序注意事项,以vue框架为例一.获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({ debug: false, appId: data.ap ...
使用小程序·云开发静态托管实现免鉴权h5跳转小程序
背景微信虽然推出了微信开放标签可以实现h5跳转小程序. 但是,开发者在使用之前要在公众号设置JS接口安全域名,不仅限制个数还限制修改次数,而且在使用之前还得获取access_token.ticket ...
h5跳转小程序、短信跳转小程序＜wx-open-launch-weapp＞干货满满
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档前言由于微信官方限制了URL Scheme跳转,本文实现的是html跳转微信小程序,仅限微信内部调转.如果需要外部跳转微信小程序,可 ...
H5跳转小程序(微信开放标签使用)
今天七月,微信终于提供了H5跳转小程序的功能:果然方便了许多:限制条件也比较宽松吧. 限制条件: 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及 ...
V2微信内外网页H5跳转小程序链接生成系统开发
V2微信内外网页H5跳转小程序链接生成系统开发网页支持H5.服务号.封装app 功能// banner.首页.标题:创建您的链接.功能区.创建链接.选择类型.8种类型.小程序.一个人小程序.公众号. ...
微信公众号H5跳转小程序，wx-open-launch-weapp
直接上干货,不多哔哔~~ 注意事项 : 需要再公众号里面绑定需要跳转的小程序获取jssdk配置的时候需要再公众平台绑定安全域名微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3 ...
h5 跳转小程序微信浏览器不显示跳转按钮
问题:静态页面( h5 页面)跳转小程序,在微信内置浏览器里面没有显示出跳转按钮,但是在其他浏览器则正常显示. 可能有以下一些原因: 1.jweixin.js 版本引入 jweixin.js,需要 ...

vue 实现H5跳转小程序

vue 实现H5跳转小程序相关推荐

最新文章

热门文章