Vue-微信公众号H5跳转小程序史上最全最详细教程(前端)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue-微信公众号H5跳转小程序史上最全最详细教程(前端),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4219字,纯文字阅读大概需要7分钟。
内容图文
![Vue-微信公众号H5跳转小程序史上最全最详细教程(前端)](/upload/InfoBanner/zyjiaocheng/600/f3517caf00744d3d8171184fc64d25f5.jpg)
一、项目需求介绍
中国农业银行云客服公众号-客服大厅,用Vue做的H5页面,有一个需要从H5跳转到小程序的需求,项目完成后,特做此记录,其中遇到很多坑,所以分享到这里以供后来人开发使用。
二、H5跳转小程序全过程
- 项目安装sdk包,进入项目目录,执行 npm i weixin-js-sdk
- Vue main.js 导入如下代码
import wx from 'weixin-js-sdk'
Vue.prototype.wx = wx
Vue.config.ignoredElements = ['wx-open-launch-weapp']
- Vue 项目中 index.html 添加如下代码
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 准备配置小程序,接入sdk。这里我自己封装的一个方法,需要的四个参数全部需要你们自己的后端看文档写接口,然后返回给你,其他的参数jsApiList(wx-open-launch-weapp必须配置,其他看你项目需求)、openTagList(必须写一个wx-open-launch-weapp,用来配置小程序的跳转标签)。后端开发文档点击链接
// 微信跳转小程序-进行配置
const config = ({ appId, timestamp, nonceStr, signature }) => {
wx.config({
debug: true, // 开发的时候打开调试,配置过程会弹窗提示你配置的情况
appId,
timestamp,
nonceStr,
signature,
jsApiList: [
'wx-open-launch-weapp', // 跳转小程序
'getLocation', // 获取定位信息
'openLocation', // 导航
'onMenuShareAppMessage', // 分享给朋友
'onMenuShareTimeline', // 分享到朋友圈
'onMenuShareQQ', // 分享到QQ
'onMenuShareQZone', // 分享到QQ空间
'checkJsApi' // 判断当前客户端版本是否支持指定JS接口
],
openTagList: ['wx-open-launch-weapp']//打开的标签名
})
wx.ready(function () {
console.log('config is success')
})
wx.error(function (err) {
console.log(err)
})
}
- 下面是我的调用后端的一些方法(仅供参考),特别需要注意:const url = window.location.href.split(’#’)[0],这个url配置的是你公众号(不管是测试公众号还是正式公众号)里面设置的js接口安全域名,按照我的url写法到时候传给后端即可。
const getConfig = async () => {
const url = window.location.href.split('#')[0]
let { code, data } = await getSmallProgramConfig(url)
if (code === 200 && data) {
if (data.length === 0) { // JAVA接口没有缓存
getAjaxAPI(`${CSharpURL}/Connect2WeChat.ashx?method=getTokenTicket`, async function (res) {
let {
code,
data: { records },
} = res
if (code === 200) {
const { accessToken, jsapiTicket } = records[0]
let {
code, data
} = await postSmallProgramConfig({ accessToken, jsapiTicket, url })
if (code === 200) {
const { appId, timestamp, nonceStr, signature, } = data[0]
config({ appId, timestamp, nonceStr, signature })
}
}
})
} else { // JAVA接口有缓存
config(data[0])
}
}
}
- 之后进入需要调用小程序配置的Vue组件(不能全局配置,必须哪个组件使用哪个组件配置),这样就小程序配置好了,当你测试公众号页面提示 config:ok时就表示接入sdk成功了。
import { getConfig } from '../utils/global'
其他代码忽略
created() {
getConfig()
},
- 接下来需要配置小程序标签的跳转(Vue项目必须使用script,这个标签必须写),username:要跳转的小程序的原始id,带gh_开头的;
path:要跳转的小程序路径,注意必须在index后面带 .html。
<wx-open-launch-weapp
id="launch-btn"
username="gh_0465670918cc"
path="/subPackages/appointment/index.html?bus_type=0&book_type=1"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
>
<script type="text/wxtag-template">
<div style="width: 100%; height: 76px; opacity:0;">网点业务预约</div>
</script>
</wx-open-launch-weapp>
- 最后调试一下小程序标签的样式(按照你实际项目开发),必须说明的一点是,小程序标签的样式必须将你的代码打包到生产环境,在配置ok的情况下才能显示,其他任何方法都是显示不了标签的。
<div class="AccordionTitle" style="position: relative">
<wx-open-launch-weapp
id="launch-btn"
username="gh_0465670918cc"
path="/subPackages/appointment/index.html?bus_type=0&book_type=1"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
>
<script type="text/wxtag-template">
<div style="width: 100%; height: 76px; opacity:0;">网点业务预约</div>
</script>
</wx-open-launch-weapp>
<div class="AccordionTitleL LEFTTEXT">网点业务预约</div>
<div class="ClickArea">
<img
class="AccordionTitleR LEFTTEXT"
:src="iconImg"
/>
</div>
</div>
- 说一下样式调试技巧,wx-open-launch-weapp标签做一个相对定位,设置它的宽高正好覆盖父标签的宽高,同时让script里面的div设置同样的宽高,并且透明,这样小程序标签就透明的覆盖在上面,非常容易实现跳转。
三、踩坑指南
- 注意 const url = window.location.href.split(’#’)[0]
- Vue使用的标签
` <script type="text/wxtag-template">
<div style="width: 100%; height: 76px; opacity:0;">网点业务预约</div>
</script>`
四、最后寄语
技术实现的过程一定要耐心、谨慎的处理每一步,祝你们好运。
内容总结
以上是互联网集市为您收集整理的Vue-微信公众号H5跳转小程序史上最全最详细教程(前端)全部内容,希望文章能够帮你解决Vue-微信公众号H5跳转小程序史上最全最详细教程(前端)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。