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

yufei       2 周, 4 天 前       48

使用 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>

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

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

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

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.