subNVues nvue 页面开发指南（map,video组件必备技能）

这是我参与更文挑战的第11天，活动详情查看：更文挑战

遇见的bug: 当重复进入nvue页面时，nvue页面多次重复创建，主要是没有触发beforeDestroy的销毁。
解决方式：退出页面时，关闭当前页面，重新打开一个新页面，利用uni.redirectTo解决。

subNvues需要在pages.json文件配置：

"path": "pages/garbage/job/coverage",
"style": {
    "app-plus": {
        "nvueStyleCompiler": "uni-app",// 编译方式
        "subNVues": [{
            "id": "coverageLegend", // 唯一标识  
            "path": "/pages/garbage/job/coverageLegend", // 页面路径  
            "style": {
                "position": "fixed",
                "bottom": "5px",
                "left": 0,
                "width": "220px",
                "height": "170px",
                "z-index": 10000000,
                "mask": "rgba(0,0,0,0)",// 遮罩层透明
                "background": "transparent",// 透明背景
                "style": {
                    "popGesture": "none" // 组织侧滑返回, none,close
                },
              //  "type": "popup" //  subNVues类型
            }
        }]
    }
}
复制代码

nvue 页面

<template>
    <view id="coverageLegend">
        <text>
                {{title}}
        </text>
    </view>
</template>
<script>
    export default {
        created() {
            // #ifdef APP-PLUS
            // 子页面获取方式
            const subNVue = uni.getCurrentSubNVue();
            uni.$on('to-modal3', data => {
                if (data) {
                        const arr = JSON.parse(data)
                        for(let i in arr) {
                                this.formData[i] = arr[i]
                        }
                }
                console.log('map组件收到的值', this.formData.markers);
            });

            // #endif
	},
	beforeDestroy() {
            // 页面销毁之前 移除监听器
            // #ifdef APP-PLUS
            uni.$off('to-modal3');
            // #endif
            this.formData = {};
	},
        methods: {
            toFather() {
                    uni.$emit('modal-change3', '我是传递给父组件的值');
            },
         }
    }
</script>
复制代码

coverage页面

onLoad(params) {
    const _this = this;
    // #ifdef APP-PLUS
    uni.$on('modal-change3', data => {
            console.log('父组件接收到子组件的值',data)
            this.subNvueMap = uni.getSubNVueById('coverageLegend');
            this.subNvueMap.setStyle({
                    height: _this.mapHeight + 'px'
            });
    });
    // #endif
},
mounted() {
     this.toSon()
},
methods: {
    toSon(time = 200) {
        // #ifdef APP-PLUS
        this.subNvueMap = uni.getSubNVueById('coverageLegend');
        let obj = {
                latitude: this.formData.latitude,
                longitude: this.formData.longitude,
                markers: this.markers,
                polylines: this.polylines
        };
        console.log('toson',obj.markers)
        this.subNvueMap.setStyle({
                height: '50%'
        });
        this.showInfo = true
        uni.$emit('to-modal3', JSON.stringify(obj));
        this.subNvueMap.show('slide-in-bottom', time, () => {
                // console.log('显示subNvueMap');
        }); // 显示
        // #endif
    },
    back() {
        // 页面返回关闭当前页面，打开一个新页面，触发nvue页面的beforeDestroy
        uni.redirectTo({
            url:'/pages/garbage/appointmentRecovery/record/list'
        })
    },
}
复制代码

nvue 页面空白空白，样式注意点：

1、nvue 页面默认使用 flex 布局，并且只能使用flex布局。

2、布局不能使用百分比、没有媒体查询。

3、选择器仅支持class 选择器

/* 错误 */

#id {}

.a .b .c {}

.a > .b {}

/* 正确 */
.class {}
复制代码

4、不支持使用简写，如border、background

5、nvue 页面控制显隐只可以使用v-if不可以使用v-show

6、h5正常app异常的标签使用

body ==>page

div ul li  ===>view 

span   ===> text  文字必须在text标签修改样式才会起作用

a  ===> navigator

img ===> image
复制代码

7、怎么设置高度100%

flex: 1 可充满屏幕高度，使用 flex: 1 2 3... 设置百分比
复制代码

8、怎么设置宽度100%

如果是要设置宽度100%的话可以使用750rpx，nvue页面750rpx宽度默认为屏幕宽度全屏。
复制代码

9、报错解决WARNING: display is not a standard property name (may not be supported)

将警告样式使用 ifndef APP-PLUS-NVUE 条件编译
复制代码

10、lines: 2 设置不起作用，在text标签设置class,必须要有宽度

flex-wrap: wrap;

lines: 2;

max-width: 450rpx;
复制代码