在抖音短视频上挂载小程 序锚点
收藏简介
该 Codelab 将聚焦在如何在小程序中实现发布抖音视频，以及在抖音视频中挂载小程序。
能力介绍
用户可以通过抖音 App 的短视频发布页，或小程序内集成的“拍抖音”功能发布视频并挂载小程序，发布后的视频就会带上小程序锚点，从而帮助小程序提升流量和转化率。
名词定义
名称 | 定义 | 示例 |
锚点 | 短视频浏览时提供的快捷入口。 | |
小程序锚点 | 锚点点击后，打开的是小程序，则此锚点简称为「小程序锚点」。 | |
拍抖音 | 小程序更多面板 - 拍抖音按钮。 | |
抖音视频拍摄器 | 抖音内的短视频创作工具，入口在主页下方中间的「+」。 | |
挂载 | 这里特指在发布视频时，添加小程序锚点的行为。 | |
最终效果
抖音内拍视频中挂 载锚点
小程序内拍视频挂载锚点
学习内容
- •如何在抖音短视频上展示小程序锚点。
- •如何在小程序内发布抖音视频。
申请短视频 UGC（用户创作）挂载能力
控制台申请
- 1.申请能力。
- 2.满足条件的小程序，「申请开通」按键可点击；不满足条件的小程序，「申请开通」按键置灰，并显示不能申请的原因。
- 3.平台审核
平台会结合小程序应在功能实用性、界面设计、交互体验、稳定性等方面进行评估，审核时间为 2~3 个工作日，审核结果以站内信的形式通知。
开通后，发现开发者在使用过程中滥用此能力，对用户或平台造成负面影响，平台将有权利随时对该功能进行收回，并视情况对违规的小程序进行处罚。
使用服务端接口申请
发布抖音视频并挂载小程 序锚点
本页目标
实现在小程序发布抖音视频并挂载小程序锚点。
前置条件
- 1.拍抖音入口展示和发布抖音视频无需额外权限。
- 2.如果希望能够在最终短视频上挂载小程序；小程序拥有自主挂载权限 & 当前账号是与小程序绑定成功的抖音号小程序拥有短视频 UGC（用户创作）挂载权限上述两个条件拥有一个即可挂载小程序。
发布抖音视频并挂载小程序锚点流程
小程序内拍视频挂载锚点
入口
开发者自定义发布视频 Button 按钮
<button open-type="uploadDouyinVideo">发布抖音视频</button>
更多面板-拍抖音
当满足下面任一条件时，更多面板中会展示「拍抖音」按钮：
- 1.页面中注册了onShareAppMessage 方法。
- 2.页面中注册了 onUploadDouyinVideo 方法，同时全局 app.json 配置中，参考：
{ "publishVideoHookPriorityList": ["onUploadDouyinVideo", "onShareAppMessage"] }
- 3.主动调用tt.hideShareMenu 控制展示更多面板中的「拍抖音」按钮。
视频来源
发布抖音视频包括「拉起拍摄器」和「上传本地视频到抖音」两种方式。
- •「拉起拍摄器」会拉起抖音视频拍摄器，拍摄完成后即可发布。
- •「上传本地视频到抖音」直接使用本地的视频进行发布。
抖音内拍视频中挂载锚点
完成当前代码实现后，也可以 通过主动挂载小程序锚点的方式，将小程序挂载到视频上。
操作路径
抖音视频拍摄器 > 拍摄视频 > 视频发布页 > 添加小程序 > 将此页添加到视频。
代码实现
第一步 配置 app.json
{ "publishVideoHookPriorityList": ["onUploadDouyinVideo", "onShareAppMessage"] }
第二步 实现 onUploadDouyinVideo 方法
完成此步骤后，即可实现「发布抖音视频」和「主动挂载锚点」的功能，达人挂载也可以进行。
Page({ data: {}, async onUploadDouyinVideo(uploadOptions) { return { success: function (res) { // 只有当发布成功且挂载成功时，success 回调才会有 videoId console.log("success: ", res); }, fail: function (res) { console.log("fail: ", res); }, complete: function (res) { console.log("complete: ", res); }, }; }, });
第三步 添加自定义发布视频 Button 按钮
<button open-type="uploadDouyinVideo">发布抖音视频</button>
第四步 决定发布抖音视频方式
onUploadDouyinVideo 方法中不设置 videoPath 参数，会拉起抖音视频拍摄器；设置 videoPath，会上传本地视频到抖音。
- 1.拉起拍摄器。
按照现有的 1、2、3 步骤实现完成时（即不设置 videoPath 参数），可以直接拉起拍摄器。
- 2.上传本地视频到抖音。
<button bindtap="chooseVideo">设置videoPath</button> <button open-type="uploadDouyinVideo">发布抖音视频</button>
Page({ data: { videoPath: undefined }, onUploadDouyinVideo(uploadOptions) { return { videoPath: this.data.videoPath, success: function (res) { // 只有当发布成功且挂载成功时，success 回调才会有 videoId console.log("success: ", res); }, fail: function (res) { console.log("fail: ", res); }, complete: function (res) { console.log("complete: ", res); }, }; }, chooseVideo() { tt.chooseVideo({ sourceType: ["album", "camera"], compressed: true, success: (res) => { this.setData({ videoPath: res.tempFilePath }); }, fail: (err) => { let errType = err.errMsg.includes("chooseVideo:fail cancel") ? "取消选择" : "选择失败"; tt.showModal({ title: errType, content: err.errMsg, showCancel: false, }); }, }); }, });
Demo 工程
获取用户在此路径下发布视频的 videoId
获取 videoId 的条件
- 1.用户视频发布成功。
- 2.小程序锚点挂载成功。
videoId 的应用
如何判断挂载成功
总结
恭喜，你已经完成了抖音短视频上显示小程序锚点的 Codelab。
你在该 Codelab 中了解了：
- •如何在抖音短视频上展示小程序锚点。
- •如何在小程序内发布抖音视频。
