目錄
前言
先看一下uniapp官網的原話：
subNvue的一些參數介紹
subNvues使用方法：
綁定id 顯示 subNvue 彈出層
subNvue.show() 參數信息
subNvue.hide() 參數信息
在使用subNvue 原生子體窗口 遇到的一些問題
前言
nvue?兼容性 以及使用方式
- 控制隱藏顯示 不能使用v-show 只能用v-if ?如果想要實現隱藏時占位，可以用css 屬性值隱藏顯示 visibility:visible;顯示 ?visibility:hidden;隱藏，第二種就是display: block;顯示 display: none;隱藏。
- nvue 只能使用flex 布局 。
- 文字內容必須用text包裹住 不能在div 或者view 里面直接寫文字 否則即使渲染了，也無法綁定 js 里的變量。
- 布局不能使用百分比、沒有媒體查詢。如果想要全屏展示 寬度直接設置750rpx，高度想要沾滿全屏可以使用 系統信息
uni.getSystemInfo({success: (info) => {// 設置屏幕高度this.screenHeight = info.windowHeight;} }) - nvue 不支持背景圖 就是 background-image: url('../.././image/45.png')
- nvue 的各組件在安卓端默認是透明的，如果不設置background-color，可能會導致出現重影的問題。(注意在pages.json文件里subNVues數組里面 必須也設置上"mask":"rgba(0,0,0,0)", 要兩個同時設置才不會出現重影的問題)。
? - nvue 不支持 css 預處理器，css選擇器也不要用，?也有許多樣式不支持會提示。
?
官網鏈接：nvue介紹 | uni-app官網
先看一下uniapp官網的原話：
subNvue，是 vue 頁面的原生子窗體，把weex渲染的原生界面當做 vue 頁面的子窗體覆蓋在頁面上。它不是全屏頁面，它給App平臺vue頁面中的層級覆蓋和原生界面自定義提供了更強大和靈活的解決方案。它也不是組件，就是一個原生子窗體。
官網鏈接：uni-app官網
subNvue的一些參數介紹
subNvue的 id是全局唯一的，不能重復。后面需要用 uni.getSubNVueById(id名稱) 來獲取id
subNvue的 path 只能是nvue 文件路徑 其他的不行。
subNvue的 type 可取值：'popup' 和 'navigationBar'。
subNvue的 style 樣式屬性
subNvues使用方法：
在pages.json中的 app-plus 下? 使用具體如下 看圖
綁定id 顯示 subNvue 彈出層
在pages.json 文件中 配置好以后
在你引入 .nvue?的 主頁面中 使用 uni.getSubNVueById(id)?綁定 你之前的id
再使用?subNVue.show() 顯示彈出層。看圖
subNvue.show() 參數信息
show()這里面有三個參數?
你們也看到了我這里加了一個延時器 0.5秒 執行！如果我不加這個延時器，直接讓他在頁面渲染完成后執行，是不顯示彈出層的！目前還不知道什么原因導致。
subNvue.hide() 參數信息
subNVue.hide('slide-out-left',200);
在使用subNvue 原生子體窗口 遇到的一些問題
解決重影問題
nvue 的各組件在安卓端默認是透明的，如果不設置background-color，可能會導致出現重影的問題
原生子窗體的遮罩層,僅當原生子窗體 "type" 屬性值設置為 "popup" 時才生效，可取值： rgba格式字符串，定義純色遮罩層樣式，如"rgba(0,0,0,0.5)"，表示黑色半透明；
一開始 我沒設置 type 他是有一層 黑色半透明背景 之后我加了"rgba(0,0,0,0.0)"? 我把透明度改成0.0也不行，后來上網查尋 必須和 mask 同時使用， 才能徹底生效
"mask":"rgba(0,0,0,0)",
"background": "rgba(0,0,0,0)"?性能
官網上說? 原生子體窗口 一個頁面引入三個就行，太多會因引起 卡頓 或者性能問題。
安卓系統上物理鍵返回，subnvue會關閉。
解決：
created() {//安卓系統上物理鍵返回,subnvue會關閉,用一下方法禁用 里面還可以編寫邏輯?plus.key.addEventListener("backbutton", function() {console.log('backbutton');});},?在APP 端禁止觸摸 某一個區域
因為某種原因 要禁止用戶觸摸，@touchmove.stop.prevent 加上以后view 里面所有的 都觸摸不到！
<view @touchmove.stop.prevent><view/>查看版本信息 這個代碼只在APP 端有用
const version = plus.runtime.version;//獲取當前版本 在APP端顯示h5 出現視頻加載慢 或者卡頓 可以用
<link rel="preload" href="視頻路徑" as="video">
