vue项目-h5跳转小程序

根据微信的开放标签wx-open-launch-weapp可以实现从h5页面跳转判皮小程序的需求

微信文档地址： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

一、安装weixin-js-sdk

版本要求1.6.0

二、config注入

三、页睁衫面引悉冲腔入

四、vue报错

vue会显示wx-open-launch-weapp组件未注册

在main.js中加入

五、效果展示

Vue是一种轻量级的咐乱JavaScript框架，用于构建交互式web界面。它可以用来构建小程序，为用户提供更好的用户体验。Vue具有简单易用的API和开箱即用的功能，例如虚拟DOM，组件化和单文件组件等。Vue还支持组件化开发方式，可以将小程序拆分成多个组件，使代码更加清晰易于维护。使用Vue构建小程序需要掌握Vue的基敏枣本语法，包括指令，组件，父子组件之间的数据传递等，可以使用Vue-cli的脚手架工具快速构建小程序的基本结构和功能。同时Vue也提供了桥简拆一些小程序相关的插件和工具库，例如mpvue和uni-app，为开发人员提供更便捷的开发体验。

Tips:

Tips:

1、vue2中

2、vue3中，有vue.config.js 的 非vite 项目

3、vue3中，有 vite.config.js 的 vite 项目

4、让后台配合给一个接口，获取微信的config参数

比如node 后台 可参照 node 获取微信签名并使用jssdk

其它语言的随便搜搜都有~

Tips

5、使用开放标签

vue2 中

vue3 中

Tips

由于短信引流成本低，很多公司都使用这样的方式去吸引流量，核心是获取URL Scheme

可查阅 微信官方文档

太长不想看?

核心几点如下:

Tips

如果你这个模板只服务一个短信链接，完全可以写死跳转的url，但是你想搞成通用的，可以像我上面这样封装下，根据类型去不同的小程序。然后URL Scheme也可以向后台实轿亮时获取新的，确保这个中间页的链接是有效的。

由于不再支持永久有效，IOS也走中间页，在中间页动态获取有效的URL Scheme实现跳转

缺点:

这样闭洞宽后台要开发接口配合你来获取该链接，且你的h5地址如果很长，最好能生成短链，这样放在颤激短信中不至于太长。

无公众号直接使用小程序身份开发网页并免鉴权跳转小程序?可以吗?

可以参考 官方文档

---