vue 微信公众号网页开发 跳转小程序 踩坑

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.wxglobalThis.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

回到顶部