uni-app subNVue 原生子窗体简单使用案例(app端)

开头先放一些需要大概了解的官方文档链接地址

  https://uniapp.dcloud.io/use-weex

  https://uniapp.dcloud.io/api/window/subNVues

  https://weex.apache.org/zh/docs/api/weex-variable.html

 

1、新建一个 uni-app 项目(使用 Hbuilder X)

 

2、项目结构如下( 在  pages 目录下的 index 目录中,新建一个 subNVue 目录,在此目录中新建一个 hello.nvue 的文件 )

3、hello.nvue 内容如下:

<template>
    <div>
        <text class="hello">{{ content }}</text>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 父窗体传递过来的内容
                content: ''
            }
        },
        created() {
            const vm = this;
            // 接收信息的页面
            uni.$on('page-popup', (data) => {
                switch( data.type ){
                    case 'one':
                        vm.content = data.content;
                    break;
                    case 'two':
                        vm.content = data.content;
                    break;
                    // .... 
                }
            });
        },
        beforeDestroy() {
            
        },
        methods: {

        }
    }
</script>

<style>
    .hello {
        font-size: 30px;
        color: red;
    }
</style>
View Code

4、配置 pages.json 文件

5、index.vue 的内容如下

<template>
    <view class="container">
        <view style="background-color: #0A98D5;
                     text-align: center;
                     line-height: 600rpx;
                     height: 600rpx;
                     margin-bottom: 20rpx;">
            Hello,word
        </view>
        <button @click="openWindows('one')">点击打开子窗体1</button>
        <button @click="openWindows('two')">点击打开子窗体2</button>
        <button @click="openWindows('three')">点击打开子窗体3</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            openWindows() {
                uni.getSubNVueById('popup').show();
                const subNVue = uni.getSubNVueById('popup');
                subNVue.show('',250);
            }
        }
    }
</script>

<style>
    .container {
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }
</style>
View Code

 

6、这时效果如下

如果在子窗体已经增加 一些静态内容并保存后,进行点击打开子窗体操作时,发现还是空白滴........请重启一下....(有可能 Hbuilder X 未同步到文件数据...)

 注意:nvue 文件的代码编写与 vue 文件里的代码稍微有些差异。nvue文件代码编写 请看这里:https://weex.apache.org/zh/docs/api/weex-variable.html

 

7、下面是我做的一些简单例子

 

8、由于.....本人比较懒...就直接放案例的地址吧(GitHub .... 怕访问网速太慢... 也放到 gitee上吧  ),有需要可以看源码,里边也有写注释。

GitHub : https://github.com/oukele/uni-app/tree/main/demo-subnvue/demo-subnvue

Gitee:https://gitee.com/oukele/uni-app-demo/tree/master/demo-subnvue/demo-subnvue

posted @ 2020-10-23 23:52  追梦滴小蜗牛  阅读(7062)  评论(4编辑  收藏  举报