更新记录

1.0.0（2023-12-22）

1.0.0发布

平台兼容性

参数

options参数配置

viewStyle参数配置

event

使用

vue2

可以在app.vue中直接配置,也可以在首页配置

<script>
// app.vue
    import initLevitatedSphere from '@/uni_modules/qjp-levitatedSphere/js_sdk/qjp-levitatedSphere.js';
    const options = {
        viewStyle: {
            width: 100,
            height: 100
        },
        moveSpeed: 100,
        url: '/static/logo.png',
        isMove: true
    }
    export default {

        created() {
            initLevitatedSphere(options, this.clickHandler, true);
        },
        methods: {
            clickHandler(res) {
                if (res.type == 'click') {
                    console.log('click', res);
                    uni.showToast({
                        title: '点击事件!'
                    });
                }
                if (res.type == 'move') {

                    console.log('move', res);
                }
            }
        }
    }

</script>

vue3

可以在app.vue中直接配置,也可以在首页配置

<script setup>
// app.vue
    import initLevitatedSphere from '@/uni_modules/qjp-levitatedSphere/js_sdk/qjp-levitatedSphere.js';
    import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
    onLaunch(() => {
        console.log('App Launch');
        initLevitatedSphere(options, clickHandler, true);
    });
      const options = {
        viewStyle: {
            width: 100,
            height: 100
        },
        moveSpeed: 100,
        url: '/static/logo.png',
        isMove: true
    }
    const clickHandler = (res) => {
    if (res.type == 'click') {
        console.log('click', res);
        uni.showToast({
            title: '点击事件!'
        });
    }
    if (res.type == 'move') {

        console.log('move', res);
    }
};
</script>

自定义打开悬浮球

如果需要自定义打开悬浮球的话

可以在你需要的页面进行配置,如果需要多个页面进行控制打开的话,可以把获取的实力对象放在pinia或者vuex中,去操作实力对象中的方法, 这里只展示如何获取实力对象和自定义打开/关闭悬浮球的方法

打开悬浮球: activeCtx.value.show() // 记得使用实力方法的时候外层一定要try()catch()

关闭悬浮球:activeCtx.value.hide()

记得第三个参数赋值为false

<script setup>
    import initLevitatedSphere from '@/uni_modules/qjp-levitatedSphere/js_sdk/qjp-levitatedSphere.js';
    import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
    import {ref,onCreated} from 'vue'
    onCreated(() => {

      activeCtx.value = initLevitatedSphere(options, clickHandler, false);
    });
    const activeCtx = ref()

    const clickHandler = (res) => {
    if (res.type == 'click') {
        console.log('click', res);
        uni.showToast({
            title: '点击事件!'
        });
    }
    if (res.type == 'move') {

        console.log('move', res);
    }
};
</script>