uniapp内使用nvue做原生标题

nvue页面只能使用vue的生命周期，uniapp生命周期api支持部分，css样式只支持flex，很多css样式不支持

<template>
    <div class="controls-top" ref="controlsTop">
        <div class="title"><text class="text">{{title}}</text></div>
        <div class="fanhui" @tap="back"><text class="ios-icon"></text></div>
        <div class="top-right1">
            <div class="power-view">
                <div class="power-box">
                    <div class="power-header"></div>
                    <div class="power-body"><div class="power-level" :style="{ width: `${16 * level}px`, backgroundColor: '#fff' }"></div></div>
                </div>
            </div>
        </div>
        <div class="top-right2">
            <text class="ios-sm-title">{{nowTime}}</text>
        </div>
    </div>
</template>

<script>
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
export default {
    data() {
        return {
            level:0,
            nowTime:"00:00",
            title:'',
            timer:null,
            platform:null
        }
    },
    beforeCreate() {
        // #ifdef APP-PLUS-NVUE
        var domModule = weex.requireModule('dom');
        domModule.addRule('fontFace', {
            fontFamily: 'texticons',
            src: "url('../../../static/text-icon.ttf')"
        });
        // #endif
    },
    created(){
        uni.getSystemInfo({
            success: (e) => {
                // #ifndef MP
                this.platform = e.platform
                // #endif
            }
        })
    },
    mounted() {
        this.getLevel()
        this.timer = setInterval(()=>{
            this.nowTime = this.getNowTime()
        },1000)
        uni.$on("videoTitileShow",()=>{
            this.nowTime = this.getNowTime()
            this.animateControls(0,this.$refs.controlsTop)
        })
        uni.$on("videoTitileHide",()=>{
            this.animateControls(-40,this.$refs.controlsTop)
        })
        uni.$on("videoTitileChange",(title)=>{
            this.title = title
        })
    },
    destroyed() {
        uni.$off("videoTitileShow")
        uni.$off("videoTitileHide")
        uni.$off("videoTitileChange")
        clearInterval(this.timer)
    },
    methods: {
        getLevel(){
            let promise = new Promise((resolve,reject)=>{
                //#ifdef APP-PLUS-NVUE
                if(this.platform == 'android'){
                    //注意，安卓需要配置下manifest.json文件，打开后，进入模块权限配置，在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS
                    var main = plus.android.runtimeMainActivity();  
                    var Intent = plus.android.importClass('android.content.Intent');  
                    var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
                            onReceive: function(context, intent) {  
                            var action = intent.getAction();  
                            if (action == Intent.ACTION_BATTERY_CHANGED) {  
                                let level   = intent.getIntExtra("level", 0); //电量  
                                var voltage = intent.getIntExtra("voltage", 0); //电池电压  
                                var temperature = intent.getIntExtra("temperature", 0); //电池温度  
                                resolve(level/100)
                            }  
                         }  
                     });  
                    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
                    var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);  
                    main.registerReceiver(recevier, filter);
                }else if(this.platform == 'ios'){
                    var UIDevice = plus.ios.import("UIDevice");
                    var dev = UIDevice.currentDevice();  
                    if (!dev.isBatteryMonitoringEnabled()) {  
                        dev.setBatteryMonitoringEnabled(true);  
                    }  
                    let level =dev.batteryLevel();  
                
                    resolve(level)
                }
                //#endif
                //#ifdef MP-WEIXIN
                wx.getBatteryInfo({
                    success: function(e) {
                        resolve(e.level)
                    }
                })
                //#endif
            })
            promise.then(res=>{
                this.level = res
            })
        },
        getNowTime(){
            var now = new Date();
            var hh = now.getHours();            //时
            if(hh<10) hh = "0" + hh;
            var mm = now.getMinutes();          //分
            if(mm<10) mm = "0" + mm;  
            return `${hh}:${mm}`; 
        },
        back(){
            this.animateControls(-40,this.$refs.controlsTop)
            uni.$emit("exitFullscreen")
        },
        animateControls(distance,el){
            animation.transition(el, {
                styles: {
                    transform: `translate(0px, ${distance}px)`,
                },
                duration: 350, //ms
                timingFunction: 'ease',
                delay: 0 //ms
                }, () => {
                
                }
            )
        }
    }
};
</script>

<style>
.controls-top {
    /* width: 750upx; */
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    position: relative;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    height: 40px;
    transform: translateY(-40px);
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0 40px 0 40px;
}
.ios-icon {
    font-size: 18px;
    color: #fff;
    font-family: texticons;
}
.title {
    /* width: 750upx; */
    height: 40px;
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    position: absolute;
    left: 40px;
    right: 80px;
    top: 0px;
    justify-content: center;
    text-align: left;
    align-items: flex-start;
    /* background-color: #007aff; */
    padding: 0 10px 0 10px;
}
.text {
    color: #fff;
    font-size: 14px;
}
.fanhui {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
}
.top-right1 {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: 14px;
    right: 2px;
    width: 40px;
}
.top-right2 {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: 12px;
    right:38px;
    width: 40px;
}
.power-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
}
.power-box {
    flex-direction: row;
    align-items: center;
}
.power-header {
    height: 4px;
    width: 2px;
    background-color: #fff;
}
.power-body {
    height: 9px;
    width: 20px;
    border-width: 1px;
    border-color: #fff;
    padding: 1px;
    flex-direction: row;
    justify-content: flex-end;
}
.power-level {
    height: 5px;
}
.ios-sm-title{
    font-size: 10px;
    color: #fff;
}
</style>

pages.josn配置nvue

vue页面里获取nvue组件，使用

this.videoTitleNvue = uni.getSubNVueById('title');
this.videoTitleNvue.setStyle({
    top: 44 + uni.getSystemInfoSync().statusBarHeight + 'px',
    left: '0px',
    width: '100%',
    height: '40px'
});
this.videoTitleNvue.show('auto', 0, function() {
    // 打开后进行一些操作...
    //
});
```uniapp 内使用 nvue 做原生标题