使用链接跳转微信小程序

2023-11-21  本文已影响0人  guaker

2024.1.23 更新
微信小程序规则又改了,URL Scheme 和 URL Link 优化公告

为了帮助开发者更好地为用户提供服务,降低开发者使用 URL Scheme 和 URL Link 的成本,自 2023 年 12 月 19 日起,微信团队将对 URL Scheme 和 URL Link 进行如下优化:
1、新增明文 URL Scheme,开发者无需调用接口可自行拼接并且生成明文 Scheme;
2、取消 URL Scheme 和 URL Link 打开端一人一链的限制,支持同一条链接被多名用户访问;
3、新增打开端限制:每个小程序每天 URL Scheme 和 URL Link 总打开次数上限为 300 万次。


接上篇APP跳转公众号

还是同一个客户的需求,需要在他们公众号网站上打开我们的微信小程序,于是我从公众号官方文档上找到了wx-open-launch-weapp开放标签的代码并发给了客户,但因为客户公众号网站是第三方公司开发的,就问我能不能跟他们其他模块一样添加一个https链接的打开微信小程序。

微信小程序以前是可以在管理后台右上角菜单生成一个永久URL Scheme,后来进行了调整,这个功能就没了。

自 2022 年 4 月 11 日起,URL Scheme有效期最长 30 天,不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Scheme。若在微信外打开,用户可以在浏览器页面点击进入小程序。每个独立的URL Scheme被用户访问后,仅此用户可以再次访问并打开对应小程序,其他用户无法再次通过相同URL Scheme打开该小程序。 在本次规则调整生效前已经生成的URL Scheme,如果有效期超过30天或长期会被降级为30天有效,只能被1个用户访问,开始时间从调整日期开始计算。 详细调整说明可见《小程序链接生成与使用规则调整公告》

那么现在如何通过网页或链接的方式打开微信小程序?有三种方式:

1. 微信内网页可以使用微信开放标签-小程序跳转按钮

2. 通过URL Scheme实现

3.通过URL Link实现

这次主要要讲的是官方推荐的云开发静态网站跳转小程序

官方文档有详细说明和代码,按照文档操作即可。

这里面使用wx-open-launch-weapp开放标签和URL Scheme两种方式进行了跳转,若是在微信内就使用wx-open-launch-weapp打开小程序,微信外打开就调用
getUrlScheme云函数获取URL Scheme打开小程序,pc端则提示“请在手机打开网页链接”

以下是详情操作流程:

1. 下载官方示例代码
打开云开发静态网站跳转小程序点击下载并解压,会有两个文件夹,cloudfunctions和h5,先放着一会使用

image.png

2. 开通云开发
可参考微信小程序云开发获取手机号
按照提示往下操作即可,现在云开发开始收费了,首月免费,后面半价19.9元/月,原价是39.9元/月。

开通云开发

3. 上传云函数
在小程序根目录下创建functions文件夹,或者按照微信小程序云开发获取手机号操作开通云开发和上传云函数。
把刚解压出来的cloudfunctions文件夹中的public文件夹拖入到functions文件夹中,在index.js文件中修改需要跳转小程序的路径。
cloud.init()也可以修改成如下代码,不然上传云函数时会报警告,但不影响使用。

cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV
})

注意:public文件夹名称(就是云函数名)尽量不要修改,不然后面的静态网页中也需要同步修改。

修改跳转小程序路径

project.config.json文件中添加云函数路径"cloudfunctionRoot": "functions/"

设置云函数路径
如果云函数还没有显示出当前环境,静等几分钟,或者重启下开发者工具。
functions后面的环境显示正常后,右键public云函数,选择“上传并部署:云端安装依赖”
上传云函数

在云开发管理后台可查看云函数情况


image.png

4. 修改静态网页
用记事本或者其他工具打开刚解压的h5文件夹中的jump-mp.html文件,搜索

<!-- replace -->

替换小程序AppId和云开发环境ID,保存


image.png

5. 开通静态网站
打开云开发后台,点击更多,点击静态网站,按照提示开通静态网站,需要部署几分钟。

开通静态网站

点击上传文件,上传刚才修改的jump-mp.html文件

image.png

点击详情,复制下载地址到微信聊天窗口中,此时使用这个地址就可以在微信中打开小程序


image.png

在微信外,其他APP或浏览器中打开小程序还需要打开云函数和云资源权限

image.png image.png image.png image.png image.png
上一篇下一篇

猜你喜欢

热点阅读