H5跳转微信小程序

Posted 2023-03-18

参考技术A

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地址如果很长，最好能生成短链，这样放在短信中不至于太长。

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

Android App跳转微信小程序

最近，有一个App跳转小程序的需求，参考微信的官方文档，接入还是比较简单的，不过中途遇到了一个坑，所以记录一下。

首先，需要登录微信开放平台 微信开放平台，创建一个移动应用，然后系统会返回一个appid。

需要说明的是，不管是跳转微信小程序还是微信登录、分享，都需要先在微信开放平台注册appId。然后，就可以参考 Android APP拉取小程序的例子，在WebView中调用下面的代码（可以是直接调用，也可以是协议拦截）。

String appId = "wxd930ea5d5a258f4f"; // 填移动应用(App)的 AppId，非小程序的 AppID
IWXAPI api = WXAPIFactory.createWXAPI(context, appId);
 
WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
req.userName = "gh_d43f693ca31f"; // 填小程序原始id
req.path = path;                  拉起小程序页面的可带参路径，不填默认拉起小程序首页，对于小游戏，可以只传入 query 部分，来实现传参效果，如：传入 "?foo=bar"。
req.mini