uni-app 小程序多端支持的全局页面/全局主键/公共页面实现方式

使用 uni-app 开发小程序、APP或是 H5，总有那么一次需要使用全局组件/公共组件，实现方式呢，有点奇怪。

首先我们要确定的是:

~~不需要在 App.vue 里添加router-view，这没法实现多端~~
~~不需要在 main.js 使用 document ，这也没法实现多端~~
~~app 端不需要创建新的窗口，效果不好，也没法实现多端~~

而我们的实现方式呢，还是挺简单，也挺好理解的，没啥技术含量。就是充分利用 <slot> 和父子组件关系。

1. 首先，在 `components` 目录下创建一个 `ypage.vue` 的组件，内容随意，大概就是下面这样子

<template>
    <view class="rootpage">
        <nonetwork v-if="!vuex_network_ok" />
        <view class="rootpagec" v-show="!!vuex_network_ok"><slot></slot></view>
    </view>
</template>
<script>
    import nonetwork from  './nodata/nonetwork'
    export default {
        components:{nonetwork},
        name:"YPage",
        data() {
            return {};
        }
    }
</script>
<style scoped>
    .rootpage {
        height:100%;
        display:block;
    }
    .rootpagec {
        height:100%;
    }
</style>

其中 <nonetwork /> 组件是一个公共的组件，用来当网络不通时提供信息 你的网络不好啦，赶紧看看网络吧。你可以随意替换成你要的组件。

<style> 里的内容最好保留 height:100% 这个选项。说多了都是泪，某个页面前端傻傻的把 <view> 给重新定义了，气死人啊。

2. 修改 `main.js` 引入和注册组件

// 引入公共组件
import YPage from '@/components/ypage';
Vue.component('ypage',YPage)

ypage 名字你随意，主要是防止重复

3. 使用组件，比如我们的额 `page/index/index.vue` 页面

<template>
    <ypage ref="ypage">
        <template v-slot:default>
            <view>这里就是具体的页面内容了</view>
        </template>
    </ypage>
</template>

好了，就是这么多啦，是不是很简单。这种实现方式我建议趁早，等页面多了改动就复杂了。

当然了，这种方式，垃圾的微信小程序有很多警告

参考来源多端支持的全局引入组件：取巧方法示例

uni-app 小程序多端支持的全局页面/全局主键/公共页面实现方式

1. 首先，在 components 目录下创建一个 ypage.vue 的组件，内容随意，大概就是下面这样子

2. 修改 main.js 引入和注册组件

3. 使用组件，比如我们的额 page/index/index.vue 页面

1. 首先，在 `components` 目录下创建一个 `ypage.vue` 的组件，内容随意，大概就是下面这样子

2. 修改 `main.js` 引入和注册组件

3. 使用组件，比如我们的额 `page/index/index.vue` 页面