写点什么

小程序开发必读:小程序跳转外部的功能盘点

作者:FN0
  • 2023-12-12
    四川
  • 本文字数:2743 字

    阅读完需:约 9 分钟

​作为小程序开发,日常很大的一部分工作就是满足业务部门的需求,配合业务应用落地、营销活动。以下为大家盘点一下,在日常工作中常常用到的,和营销与业务转化息息相关的小程序能力。避免篇幅太长,这个系列将分成一二两期呈现。

小程序跳外部功能列表:

  • 小程序跳 H5 链接

  • 小程序跳 APP

  • 小程序运行在外部 App

  • 小程序分享到微信

  • 添加小程序到桌面

小程序跳 H5 链接

微信小程序跳转 h5 链接通常使用 web-view 当容器,来打开 h5 链接。


方法一:使用微信内置浏览器跳转


小程序内置了微信浏览器组件,可以通过打开一个新的 web-view 页面来实现小程序跳转 H5。具体实现步骤如下:1.在小程序中创建一个按钮或其他交互元素,并为其绑定点击事件。2.在点击事件的回调函数中,使用 wx.navigateToMiniProgram 方法打开一个新的小程序页面,并设置跳转的 H5 页面链接。3.在跳转的 H5 页面中,用户可以浏览更多内容或进行其他操作。


方法二:使用小程序自带的 web-view 组件跳转


小程序提供了一个 web-view 组件,可以在小程序内部打开一个 web 页面。具体实现步骤如下:1.在小程序页面中添加一个 web-view 组件,并设置 src 属性为跳转的 H5 页面链接。2.用户点击小程序页面上的按钮或其他交互元素时,web-view 组件会加载并显示跳转的 H5 页面。


参考文档:

使用web-view

小程序跳 APP

使用 button 组件的open-type=launchApp

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>
复制代码



Page({ launchAppError (e) { console.log(e.detail.errMsg) }})
复制代码

小程序运行在外部 App

小程序脱离微信在其他 APP 中运行通常是通过在 app 内嵌小程序容器来实现。


借用小程序容器技术可以将已开发完成的成熟小程序直接搬到自己的 App 中运行。小程序容器技术主要是将小程序运行沙箱封装成一个 SDK,只需要在你的 App 里面集成,就能加载运行现有的小程序了。我自己常用的是 FinClip SDK, 主要是该技术完全遵循微信小程序的开发标准与规范。也就是说,现有的微信小程序可以不改一行代码,直接放进自己的 App 里面。


参考文档:

iOS集成文档

Android 集成文档

分享小程序到微信

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

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

2、当点击小程序更多菜单中的“转发”时,会调用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 实现小程序分享。

添加小程序到桌面

内嵌到 app 中的小程序同样可以添加到桌面,添加到桌面的能力其实是由 App 实现的,设置方式如下。

 iOS 设置方法

初始化 SDK 时,通过 UI 配置项进行配置,如下:

FATUIConfig *uiConfig = [[FATUIConfig alloc] init];// 屏蔽更多菜单中的“添加到桌面”按钮// 默认值为 YES 隐藏uiConfig.hideAddToDesktopMenu = NO;
复制代码

Android 设置方法

初始化 SDK 时,通过 UI 配置项进行配置,如下:

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();// 是否隐藏更多菜单中的"添加到桌面"按钮// 默认值为 true 隐藏uiConfig.setHideAddToDesktopMenu(false);
复制代码


用户头像

FN0

关注

关注:finoaigc 2021-08-25 加入

stay hungry stay foolish!

评论

发布
暂无评论
小程序开发必读:小程序跳转外部的功能盘点_小程序_FN0_InfoQ写作社区