用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

uni-app相關知識總結

Rolan 2019-10-12 00:43

一、默認導航欄uni-app默認會提供一個導航欄,即小程序的導航欄,我們不需要進行任何的配置就會顯示,默認導航欄的配置同微信小程序,只不過微信小程序的組件是分為.wxml、.wxss、.js、.json四個文件組成,而uni-app ...

一、默認導航欄

uni-app默認會提供一個導航欄,即 小程序的導航欄 ,我們不需要進行任何的配置就會顯示, 默認導航欄的配置同微信小程序 ,只不過微信小程序的組件是分為.wxml、.wxss、.js、.json四個文件組成,而 uni-app的組件則只有一個.vue文件 (其中包含了html、css、js),其中并未包含.json的相關內容,那么.json配置寫在哪里呢?.json文件主要是 對頁面的 窗口表現及頁面相關功能進行配置,所以unip在pages.json文件中注冊頁面的時候,給每個page頁面提供了一個style屬性,用于對當前頁面的窗口表現( 窗口 樣式、 導航欄 樣式)及功能( 頁面下拉刷新 、 頁面能否滾動等),如:

{
    "pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": { // 對窗口及其頁面表現進行配置
                "navigationBarTitleText": "導航標題", // 設置默認導航欄標題文字內容
                "navigationBarTextStyle": "white", // 設置默認導航欄標題文字顏色及狀態欄上文字顏色,僅支持black和white
                "navigationBarBackgroundColor": "#4CD964", // 設置默認導航欄背景顏色及狀態欄背景顏色,僅支持十六進制顏色值
                "navigationStyle": "default", // 支持defaul和custom兩種,設置custom(自定義)后,默認導航欄將消失,微信小程序上只保持右上角膠囊按鈕
                "backgroundColor":"#ADFF2F", // 設置窗口背景顏色,開啟下拉刷新之后,下拉后可見該背景顏色(黃色),僅小程序端生效
                "enablePullDownRefresh": true, // 是否開啟頁面下拉刷新功能
                // 上拉刷新不需要開啟,頁面提供了一個觸底事件onReachBottom,只要頁面存在滾動條,滾動條觸底后就可以觸發觸底事件,從而進行下拉刷新
                "onReachBottomDistance": 0, // 當滾動條距離底部的距離為指定值的時候則判定為觸底
                "disableScroll": false, // 頁面能否滾動,如果為true則禁用頁面滾動功能,及時頁面設置的高度超過了屏幕高度也不會發生滾動,僅小程序端生效
                "usingComponents": { // 配置是否使用小程序提供的自定義組件,這里的小程序組件不是.vue組件,而是小程序提供的原生組件,App端也支持
                    "custom": "/wxcomponents/custom/index"
                },
                // "backgroundTextStyle":"dark", // 設置下拉 loading 的樣式,僅支持dark和light,無明顯用處
            }
        }
    ]
}

需要注意的就是usingComponents的配置,其配置的是使用 小程序提供的原生組件(如包含.wxml、.wxss、.js、.json的組件) ,而不是.vue組件。同時 狀態欄上文字顏色僅支持black和white,即非黑即白,狀態欄背景色同導航欄背景顏色

二、原生導航欄

uni-app運行在app端的時候,還提供了原生導航欄,其在注冊頁面的時候,style還提供了一個 app-plus 屬性用于 配置app端 頁面窗口、導航欄樣式的配置,導航欄的配置通過titleNView屬性,如:

{
    "pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": { // 對窗口及其頁面表現進行配置
                "app-plus": {
                    // "titleNView": false // 禁用原生導航欄,即當前頁面不顯示原生導航欄
                    "scrollIndicator":"none", // 設置是否顯示頁面滾動條,設置為none,滾動時看不到右側的滾動條
                    "pullToRefresh": {
                        "style":"default" // 設置下拉刷新樣式,只支持default和circle
                    },
                    "bounce":"none", // 設置頁面回彈效果,none關閉回彈效果
                    // "titleNView": { // 空對象不會對默認導航欄進行替換,必須進行相關配置才會對默認導航欄進行修改
                        
                    // },
                    "titleNView": { // 對原生導航欄進行配置
                        "titleText": "原生導航欄標題內容", // 標題內容與搜索框只能顯示一個
                        "buttons": [ // 在原生導航欄上添加按鈕
                            {
                                // "type":"share", // 使用 type 值設置按鈕的樣式時,會忽略 fontSrc 和 text 屬性。
                                "fontSrc":"./static/font/icon.ttf", // 使用字體圖標
                                "text": "\ue609", // 使用字體圖標時 unicode 字符表示必須 '\u' 開頭
                                "fontSize":"22px",
                                "color":"#FF9619", 
                                "colorPressed":"#BBBBBB",
                                "select": false, // 是否顯示右側向下箭頭圖標常用于城市選擇
                                "float":"left" // 按鈕放在導航欄左側
                            },
                            {
                                // "type":"favorite", // 使用 type 值設置按鈕的樣式時,會忽略 fontSrc 和 text 屬性。
                                "fontSrc":"./static/font/icon.ttf",
                                "text": "\ue653", // 使用字體圖標時 unicode 字符表示必須 '\u' 開頭
                                "fontSize":"22px",
                                "color":"#000000",
                                "colorPressed":"#BBBBBB",
                                "select": false, // 是否顯示右側向下箭頭圖標常用于城市選擇
                                "float":"right" // 按鈕放在導航欄右側
                            }
                        ],
                        "searchInput": { // 是否在原生導航欄上添加搜索框,一旦添加搜索框,那么導航欄標題內容將無法顯示,因為搜索框是放在標題的位置,對標題進行了替換
                            "align":"center",
                            "backgroundColor":"#F7F7F7",
                            "borderRadius":"4px",
                            "placeholder":"搜索",
                            "disabled": true
                        }
                    }
                }
            }
        }
    ]
}

三、自定義導航欄

要想自定義導航欄,我們必須先讓默認導航欄或者原生導航欄隱藏,在小程序端可以通過 "navigationStyle":"custom" 隱藏,app端則可以通過 "titleNView": false 進行隱藏,如:

{
    "pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/contact/contact",
            "style" : {
                "navigationStyle":"custom", // 隱藏小程序端導航欄
                "app-plus": {
                    "titleNView": false // 隱藏app端原生導航欄
                }
            }
        }
     ]
}

使用自定義導航欄導航后,由于默認導航欄和原生導航欄都消失了,所以原先導航欄的位置就被空出來了,我們可以 通過自定義一個導航視圖組件占據原先導航欄的位置即可實現 ,但是下拉刷新會有問題,因為頁面的下拉刷新是從頂部開始的,之前 有默認導航和原生導航的時候 , 頁面的頂部就是導航欄底部 ,但是默認導航和原生導航隱藏后, 頂部就變成了原先導航欄的頂部了 ,所以 頁面下拉刷新的位置向上移了 ,使用自定義導航欄后最好不要在頁面中使用下拉刷新功能了。如果非要使用下拉刷新功能的話,我們可以通過<scroll-view>組件來模擬下拉刷新。即 監聽<scroll-view>組件的@scrolltoupper事件判斷是否到達頂部,然后監聽@scroll事件,判斷下拉的位置,然后動態改變下拉刷新的樣式、動畫 從而模擬出下拉刷新效果。

<view class="pull-down iconfont icon-liulan" :style="{transform: 'rotate(' + detal+ 'deg)'}"></view>
<scroll-view scroll-y class="scroll-box" @scrolltoupper="pullDown" @scroll="scroll">
</scroll-view>
export default {
    methods: {
        pullDown(e) {
            // console.log(e);
        },
        scroll(e) { // 根據下拉的距離改變detal的值從而改變下拉刷新圖標的選擇角度
            this.detal = e.detail.scrollTop + 100;
        }
    }
}

四、vue與nvue

nvue即 native vue 。uni-app App端內置 weex 渲染引擎,提供了原生渲染能力。 uni-app默認是處于uni-app的渲染模式 ,即小程序渲染模式,如果要啟用純原生渲染模式,即weex渲染模式,那么需要在 manifest.json 源碼視圖的 "app-plus" 下配置 "renderer":"native" ,開啟原生渲染模式后, pages.json注冊的vue頁面將被忽略 ,啟動純原生渲染,可以減少App端的包體積、加快App啟動速度。因為webview渲染模式的相關模塊將被移除了。

// manifest.json    
{    
    // ...    
     /* App平臺特有配置 */    
    "app-plus": {    
        "renderer": "native", //App端純原生渲染模式
    }    
}

在未開啟weex原生渲染模式的情況下,即uni-app模式下也是可以直接渲染.nvue文件的, 不管是vue頁面還是nvue頁面,都需要在pages.json中注冊 ,并且如果一個頁面下出現了兩個同名的vue和nvue文件,那么在 App端 , 會優先使用nvue頁面 ,同名的vue文件將不會被編譯到App端。而在 非App端 , 會優先使用vue頁面 。.nve文件的寫法同.vue文件一樣,只不過,.nvue文件中可以還使用一些weex提供的特有組件,比如<barcode>、<list>、<cell>、<refresh>等。

五、subNvue

subNvue ,是 vue 頁面的原生子窗體,其會 把weex渲染的原生界面當做 vue 頁面的子窗體覆蓋在頁面上 ,主要解決 運行在App端時 , 視圖無法覆蓋在<video>、<map>等組件上 的問題( 非App端可以通過z-index或者cover-view解決 ),subNvue的使用方式非常簡單,只需要 新建一個.nvue文件 ,建議放在母頁面目錄中,但是 subNvue頁面不需要注冊到pages.json中 ,而是 在母頁的"style"--> "app-plus" --> "subNVues"進行配置 ,因為subNvue主要解決App端層級覆蓋問題,所以需要在"app-plus"下配置,需要注意的是 subNVues是一個數組 ,每個元素為一個原生子窗體,因為一個母頁中可以包含多個原生子窗體,每個原生子窗體通過配置中的id進行區分。配置好subNvues后,對應的原生子窗體默認就會顯示。

{
    "pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
        "path" : "pages/video/video", // 母頁面路徑
        "style" : {
            "navigationBarTextStyle":"white",
            "app-plus": {
                "titleNView":false,
                "subNVues":[{  
                            "id": "test", // 唯一標識,母頁面中可以通過這個id調用api獲取到原生子窗體  
                            "path": "pages/video/subNVue/cover", // video母頁面下原生子窗體頁面路徑  
                            // "type": "popup",  //這里不需要
                            "style": {  
                                "position": "absolute",  
                                // "dock":"right",
                                "width": "750rpx",  
                                "height": "150upx", // 需要設置合適的高度,否則可能出現無法點擊原生子窗體下面的內容 
                                "background":"transparent" // 設置為透明,以便能看到原生子窗體下面的內容 ,如果有背景顏色,則全屏可見
                            }  
                 }]
            }
        }
    ]
}

pages.json文件中配置好原生子窗體后,不需要向vue組件一樣引入到母頁中,直接就會出現在母頁面上,具體位置根據subNVues中的配置而定。

六、優化自定義導航欄下拉刷新功能

前面說過,使用自定義導航欄需要隱藏掉默認導航欄和原生導航欄,但是會存在一個問題,就是頁面下拉刷新會跟著上移到了最頂部,導致頁面下拉刷新位置不正確,之前的方法是使用<scroll-view>方法進行模擬, 但是官方并不推薦該方法 ,我們可以通過原生子窗口實現,其實現方法非常簡單,就是用原生子窗口占據原生導航欄的位置,其中關鍵的一步就是,在配置原生子窗體的時候, 需要將其type設置為navigationBar類型 ,該原生子窗體就會站住原生導航欄的位置,并且下拉刷新圖標不會向上移,如:

{
    "pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
        "path" : "pages/nav/nav",
        "style" : {
            "navigationBarTextStyle":"white",
            "navigationBarBackgroundColor":"#007AFF",
            "enablePullDownRefresh": true,
            "app-plus": {
                "titleNView": false,
                "subNVues": [
                    {
                        "id":"nav",
                        "path":"pages/nav/subNvue/nav",
                        "type":"navigationBar" // 設置為navigationBar類型才能讓原生子窗體站住原生導航欄的位置
                    }
                ]
            }
        }
    },
    ]
}

pages/nav/subNvue/nav.nvue

<template>
    <div class="nav">
        <div class="status-bar"></div>
        <div class="nav-title">
            <div>我是導航欄</div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
.nav { /*.nvue頁面中的所有元素都是flex布局,不需要進行顯示設定*/
    flex: 1; /*占滿整個導航欄高度,當該原生子窗體頁面被設置為navigationBar類型后,會自動給予該頁面一個導航高度,占滿即可*/
    background-color: #007AFF;
}
.status-bar { /*狀態欄占位區,下面導航標題欄已經設置了44px高度,讓狀態欄占滿剩余高度*/
    flex: 1; 
}
.nav-title {
    flex: 0;
    height: 44px; /*導航欄固定高度為44px*/
    background-color: #007AFF;
    justify-content: center;
    align-items: center;/*導航欄標題區垂直居中顯示*/
}
</style>

七、實現抽屜效果

所謂抽屜效果就是,就是頁面上觸發某種事件后,頁面上方有一個頁面從屏幕的一側開始滑出覆蓋到原來頁面的上方,然后點擊空白處,該頁面又可以收回去的效果。要實現這種效果,我們也是需要利用原生子窗體,將抽屜頁面做成一個原生子窗體覆蓋在頁面上方,其中關鍵的一步,就是 需要將其type設置為popup類型 , 設置為popup類型之后 , 該頁面默認不會出現在母頁面上 ,需要通過調用api才能讓該抽屜頁面顯示出來。如:

{
    "pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
        {
        "path" : "pages/nav/nav",
        "style" : {
            "navigationBarTextStyle":"white",
            "navigationBarBackgroundColor":"#007AFF",
            "enablePullDownRefresh": true,
            "app-plus": {
                "titleNView": false,
                "subNVues": [
                    {
                        "id":"drawer",
                        "path":"pages/nav/subNvue/drawer",
                        "type":"popup",
                        "style": {
                            "width":"50%" // 只顯示整個屏幕寬度的50%,高度默認為屏幕100%
                        }
                    }
                ]
            }
        }
    },
    ]
}

pages/nav/subNvue/nav.nvue 母頁通過api控制原生子窗體的顯示和隱藏

<template>
    <view>
        母頁面
        <button @click="showDrawer">顯示抽屜</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            showDrawer() {
                uni.getSubNVueById('drawer').show("slide-in-left", 200); // 從屏幕左側向右邊滑入,耗時200ms
            }
        }
    }
</script>

同樣的方式也可以實現頁面中間顯示彈出框效果,只需要改變原生子窗體的位置即可,即將其定位到正中間,如:

{
    "id":"drawer",
    "path":"pages/nav/subNvue/drawer",
    "type":"popup",
    "style": {
        "margin":"auto", // 居中顯示
        "height":"50%",
        "width":"80%"
    }
}

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: JS_Even_JS 來自: segmentfault
不朽的浪漫援彩金
不用网络的单机麻将 零基础学麻将 四川快乐12开奖号码查询 2019年上证指数半年线是多少目前大盘年线 12119期博彩老头 棋牌打鱼送彩金 jj大众麻将 上海快三规则介绍 重庆幸运农场号码规律 贵州十一选五 贵州麻将怎么打视频 财经股票论坛 北京赛车pk10破解 宝博游戏棋牌平台官网 四川快乐十二号码查询 钻石帝国