vue 微信公众号网页开发 跳转小程序 踩坑
记录vue3(vue2 也通用)在微信公众号网页开发中,跳转微信小程序的踩坑:
步骤一:使用微信JSSDK
微信JSSDK官方说明,估计找到这篇文章的都看了文档。
不多说,在这个步骤中,后端和前端都有各自的事情做,我分别讲解各自的责任:
前端责任
引入js文件,直接在 index.html 中引用就成:
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
引入过后,你当前的浏览器环境会有一个全局变量wx
(直接wx
访问,或者window.wx
、globalThis.wx
都是可以的),但是这个变量不能马上用,必须你将当前网页的路径(不包括#号以及后面的路径,包括#号前面的那个斜杠 / )传给后端,后端根据你传的路径返回给你 appId、timestamp、nonceStr、signature,然后根据这些参数调用 wx.config
,进行wx
的初始化:
wx.config({ debug: true, // 调试的时候打开
appId: \'\', // 后端的事情
timestamp: \'\', // 后端的事情
nonceStr: \'\', // 后端的事情
signature: \'\',// 后端的事情
jsApiList: [] ,// 需要的能力,比如拍照、获取信息等等,跳转小程序不需要
openTagList:[] // 能够使用的标签,也就是HTML标签,只不过是微信自定义的。
});
有哪些标签,看这里。
由于跳转小程序需要一个微信自定义的标签wx-open-launch-weapp
,所以上面的配置中的 openTagList 我是这样的:
openTagList:[`wx-open-launch-weapp`]
配置后,就可以在微信中网页中使用了
后端责任
我简单讲解:
保证微信开发是服务号,而不是订阅号,因为只有服务号才能小程序跳转。
首先得后端绑定域名,向微信平台获取访问凭证access_token
,根据这个凭证再次访问微信平台得到jsapi_ticket
。
然后,根据前端传来的路径基于jsapi_ticket
进行加密,加密请看微信JSSDK官方说明。
注意,vue开发的网页,基本都是单页面应用,比如 http://aa.baidu.com/#/aa
,那么后端需要的路径就是:http://aa.baidu.com/
,注意需要最后的/
是需要的,这是我踩的坑,不然前端配置初始化会失败。所以,单页面应用写死路径也可以。
还有路径写死的话,前端就不能在本地开发了,比如以http://localhost:8080/#/home
这种,那前端也会失败。所以可以内网穿透,并代理前端的内网地址,将代理的域名添加白名单,然后以域名的形式访问进行调试,就可以了。
步骤二、跳转小程序
wx
配置后,就可以使用微信内置的HTML标签了,官方的示例是这样的:
<wx-open-launch-weapp id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
在vue2中可以用v-html渲染。但是在vue3中会编译出错,因为在 vue 的 template 中,不允许 script 和 style 出现。而 wx-open-launch-weapp 会有警告,但是可以渲染。
我们需要vue跳过对内部 script 和 style 的渲染:
<wx-open-launch-weapp id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<div v-is="script" type="text/wxtag-template" style="display: block">
<div v-is="style" style="display: block">.btn { padding: 12px }</div>
<button class="btn">打开小程序</button>
</div>
</wx-open-launch-weapp>
v-is 会将其渲染成指定标签,但是vue 3.1.0版本已经废弃,将 v-is 替换成 is 就可以了,比如上面的样式在高版本的vue3中可以这么写:
<div is="style">.btn { padding: 12px }</div>
常见问题:
- 样式不出现,设定的div或者按钮不出现,注意上面的设置
style="display: block"
,这个是必须的,不然其渲染生成的会默认display: none
- 按钮点击没有反应,注意
wx.config
后会在控制台输出信息:,注意到只有 jsApiList,而没有 openTagList ,或者只是一个空数组,没有["wx-open-launch-weapp"]
。注意这个功能只有服务号才有,订阅号是没有的。或者,不能用测试号小程序id,必须已经发布的小程序id
以上是 vue 微信公众号网页开发 跳转小程序 踩坑 的全部内容, 来源链接: utcz.com/z/375253.html