技术分享 | 如何实现小程序与App的跳转

提到小程序,大家脑子里第一印象总是微信小程序,现在,FinClip将这种能力“开放”出来,让任意一个App都能运行自己的小程序。

在运行了自己的小程序的同时,很多开发者都想进一步了解,如何实现我自己的小程序、与其他App(特别是微信App)的跳转?

今天,我们将重点缕清这个跳转的逻辑关系与实现方式。

一、FinClip小程序与微信小程序

开篇明义、概念先行。在梳理跳转前,我们有必要再关注一下这些小程序各自是什么。

微信小程序:几乎无需解释,是运行在微信App中的小程序规范

FinClip小程序:

FinClip小程序 = 微信小程序:从技术栈上,一个微信小程序可以直接编译为FinClip小程序,一个代码包在双端(微信App 和 集成FinClip SDK的APP)上,表现是完全一样的

FinClip ≠ 微信:从上架流程上,FinClip是独立平台,有自己的管理后台,用户可集成FinClip SDK后,在自己的APP上运行小程序;同时,微信是一个绝对独立的APP,小程序必须在微信上申请账号、等待审核,全流程由微信(也即腾讯)处理,任何其他第三方都无法干涉

FinClip > 微信:FinClip SDK可以让任何一个App拥有运行小程序的能力,同时也支持将小程序上架至其他主流App平台(如百度、支付宝

 

二、小程序与App跳转的排列组合

基于FinClip能力之后,小程序与App跳转可不只是一种方式、一条路径,我们梳理了如下图所示的6条路径。

接下来,一一看下如何实现吧!

三、如何实现具体的跳转

场景1:微信小程序 — 微信App

场景描述:

这是最最基础的小程序 - App的跳转,实际上,无论是FinClip小程序 - FinClipApp,还是微信小程序— 微信App,实现的都是在自己生态内的内容切换

实现方法:

小程序通过返回、退出操作回到App,App也可以通过定义小程序入口参数的方式,实现进入指定小程序页面的目标

场景2:FinClip小程序—微信App

场景描述:

微信是什么?是当前网络世界最大的公域流量。通过分享到微信,我们可以:

  • 通过小程序的方式承载业务内容、而不是通过H5,可以最大化的保证用户获得最佳的用户体验 举个例子,从App分享H5至微信,用户看到的只有当前H5内的一个页面、一个功能点,用户无法从这个功能点查看整体描述或其他内容; 而小程序不同,小程序可以实现多层级的业务功能,用户也可以直接在小程序内登录、操作、并完成更多、与App相关联的复杂操作
  • 通过小程序实现在微信的裂变分享,为App拉新、促活的难题提供又一个解决方向

实现方法:只需简单几行代码,FinClip App即可分享小程序到微信

在集成了FinClipSDK的APP中实现分享到微信

要实现小程序分享功能,总体思路是先获取到分享小程序所需要的相关信息,然后把获取到的信息转换为分享接口的参数,最后再调用分享接口把小程序分享到对应平台。具体实现方案主要有两种:

1、实现小程序抽象业务回调接口IAppletHandler的shareAppMessage方法,并将IAppletHandler实例传入SDK。

当点击小程序更多菜单中的“转发”时,会调用IAppletHandler实例的shareAppMessage方法,shareAppMessage方法中有小程序信息、小程序页面截图等参数,获取到小程序相关参数之后,便可调用第三方分享SDK实现分享。

shareAppMessage方法如下:

/*** 转发小程序** @param appInfo 小程序信息,是一串json,包含了小程序id、小程序名称、小程序图标、用户id、转发的数据内容等信息。* [appInfo]的内容格式如下:* {*      "appTitle": "凡泰小程序",*      "appAvatar": "https:////www.finogeeks.club//statics//images//swan_mini//swan_logo.png",*      "appId": "5df36b3f687c5c00013e9fd1",*      "appType": "trial",*      "userId": "finogeeks",*      "cryptInfo": "SFODj9IW1ENO8OA0El8P79aMuxB1DJvfKenZd7hrnemVCNcJ+Uj9PzkRkf/Pu5nMz0cGjj0Ne4fcchBRCmJO+As0XFqMrOclsqrXaogsaUPq2jJKCCao03vI8rkHilrWxSDdzopz1ifJCgFC9d6v29m9jU29wTxlHsQUtKsk/wz0BROa+aDGWh0rKvUEPgo8mB+40/zZFNsRZ0PjsQsi7GdLg8p4igKyRYtRgOxUq37wgDU4Ymn/yeXvOv7KrzUT",*      "params": {*           "title": "apt-test-tweet-接口测试发布的动态!@#¥%……&*(",*           "desc": "您身边的服务专家",*           "imageUrl": "finfile:////tmp_fc15edd8-2ff6-4c54-9ee9-fe5ee034033d1576550313667.png",*           "path": "pages//tweet//tweet-detail.html?fcid=%40staff_staff1%3A000000.finogeeks.com&timelineId=db0c2098-031e-41c4-b9c6-87a5bbcf681d&shareId=3dfa2f78-19fc-42fc-b3a9-4779a6dac654",*           "appInfo": {*               "weixin": {*                   "path": "//studio//pages//tweet//tweet-detail",*                   "query": {*                       "fcid": "@staff_staff1:000000.finogeeks.com",*                       "timelineId": "db0c2098-031e-41c4-b9c6-87a5bbcf681d"*                    }*               }*           }*       }* }* [appInfo]中各字段的说明:* appId 小程序ID* appTitle 小程序名称* appAvatar 小程序头像* appType 小程序类型,其中trial表示体验版,temporary表示临时版,review表示审核版,release表示线上版,development表示开发版* userId 用户ID* cryptInfo 小程序加密信息* params 附带的其它参数,由小程序自己透传** @param bitmap 小程序封面图片。如果[appInfo].params.imageUrl字段为http、https的链接地址,那么小程序封面图片* 就取[appInfo].params.imageUrl对应的图片,否则小程序的封面图片取[bitmap]。* @param callback 转发小程序结果回调。*/fun shareAppMessage(appInfo: String, bitmap: Bitmap?, callback: IAppletCallback)

通过调用IAppletApiManager的setAppletHandler(appletHandler: IAppletHandler)方法传入IAppletHandler实例,如下:

FinAppClient.INSTANCE.getAppletApiManager().setAppletHandler(new IAppletHandler() {   @Override   public void shareAppMessage(@NotNull String appInfo,                               @org.jetbrains.annotations.Nullable Bitmap bitmap,                               @NotNull IAppletCallback callback) {       // 实现分享小程序的逻辑       ……………………………………………………      ……………………………………………………   }});

2、通过自定义接口来实现。在自定义接口的invoke方法中接收小程序传递过来的参数,然后调用第三方分享SDK实现小程序分享

场景3:微信小程序 - 自有App(集成FinClip SDK 的App)

场景描述:

引流引流,引到自己家的才叫真“流量”。在微信小程序通过内容、活动吸引到的流量,自然要再回流至自有App的

实现方法:

需要强调的是,从微信到自有App的跳转,主要是受限于微信本身的规定,微信不提供的能力、基本都很难解决。而微信小程序在近期版本中,已经去除了直接“返回App”的入口,目前能通过小程序实现的引流主要是:

在小程序内,引导用户打开客服消息,并在客服信息内回复App下载链接

微信小程序内设置入口 → 引导进入客服信息 → 客服回复下载链接 → 在下载链接内引导至App(或引导用户执行下载) → 在自有App内打开对应内容

 

在小程序内,增加H5页面,通过H5中的“launchApp”实现

 

查阅文档:打开 App | 微信开放文档

在分享时,同步获取当前页面截图,以绘制分享海报

查看文档:如何获取小程序当前页面截图?

场景4:FinClip小程序 —微信—自有App

场景描述:

闭环、闭环,有来有回才叫闭环。通过实现FinClip小程序到微信、再回到App的闭环,活动运营才能完整。

实现方法:

此场景实际是场景3 + 场景4的结合,通过两种方式叠加即可实现。

场景5:其他(短信、邮件、网页等)— FinClip小程序(自有App)

场景描述:

除了微信 - App之间的互跳,任意其他位置也可以实现到小程序和App跳转。举个例子:

  • 当618来临,通过短信、邮件、网页等场景,向这类客户定向推动一个“低至1折福力”,再从福力引导用户回到小程序 或App
  • EDM营销时,总是面临用户触达率不高、转换率更低的问题,如果向用户提供了一个更简短的落地方式,是不是能有效提升转换率?

实现方法:

FinClip小程序支持生产短链,该短链支持从外部唤醒

使用 URL Scheme 打开小程序

小程序支持通过URL Schema的方式打开,在浏览器或者其他应用中打开如"finapplet://applet/appid/xxxx"形式的链接可以打开小程序

其中 finapplet为默认的schema,在App中添加字符串资源

<string name="fin_applet_router_url_scheme">your schema</string>

可以替换默认的schema

url的全部内容为 schema://applet/appid/{appId}?path=xxx&query=xxx

其中{appId}为要打开的小程序id

?后面的部分为打开小程序的参数,参数是可选的,path为要打开的小程序路径,query为打开的参数,格式为a=1&b=2,因为path和query包含特殊字符,需要进行urlencode



来源:春哥技术博客,欢迎分享,转载请注明出处。(欢迎加春哥团队客服微信号:taike668)

本文地址:https://www.cgtblog.com/cgymlt/10604.html
上一篇:基于java后台的微信疫苗接种在线预约      下一篇:uniapp从入门到精通(全网保姆式教程)~