短信、公众号、H5、APP外部跳转小程序功能盘点

小程序跳转内外部的能力在日常开发中用得非常多,上周为大家分享了小程序跳转到外部的一系列能力,本周继续为大家分享外部跳回小程序的能力。场景和实现方式不一定完全,也欢迎大家补充。

外部跳转小程序功能列表:

  • 短信跳转小程序
  • 公众号跳转小程序
  • H5链接跳小程序
  • APP 跳转到小程序
  • 小程序跳小程序

短信跳转小程序

短信、邮件跳转到小程序的能力是微信官方提供的,主要是是通过 URL Scheme 的方式来拉起微信打开主体小程序。

主要实现分为两个步骤,「配置拉起网页」和「发送短信」。

简单步骤如下:

  1. 登录微信公众平台,并进入小程序管理页面。
  2. 在小程序管理页面,进入“开发”-“开发设置”页面。
  3. 在“开发设置”页面中,找到“认证与服务”一栏,然后点击“网页授权域名”后的“修改”按钮,输入要跳转的链接域名,进行授权。
  4.  在短信中添加链接,链接的格式为:微信小程序
  5. 将链接中的“【小程序页面路径】”替换成所需跳转到的小程序页面路径即可。

参考文档:
短信跳小程序(自定义开发版)
云开发短信跳小程序(无代码版)

公众号跳转小程序

公众号跳转小程序有以下两种方法:在公众号文章中添加小程序卡片,用户点击卡片即可跳转到小程序。

具体步骤如下:

  • 在小程序管理后台中,进入“设置”-“基本设置”-“关联的公众号”,将小程序与公众号进行关联。
  • 在公众号文章编辑页面,选择“小程序”-“添加小程序卡片”,选择要跳转的小程序并设置卡片样式。
  • 发布文章后,用户点击小程序卡片即可跳转到小程序。

在小程序中添加公众号文章链接或二维码,用户扫描二维码或点击链接即可跳转到公众号文章。具体步骤如下:

  • 在公众号中发布文章,并获取文章链接或二维码。
  • 在小程序中添加“web-view”组件,将文章链接或二维码作为“url”属性的值。
  • 发布小程序后,用户点击“web-view”组件即可跳转到公众号文章。

H5链接跳小程序

开放标签

跳转小程序:wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。

开放对象

  • 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合
### Vue 开发的公众号 H5 页面跳转小程序的方法 在Vue项目中实现从微信公众号H5页面向小程序跳转主要依赖于`<wx-open-launch-weapp>`组件以及必要的配置工作。具体来说,在HTML结构里需引入特定的小程序开放标签,并确保这些标签被允许使用。 对于希望集成此功能的应用而言,服务器端返回的数据包内应该含有一个名为`openTagList`的数组属性,其中至少要包含字符串`'wx-open-launch-weapp'`作为其成员之一[^2]。这一步骤是为了告知前端哪些自定义标签是可以安全使用的,从而避免浏览器出于安全性考虑而阻止未知标签的行为。 当上述准备工作完成后,则可以在实际的HTML文档中编写如下所示的按钮元素来触发跳转动作: ```html <!-- HTML --> <button wx:if="{{canUse}}" open-type="launchApp" app-id="__APPID__" path="/page/index">前往小程序</button> ``` 这里需要注意的是,为了使该按钮能够正常运作并成功启动目标小程序,开发者应当替换掉模板中的占位符(即双下划线包围的部分),填入真实有效的应用ID(`__APPID__`)和预期打开的小程序内部路径(path)[^1]。 与此同时,在JavaScript逻辑层面上也需要做一些额处理以增强兼容性和用户体验。下面是一段简单的脚本片段用于说明这一过程: ```javascript // JavaScript (Vue Component Method) methods:{ handleLaunchMiniProgram(){ const appId = 'your-mini-program-appid'; // 替换成自己的小程序appid const pagePath = '/pages/home/home?query=example'; // 可选参数 try { wx.miniProgram.switchTab({ url: pagePath, }); } catch (err){ console.error(err); // 如果失败则尝试另一种方式 window.location.href=`weixin://dl/business/?tousername=${appId}&path=${encodeURIComponent(pagePath)}`; } }, } ``` 这段代码首先试图调用微信内置API `switchTab()` 来平滑过渡到指定的小程序界面;如果遇到异常情况(比如当前环境不支持此类操作),那么就退回到传统的URL Scheme方式进行重定向。这种方式可以有效提升跨平台的一致性体验[^4]。 最后值得注意的是,整个流程的成功执行离不开正确的微信公众账号设置及其关联的小程序授权关系的确立。只有当两者之间建立了合法绑定之后,以上提到的技术手段才能顺利发挥作用[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值