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！

这是一个有质量，有态度的博客