ap端全局组件如何使用？？？？

那就不应该让他退出页面

写一个公共组件，每个页面都用

全局悬浮Loading搞定，但是现在需要一个背景进程进行文件上传（任意页面打开关闭不会影响到文件上传），并实时更新loading进度。不知道背景进程提交数据怎么写，哪位待审请指教一下。

顺便把全局悬浮Loading的代码给共享一下，有需要的朋友直接拿走使用。
1、/common/mixins.js

export const createGlobalNativePublishFloatViewMixin = {  
    data() {  
        return {  
            globalPublishFloatView: null  
        }  
    },  
    methods: {  
        showGlobalNativePublishFloatView(top) {  
            if (!this.globalPublishFloatView) {  
                const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'  
                this.globalPublishFloatView = new plus.nativeObj.View('publishFloatLoading', {  
                    top: statusBarHeight,  
                    left: '0',  
                    width: '100%',  
                    height: '2px',  
                }, [  
                    {  
                        tag: 'rect',   
                        id: 'viewBg',   
                        position: {  
                            top: '0px',  
                            left: '0px',  
                            width: '100%',  
                            height: '100%'  
                        },  
                        rectStyles: {  
                            color: 'rgba(0, 0, 0, 1)'  
                        }  
                    },  
                    {  
                        tag: 'rect',   
                        id: 'viewLoadingBar',   
                        position: {  
                            top: '0px',  
                            left: '0px',  
                            width: '1%',  
                            height: '100%'  
                        },  
                        rectStyles: {  
                            color: 'rgba(255, 85, 0, 1.0)'  
                        }  
                    }  
                ])  
                this.globalPublishFloatView.addEventListener('click', () => {  
                    console.log('globalPublishFloatView')  
                    uni.switchTab({  
                        url: '/pages/u-center/index'  
                    })  
                }, false)  
                this.globalPublishFloatView.show()  
            } else {  
                this.globalPublishFloatView.show()  
            }  
        },  
        updateGlobalNativePublishFloatView(p) {  
            if (this.globalPublishFloatView) {  
                if (p < 100) {  
                    this.globalPublishFloatView.drawRect({color: 'rgba(255, 85, 0, 1.0)'}, {top: '0px', left: '0px', width: p + '%', height: '100%'}, 'viewLoadingBar')  
                } else {  
                    this.globalPublishFloatView.hide()  
                }  
            }  
        },  
        hideGlobalNativePublishFloatView() {  
            if (this.globalPublishFloatView) {  
                this.globalPublishFloatView.hide()  
            }  
        }  
    }  
}

2、index.nvue（默认首页）

import {  createGlobalNativePublishFloatViewMixin } from '@/common/mixins.js'  
export default {  
    mixins: [ createGlobalNativePublishFloatViewMixin ],  
    onReady() {  
            this.showGlobalNativePublishFloatView()  
            let i = 0  
            let that = this  
            let timer = setInterval(function() {  
                if (i < 99) {  
                    i+=1  
                    that.updateGlobalNativePublishFloatView(i)  
                }  
                if (i >= 99) {  
                    i = 0  
                }  
            }, 100)  
        }  
}

在uni-app中，你可以通过创建一个全局的组件并挂载到app.vue下来实现这个需求。  

1. 在common文件夹下新建一个loading组件  

```vue  
<template>  
  <view v-show="show">  
    <image src="/static/loading.gif" />  
    <text>{{ text }}</text>  
  </view>  
</template>  

<script>  
export default {  
  props: {  
    show: {  
      type: Boolean,  
      default: false,  
    },  
    text: {  
      type: String,  
      default: '正在上传中',  
    },  
  },  
};  
</script>

1. 在app.vue下挂载该组件

<template>  
  <view>  
    <!-- 其他页面内容 -->  
    <loading :show="loadingShow" :text="loadingText" />  
  </view>  
</template>  

<script>  
import Loading from '@/common/loading';  

export default {  
  components: {  
    Loading,  
  },  
  data() {  
    return {  
      loadingShow: false,  
      loadingText: '',  
    };  
  },  
  methods: {  
    showLoading(text) {  
      this.loadingShow = true;  
      this.loadingText = text;  
    },  
    hideLoading() {  
      this.loadingShow = false;  
    },  
  },  
};  
</script>

1. 在全局中使用showLoading和hideLoading方法

在需要上传文件的页面中，你可以通过调用app.vue中的showLoading方法来显示全局的loading组件，然后在文件上传成功或失败后调用hideLoading方法来隐藏该组件。

import app from '@/App.vue';  

export default {  
  methods: {  
    uploadFile() {  
      app.showLoading('正在上传中');  
      // 文件上传代码  
      // 上传成功或失败后调用app.hideLoading()隐藏loading组件  
    },  
  },  
};

这样就可以实现在任何页面上使用全局的loading组件了。需要注意的是，全局组件只能挂载到app.vue下，所以你需要在app.vue中提供一些全局的方法用于显示和隐藏loading组件。