开发

自定义分享

自定义分享页面的配置

宿主可以自定义分享的相关配置,如分享的标题、内容、图标、页面路径等。

在 swan-extension 模块 getShareURL 的返回值中,宿主可以填写自己的分享配置,如 title、content、imageUrl 和 path 等。

举例:如果返回值中定义了如下代码中所示的 imageUrl,当用户调用 openShare API 时,若未传递 imageUrl 参数,则会使用此处配置的'https://www.baidu.com/img/bd_logo1.png?qua=high&where=super'

1
2
3
4
5
getShareURL({appId, scene, title, content, path, imageUrl}) {
return {
imageUrl: imageUrl || 'https://www.baidu.com/img/bd_logo1.png?qua=high&where=super'
}
}

分享中间页

背景

小程序中的分享有三种:小程序、图片、自定义内容,主要介绍下分享小程序,其他两种类型是小程序开发者自己的分享内容。有关分享小程序到第三方渠道(微博、微信等),如果采用统一的分享 URL(分享中间页),将涉及到分享回流到宿主 App(回跳技术复杂,没有统一方案,不好定制)、第三方渠道审核屏蔽问题。需要每家宿主方有自己的分享中间页,各自处理分享回流,第三方渠道审核屏蔽互不影响。

目的

鉴于分享中间页有一定的复杂性,我们提供一个前端 Demo ,方便供宿主方参考,快速开发出自己的一套小程序的分享中间。

设计规范

图片

URL规则

分享 URL 前缀 + 分享 query

  • 分享URL前缀:宿主方在宿主开放平台配置宿主分享回流中间页 shareCallBackUrl ,宿主 Native 端预置宿主配置信息 union-cfg.json
  • 分享 query:百度智能小程序 SDK 会默认拼装。
1
type=0&appKey=rCmYObIH7FGWi9K2pUrNmEuKIG4NhUO5&path

字段介绍:

key value
type 0:小程序;1:小游戏
appKey 小程序或小游戏appKey(百度 App 中使用 appid)
path 小程序页面信息,小游戏没有这个属性,(path 需要 url encode) ,不是必选项

以百度 App 中分享小程序 & 小游戏举例:

  • 分享小程序完整 linkUrl:
1
2
3
4
https://mbd.baidu.com/ma/landingpage?t=smartapp_share&type=0&appKey=rCmYObIH7FGWi9K2pUrNmEuKIG4NhUO5&path=%2fpages%2fart%2fart%3fid%3d15855925%26xid%3d1585

分享URL:https://mbd.baidu.com/ma/landingpage?t=smartapp_share(在宿主开放平台配置)
分享query:type=0&appKey=rCmYObIH7FGWi9K2pUrNmEuKIG4NhUO5&path=%2fpages%2fart%2fart%3fid%3d15855925%26xid%3d1585 (百度智能小程序 SDK 拼接)
  • 分享小游戏完整 linkUrl:
1
2
3
4
https://mbd.baidu.com/ma/landingpage?t=smartapp_share&type=1&appKey=OCCg99E3SmhuCsIF25oNxtmGwLRyLkwp 

分享URL:https://mbd.baidu.com/ma/landingpage?t=smartapp_share(在宿主开放平台配置)
分享query:type=1&appKey=OCCg99E3SmhuCsIF25oNxtmGwLRyLkwp (百度智能小程序 SDK 拼接的)

Demo

代码地址:iOS 开源 demo 工程下的 shareDemo 文件夹下。
当前小程序分享中间页 Demo ,只是提供了一个静态页面,宿主方如果需要以此为模版,涉及两部分改造:

  • 获取小程序消息
    宿主端 server 需要对小程序基本信息查询接口封装一层,给各自的前端调用,获取小程序信息。修改代码如下:
    图片

  • 回流到宿主 App
    点击“打开 xxx App 体验”,回跳到宿主,宿主前端需要在不同渠道、浏览器内核下进行特殊处理,比如:Custom Url 形式、Universe Link 形式(iOS)、DeepLink 形式(Android)。修改代码如下:
    图片