开发必读：盘点与业务转化息息相关的小程序能力（二）

发布于

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

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

  • 短信跳转小程序
  • 公众号跳转小程序
  • 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 等）跳转微信小程序。

参考链接

  • 开放标签说明文档
  • demo体验
  • 静态网站 H5 跳小程序

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) {
// 打开成功
}
})

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

#小程序云开发