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>

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>

 

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