uniapp app-plus pages.json - 框架

app-plus Object 設置編譯到 App 平臺的特定樣式，配置項參考下方 app-plus App

參考地址

https://uniapp.dcloud.io/coll...

app-plus
配置編譯到 App 平臺時的特定樣式，部分經常使用配置 H5 平臺也支持。如下僅列出經常使用，更多配置項參考 WebviewStyles。

titleNView Object 導航欄 ，詳見:導航欄 App、H5
subNVues Object 原生子窗體，詳見:原生子窗體 App 1.9.10+
bounce String 頁面回彈效果，設置爲 "none" 時關閉效果。 App（nvue Android無頁面級bounce效果，僅list、recycle-list、waterfall等滾動組件有bounce效果）
softinputNavBar String auto iOS軟鍵盤上完成工具欄的顯示模式，設置爲 "none" 時關閉工具欄。 僅ios生效
softinputMode String adjustPan 軟鍵盤彈出模式，支持 adjustResize、adjustPan 兩種模式 App
pullToRefresh Object 下拉刷新 App
scrollIndicator String 滾動條顯示策略，設置爲 "none" 時不顯示滾動條。 App
animationType String pop-in 窗口顯示的動畫效果，詳見：窗口動畫。 App
animationDuration Number 300 窗口顯示動畫的持續時間，單位爲 ms。 App

Tips

.nvue 頁面僅支持 titleNView、pullToRefresh 配置，其它配置項暫不支持
導航欄

backgroundColor    String    #F7F7F7    背景顏色，顏色值格式爲"#RRGGBB"。在使用半透明標題欄時，也能夠設置rgba格式    
buttons    Array        自定義按鈕，詳見 buttons    純nvue即render:native時暫不支持
titleColor    String    #000000    標題文字顏色    
titleOverflow    String    ellipsis    標題文字超出顯示區域時處理方式。"clip"-超出顯示區域時內容裁剪；"ellipsis"-超出顯示區域時尾部顯示省略標記（...）。    
titleText    String        標題文字內容    
titleSize    String        標題文字字體大小    
type    String    default    導航欄樣式。"default"-默認樣式；"transparent"-滾動透明漸變；"float"-懸浮導航欄。    App-nvue 2.4.4+ 支持
tags    Array        原生 View 加強，詳見：5+ View 控件    
searchInput    Object        原生導航欄上的搜索框配置，詳見：searchInput    1.6.0

頁面支持經過配置 navigationStyle爲custom，或titleNView爲false，來禁用原生導航欄。一旦禁用原生導航，請注意閱讀自定義導航注意事項。
titleNView 不能設置 autoBackButton、homeButton等屬性
titleNView 的 type 值爲 transparent 時，導航欄爲滾動透明漸變導航欄，默認只有button，滾動後標題欄底色和title文字會漸變出現； type 爲 float 時，導航欄爲懸浮標題欄，此時頁面內容上頂到了屏幕頂部，包括狀態欄，但導航欄懸浮蓋在頁面上方，通常這種場景會同時設置導航欄的背景色爲rgba半透明顏色。
titleNView 的 type 值爲 transparent 時，App-nvue 2.4.4+ 支持
在 titleNView 配置 buttons 後，監聽按鈕的點擊事件，vue 頁面及 nvue 的uni-app編譯模式參考：onNavigationBarButtonTap、nvue 的weex編譯模式參考：uni.onNavigationBarButtonTap
在 titleNView 配置 searchInput 後，相關的事件監聽參考：onNavigationBarSearchInputChanged 等
App下原生導航欄的按鈕若是使用字體圖標，注意檢查字體庫的名字（font-family）是否使用了默認的 iconfont，這個名字是保留字，不能做爲外部引入的字體庫的名字，須要調整爲自定義的名稱，不然沒法顯示。

type String none 按鈕樣式，可取值見：buttons 樣式
color String 默認與標題文字顏色一致 按鈕上文字顏色
background String 默認值爲灰色半透明 按鈕的背景顏色，僅在標題欄type=transparent時生效
badgeText String 按鈕上顯示的角標文本，最多顯示3個字符，超過則顯示爲...
colorPressed String 默認值爲 color 屬性值自動調整透明度爲 0.3 按下狀態按鈕文字顏色
float String right 按鈕在標題欄上的顯示位置，可取值"left"、"right"
fontWeight String normal 按鈕上文字的粗細。可取值"normal"-標準字體、"bold"-加粗字體。
fontSize String 按鈕上文字大小
fontSrc String 按鈕上文字使用的字體文件路徑。不支持網絡地址，請統一使用本地地址。
select String false 是否顯示選擇指示圖標（向下箭頭），經常使用於城市選擇
text String 按鈕上顯示的文字。使用字體圖標時 unicode 字符表示必須 'u' 開頭，如 "ue123"（注意不能寫成"e123"）。
width String 44px 按鈕的寬度，可取值： "*px" - 邏輯像素值，如"10px"表示10邏輯像素值，不支持rpx。按鈕的內容居中顯示； "auto" - 自定計算寬度，根據內容自動調整按鈕寬度

按鈕樣式
使用 type 值設置按鈕的樣式時，會忽略 fontSrc 和 text 屬性。

forward 前進按鈕
back 後退按鈕
share 分享按鈕
favorite 收藏按鈕
home 主頁按鈕
menu 菜單按鈕
close 關閉按鈕
none 無樣式，需經過 text 屬性設置按鈕上顯示的內容、經過 fontSrc 屬性設置使用的字體庫。
搜索框配置
searchInput能夠在titleNView的原生導航欄上放置搜索框。其寬度根據周圍元素自適應。

autoFocus Boolean false 是否自動獲取焦點
align String center 非輸入狀態下文本的對齊方式。可取值： "left" - 居左對齊； "right" - 居右對齊； "center" - 居中對齊。
backgroundColor String rgba(255,255,255,0.5) 背景顏色
borderRadius String 0px 輸入框的圓角半徑，取值格式爲"XXpx"，其中XX爲像素值（邏輯像素），不支持rpx。
placeholder String 提示文本。
placeholderColor String #CCCCCC 提示文本顏色
disabled Boolean false 是否可輸入

searchInput Tips

searchInput的點擊輸入框onNavigationBarSearchInputClicked、文本變化onNavigationBarSearchInputChanged、點擊搜索按鈕onNavigationBarSearchInputConfirmed等生命週期，見文檔頁面生命週期。

在生命週期裏經過參數e.text，可獲取輸入框內容。具體見hello uni-app中模板-頂部導航欄中的示例
如需動態修改searchInput，或者獲取searchInput的placehold，參考uni-app動態修改App端導航欄

如何在uni-app使用vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}
})
export default store

import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定義成全局組件
Vue.prototype.$store = store
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App,
//掛載
    store
})
app.$mount()

在單頁面裏使用vuex

<script>
    export default {
        created () {
            console.log(this.$store)
        }
    }
</script>

初次進入應用爲未登陸狀態------->登陸---------->關閉應用，再次打開--------->爲已登陸狀態

傳統應用保持登陸狀態的方式是經過讀取 cookie 來判斷是不是登陸狀態

uni-app不支持對cookie的讀寫。由於uni-app框架的主體是 VUE，因此能夠使用 vuex 進行登陸態管理。

微信小程序樣式box-sizing用法

box-sizing設置的屬性是border-box，這會將border和padding算到width以內

在小程序中好像只有border-box和默認的content-box，就是說即便設計成padding-box，依然是content-box默認方式顯示

❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

做者Info：

【做者】：Jeskson
【原創公衆號】：達達前端
【福利】：公衆號回覆 「資料」 送自學資料大禮包（進羣分享，想要啥就說哈，看我有沒有）！
【轉載說明】：轉載請說明出處，謝謝合做！~

大前端開發，定位前端開發技術棧博客，PHP後臺知識點，web全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。謝謝支持，承蒙厚愛！！！

---

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

---

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的CSDN！

這是一個有質量，有態度的博客