更新记录

1.0.0（2024-01-09）

1.0.0 插件发布

平台兼容性

options参数配置

item 参数配置

event

使用

在app.vue中配置,如果在其他页面中进行配置的话,可能会导致每次进入该页面都会注册一个新的悬浮球

1. 全局通用

如果不需要个别页面隐藏的话,可以直接使用下面方法

1.1 vue2

<script>
// app.vue
    import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
    const options ={
            width:100,
            height:100,
            url:'/static/11.png',
            radius:100,
            moveSpeed:5,
            id:'circleWrap',
            item:[
                {
                    url:'/static/22.png',
                    id:'item1',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item1'
                        })
                    }
                },
                {
                    url:'/static/33.png',
                    id:'item2',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item2'
                        })
                    }
                },
                {
                    url:'/static/44.png',
                    id:'item3',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item3'
                        })
                    }
                },
                {
                    url:'/static/55.png',
                    id:'item4',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item4'
                        })
                    }
                }
            ]
        }
    export default {
        onLaunch:function(){
            new GlobalLevitatedSphere(options)
        },
        created() {

        },
        methods: {

        }
    }

</script>

1.2 vue3

<script setup>
// app.vue
    import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
    import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
    onLaunch(() => {
     new GlobalLevitatedSphere(options)
    });
         const options ={
            width:100,
            height:100,
            url:'/static/11.png',
            radius:100,
            moveSpeed:5,
            id:'circleWrap',
            item:[
                {
                    url:'/static/22.png',
                    id:'item1',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item1'
                        })
                    }
                },
                {
                    url:'/static/33.png',
                    id:'item2',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item2'
                        })
                    }
                },
                {
                    url:'/static/44.png',
                    id:'item3',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item3'
                        })
                    }
                },
                {
                    url:'/static/55.png',
                    id:'item4',
                    width:50,
                    height:50,
                    click:()=>{
                        uni.showToast({
                            title: 'item4'
                        })
                    }
                }
            ]
};
</script>

2. 个别页面隐藏

vue2的话建议使用VueX

2.1 vue2

2.1.1 在vuex中使用

// globalLevitatedSphereStore.js
  import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
const globalLevitatedSphereStore = {
    state: {
        levitatedSphereCtx: null,
    },
    getters: {
        levitatedSphereCcontext(state) {
            return state.levitatedSphereCtx
        }
    },
    mutations: {
        INIT_LEVITATED_SPHERE_CTX(state) {
            const options = {} // 配置项,可以查看上面全局通用案例配置项
            state.levitatedSphereCtx = new GlobalLevitatedSphere(options)
        }
    },
    actions: {
        init_levitated_sphere({
            commit
        }) {
            commit('INIT_LEVITATED_SPHERE_CTX')
        },

    }
}
export default globalLevitatedSphereStore

2.1.2 app.vue中使用

<script>
// app.vue
import { mapActions, mapGetters,mapState,mapMutations } from 'vuex';
    export default {
        onLaunch:function(){
            this.init_levitated_sphere()
        },
        created() {

        },
        methods: {
            ...mapActions([
                'init_levitated_sphere'
            ])
        }
    }

</script>

2.1.3 路由拦截

// uni.promisify.adaptor.js
import store from '@/store/modules/globalLevitatedSphereStore.js'
const white = ['/pages/login/login','/pages/register/register' ]
uni.addInterceptor("navigateTo", {
    invoke(e) {
        if (white.includes(e.url)) {
            store.state.levitatedSphereCtx.hide()
        } else {
            store.state.levitatedSphereCtx.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});
uni.addInterceptor("switchTab", {
    invoke(e) {
        if (white.includes(e.url)) {
            store.state.levitatedSphereCtx.hide()
        } else {
            store.state.levitatedSphereCtx.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});

2.2 vue3

2.2.1 在pinia中使用

// globalLevitatedSphereStore.js
import { defineStore } from 'pinia'
  import GlobalLevitatedSphere from '@/uni_modules/qjp-GlobalLevitatedSphere/js_sdk/qjp-GlobalLevitatedSphere.js';
 const useGlobalLevitatedSphereStoreStore = defineStore('globalLevitatedSphere', {
    state: () =>{
        return {
            levitatedSphereCtx:null
        }
    },
    getters:{
        levitatedSphereCcontext(state) {
            return state.levitatedSphereCtx
        }
    },
    actions: {
        init_levitated_sphere() {
            const options = {}  // 配置项,可以查看上面全局通用案例配置项
            this.levitatedSphereCtx =  new GlobalLevitatedSphere(options)
        }
    }
})
export default useGlobalLevitatedSphereStoreStore

2.2.2 app.vue中使用

<script setup>
// app.vue
    import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
    import useGlobalLevitatedSphereStoreStore from '@/store/modules/globalLevitatedSphereStore.js'
    onLaunch(() => {
        useGlobalLevitatedSphereStoreStore().init_levitated_sphere()
    });
};
</script>

2.2.3 路由拦截

// uni.promisify.adaptor.js
import useGlobalLevitatedSphereStoreStore from '@/store/modules/globalLevitatedSphereStore.js'
import { storeToRefs } from 'pinia';
const globalLevitatedSphere = useGlobalLevitatedSphereStoreStore()
const { levitatedSphereCcontext } = storeToRefs(globalLevitatedSphere);
const white = ['/pages/login/login','/pages/register/register' ]
uni.addInterceptor("navigateTo", {
    invoke(e) {
        if (white.includes(e.url)) {
            levitatedSphereCcontext.value.hide()
        } else {
            levitatedSphereCcontext.value.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});
uni.addInterceptor("switchTab", {
    invoke(e) {
        if (white.includes(e.url)) {
            levitatedSphereCcontext.value.hide()
        } else {
            levitatedSphereCcontext.value.show()
        }
    },
    success(e) {
         console.log('路由拦截e',e)
    },
});

单个悬浮球

单个悬浮球 https://ext.dcloud.net.cn/plugin?id=16026