栖岛小程序 - 胶囊按钮使用文档

一、全局接入位置（无侵入、不报错）

直接在 uniapp 项目根目录 App.vue 中添加代码即可，不改动页面逻辑、不影响APP端正常运行、无兼容报错、不干扰原有打包发布流程。

二、直接复制可用代码（极简版）

直接替换粘贴到项目根目录 App.vue，不影响任何原有业务代码、不报错、不影响打包上线。

<script>
export default {
    data() {
        return {
            capsuleModule: null
        }
    },

    // 1. 应用首次启动，初始化胶囊
    onLaunch() {
        this.initCapsule();  
    },

    // 2. 切后台重新回来，自动恢复胶囊（解决消失问题）
    onShow() {
        this.initCapsule();  
    },

    onHide() {},

    // 3. 封装胶囊初始化方法
    methods: {
        initCapsule() {
            this.capsuleModule = uni.requireNativePlugin('QD-CapsuleButton');
            // 容错判断，防止插件不存在爆红报错
            if (this.capsuleModule) {
                this.capsuleModule.show({}, (result) => {
                    console.log('显示胶囊按钮结果:', result);
                });
            }
        }
    }
}
</script>

<style>
    /*每个页面公共css */
</style>

三、配套实操示意图

四、关键适配兜底说明（重点）

• 零副作用：仅在App全局生命周期内执行，不篡改页面路由、不拦截点击事件，全版本uniapp通用
• 容错防报错：内置插件非空判断，插件加载失败也不会闪退、不会控制台爆红报错
• 全场景适配：首次打开常驻显示、后台切回自动复原，适配小程序真机/模拟器全环境
• 原生原生兼容：只调用栖岛官方原生胶囊插件接口，和安卓/iOS打包完全兼容，不影响上架审核

五、基础使用效果

✅ 自动固定展示页面右上角标准胶囊样式

✅ 点击「⋯」快捷查看小程序配套信息

✅ 点击「✕」一键安全关闭当前小程序页面

就这么简单，粘贴即用，全程无BUG！