• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

记录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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap