前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >开发必读:盘点与业务转化息息相关的小程序能力

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

原创
作者头像
海岛船长加西亚
修改2023-12-12 14:45:19
1530
修改2023-12-12 14:45:19
举报

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

小程序跳外部功能列表:

  • 小程序跳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

代码语言:javascript
复制
<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>
代码语言:javascript
复制
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方法如下:

代码语言:javascript
复制
/**
* 转发小程序
*
* @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实例,如下:

代码语言:javascript
复制
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配置项进行配置,如下:

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

Android 设置方法

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小程序跳外部功能列表:
  • 小程序跳H5链接
  • 小程序跳APP
  • 小程序运行在外部App
  • 分享小程序到微信
  • 添加小程序到桌面
    • Android 设置方法
    相关产品与服务
    云开发 CloudBase
    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档