抖音小程序跳转到其他小程序的能力接入

抖音小程序跳转到其他小程序的能力接入

  1. 小说前端 🧩
  2. 2025-01-03 19:00
  3. 4 min read

写在前面

实践开发环境：依然是基于uniapp+Vue2进行开发，编译到抖音小程序。

能力说明

抖音小程序刚上线时，属于【试运营期】，只可以使用平台提供的基础能力。只有通过【试运营期】后进入【运营期】正式上线的小程序才可以直接使用【跳转小程序】等能力，详情可查看开发者文档小程序「试运营期」能力说明。

这个能跳转到其他抖音小程序的能力，关联的接口包含tt.navigateToMiniProgram及tt.navigateBackMiniProgram。

开发实录

首页呢，我们要先看看tt.navigateToMiniProgram的接口文档，尤其要注意使用限制和注意事项。

配置navigateToMiniProgramAppIdList属性

使用限制：该方法需要预先在 app.json 中配置 navigateToMiniProgramAppIdList 属性。每个小程序可跳转的其他小程序数量限制为不超过10个。

在uniapp的开发中，我们需要在manifest.json的源码视图模式下的mp-toutiao对象下添加navigateToMiniProgramAppIdList属性，值的形式是小程序appid的字符串数组。示例如下：

{
    "mp-toutiao" : {
        "usingComponents" : true,
        "appid": "ttdf123456",
        "setting" : {
            "es6" : true,
            "postcss" : true,
            "minified" : false,
            "urlCheck" : true
        },
        "navigateToMiniProgramAppIdList": ["ttappid01", "ttappid02"]
    }
}

用户主动点击触发的事件回调中使用navigateToMiniProgram

注意事项：跳转需要由用户点击触发，只能在 bindtap 的事件回调中同步使用该 api，并且会弹窗询问是否允许跳转。

注意，使用uniapp开发时，就是在click事件的点击回调中直接使用该API。

template标签中使用示例如下：

<!-- #ifdef MP-TOUTIAO -->
<view class="ucenter-item" @click="handleJumpMp('mini')">
    <text class="text">魔法故事会</text>
    <text class="right"></text>
</view>
<!-- #endif -->

事件定义示例如下：

handleJumpMp(f) {
    if(f === 'mini') {
        uni.navigateToMiniProgram({
            appId: "ttappid01",
            path: "pages/index/index?say=hello",
            success: (res) => {
                console.log('success', res)
            },
            fail: (res) => {
                console.log('fail', res)
            }
        })
    }
}

错误示例：在原始代码中，click点击事件触发时先判断了网络状态，然后再使用该API。

错误事件示例如下：

handleJumpMp(f) {
    uni.getNetworkType().then(({
        networkType
    }) => {
        if (networkType == "none") {
            $uniApi.showToast("网络异常，请检查网络");
            return;
        }
        if(f === 'mini') {
            uni.navigateToMiniProgram({
                appId: "ttappid01",
                path: "pages/index/index?say=hello",
                success: (res) => {
                    console.log('success', res)
                },
                fail: (res) => {
                    console.log('fail', res)
                }
            })
        }
    }) 
}

实践效果

点击按钮，弹窗提示跳转，然后允许后跳转到对应的小程序。

抖音小程序跳转

常见问题

1、错误代码{errMsg: "navigateToMiniProgram:fail must be invoked by user tap gesture", errNo: 21500}

原因：没有在用户点击事件的回调中直接调用navigateToMiniProgramAPI接口，可参考上述错误示例。

2、错误代码{errMsg: "navigateToMiniProgram:fail platform auth deny", errNo: 10101}

原因：先参考错误码：开发者错误,没有申请appid的权限。请查看能力对应文档，申请对应的能力白名单部分，发现是没有对应的能力权限，检查当前运行的小程序是否已经处于【正式运营期】。

uniapp Vue2 小程序 前端