uniapp的一些开发心得用过uniapp的一定有踩过很多坑吧？嗯，今天我们就不说踩坑了。。说下一些全局的操作，我们在使

用过uniapp的一定有踩过很多坑吧？嗯，今天我们就不说踩坑了。。说下一些全局的操作，我们在使用uniapp过程中不能像vue那样在app.vue操作全局的事件，或者添加一个全局的loading的div，监听全局路由跳转，监听app等。最近我再开发中也遇到一个这种问题，就是要加一个左滑返回上一级的操作，想了下，那么多页面要copy到死。。。所以就在想有没有其他简洁的办法，加个全局的，最后想到就是在所有页面都包一层div，然后给这层div加事件就ok了。然后就想到了用组件加插槽来做了，下面是实现的步骤；

1、创建一个组件app-inner.vue,代码如下：

<div class="app-inner">
    <slot></slot> 
</div>

2、在main.js 全局引入组件

import appInner from '../../app-inner.vue'  //引入组件路径
Vue.component('app-inner',appInner);

3、在每个页面最外层包上这个组件（苦力活。。。）

<app-inner>
    <div>
        此处省略100行...
    </div>
</app-inner>

4、这样就完成了，现在就在这个组件添加一些全局的比如loading,tabbar等，如：

<div class="app-inner" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
    <slot></slot>
    <loading v-show="isLoading"></loading>
    <tabbar v-show="isTabbar"></tabbar>
</div>

<script>
    import loading from '../../loading.vue'; //引入加载组件
    import tabbar from '../../tabbar.vue';   //引入tabbar组件
    import  {mapState} from 'vuex';          //引入vuex监听状态
    export default = {
        data(){
            return{
                isTabbar:false
            }
        },
        components:{            
            loadding,
            tabbar
        },
        computed:{
            ...mapState({                
                isLoading:state => state.isLoading //取出状态判断是否正在加载数据            
            })
        },
        methods:{
            touchStart(e){

            },
            touchMove(e){            
            },
           touchEnd(e){         
            },
        },
        mounted(){

        }
    }</script>

5、嗯，差不多就这样了，多踩坑才能越来越强，哈哈哈~