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

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

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

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

短信跳转小程序

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

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

简单步骤如下:

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

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

公众号跳转小程序

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

具体步骤如下:

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

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

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

H5链接跳小程序

开放标签

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

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

开放对象

  • 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。


代码用例

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

<script>

  var btn = document.getElementById('launch-btn');

  btn.addEventListener('launch', function (e) {

    console.log('success');

  });

  btn.addEventListener('error', function (e) {

    console.log('fail', e.detail);

  });

</script>

静态网站H5跳小程序

非个人主体并且已认证的(微信认证) 小程序,使用云开发 静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。参考链接

参考链接

App跳转小程序有两种方式

微信 OpenSDK 提供了APP拉起小程序功能。用户可以在 APP 中跳转至微信某一小程序的指定页面,完成服务后再跳回至原 APP 。

1、App主动发起小程序卡片分享到微信

参考文档:

APP拉起小程序功能 /Android开发示例

小程序类型分享示例:

WXMiniProgramObject miniProgramObj = new WXMiniProgramObject();

miniProgramObj.webpageUrl = "http://www.qq.com"; // 兼容低版本的网页链接

miniProgramObj.miniprogramType = WXMiniProgramObject.MINIPTOGRAM_TYPE_RELEASE;// 正式版:0,测试版:1,体验版:2

miniProgramObj.userName = "gh_d43f693ca31f";     // 小程序原始id

miniProgramObj.path = "/pages/media";            //小程序页面路径;对于小游戏,可以只传入 query 部分,来实现传参效果,如:传入 "?foo=bar"

WXMediaMessage msg = new WXMediaMessage(miniProgramObj);

msg.title = "小程序消息Title";                    // 小程序消息title

msg.description = "小程序消息Desc";               // 小程序消息desc

msg.thumbData = getThumb();                      // 小程序消息封面图片,小于128k

SendMessageToWX.Req req = new SendMessageToWX.Req();

req.transaction = buildTransaction("miniProgram");

req.message = msg;

req.scene = SendMessageToWX.Req.WXSceneSession;  // 目前只支持会话

api.sendReq(req);

2、App主动发起打开小程序

参考文档:

分享与收藏功能 /Android开发手册

APP拉起小程序功能 /Android开发示例

小程序类型分享示例

String appId = "wxd930ea5d5a258f4f"// 填应用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.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE;// 可选打开 开发版,体验版和正式版

api.sendReq(req);

小程序跳小程序

在小程序里可以打开另一个小程序,让小程序之间可以互相连接跳转,类似于网页之间通过URL链接互相跳转。

小程序之间互相跳转,使用wx.navigateToMiniProgram来实现。

参考文档:打开另一个小程序

示例代码:

wx.navigateToMiniProgram({

  appId: '',

  path: 'page/index/index?id=123',

  extraData: {

    foo: 'bar'

  },

  envVersion: 'develop',

  success(res) {

    // 打开成功

  }

})

以上外部跳转小程序的功能基本都是基于宿主是微信来实现的,脱离微信小程序跳转的能力是否可以实现呢?答案当然是可以的!技术基本都是相通的。比如,我们团队通过内嵌FinClip 小程序容器,不仅在自己的APP里实现了小程序的运行,也搭建了一个小程序管理的后台,平时的营销活动、业务应用都可以统一管理。小程序在内外部渠道间的跳转的能力在业务落地过程中应用非常广泛。

### 实现公众号 H5 页面跳转至微信小程序的方法 为了使公众号 HTML5 页面能够成功跳转到微信小程序,需遵循特定的技术流程并确保满足必要的条件。 #### 配置业务域名 首先,在微信公众平台上为小程序配置合法的HTML5页面业务域名是必不可少的操作。这一步骤确保了安全性和合法性,使得从小程序内部通过`<web-view>`组件加载外部网页成为可能[^1]。 #### 使用开放标签库与 JSDK 接口 自2020年7月起,微信提供了专门用于H5页面调用微信小程序能力的支持——即利用微信JS-SDK中的开放标签功能完成这一过程。具体来说,开发者可以在HTML文件内引入相应的JavaScript SDK,并按照官方指南注册所需权限接口,从而激活诸如`wx.miniProgram.navigateTo`这样的API函数来触发跳转行为[^2]。 #### 编写前端代码片段 对于采用Vue框架构建的应用场景而言,下面给出一段简单的实例代码展示如何集成上述提到的功能: ```javascript // 引入 Weixin JS-SDK 库 import wx from 'weixin-js-sdk'; export default { mounted() { // 假设已获取到签名等相关参数 const signature = ''; // 此处应替换为你实际获得的数据 wx.config({ debug: false, appId: '', timestamp: '', nonceStr: '', signature, jsApiList: ['navigateToMiniProgram'] }); document.getElementById('jump-to-mini-program').onclick = function () { wx.ready(function(){ wx.navigateToMiniProgram({ appId: '', // 小程序 AppID path: '/page/index', // 所要打开的小程序页面路径 success(res) {}, fail(res) {} }); }) } } } ``` 此,如果是在普通的HTML环境中,则可以直接嵌套如下所示带有指定属性值的开放标签结构于目标位置: ```html <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="/pages/index/index"> <template> <style>.btn{width:100%;height:67px;text-align:center;line-height:67px;background-color:#ff4a3c;color:white;font-size:18px;border-radius:5px;}</style> <div class="btn">立即体验</div> </template> </wx-open-launch-weapp> ``` 以上两种方式均能有效达成由公众号内的Web页面向关联的小程序发起请求的目的,但需要注意的是后者仅适用于已经过认证的服务号环境之下[^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值