FinClip业务转化相关的小程序能力技术指南

作为小程序开发，日常很大的一部分工作就是满足业务部门的需求，配合业务应用落地、营销活动。以下为大家盘点一下，在日常工作中常常用到的，和营销与业务转化息息相关的小程序能力。

• 小程序跳外部功能列表：
• 小程序跳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、实现小程序抽象业务回调接口IAppletHandler的shareAppMessage方法，并将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);