uniapp app-plus pages.json - 框架

我不是女神ヾ 2021-08-19 13:39 744阅读 0赞

app-plus Object 设置编译到 App 平台的特定样式，配置项参考下方 app-plus App

参考地址

https://uniapp.dcloud.io/collocation/pages

app-plus配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。以下仅列出常用，更多配置项参考 WebviewStyles。

titleNView Object 导航栏 ，详见:导航栏 App、H5subNVues 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 两种模式 ApppullToRefresh Object 下拉刷新 AppscrollIndicator String 滚动条显示策略，设置为 "none" 时不显示滚动条。 AppanimationType String pop-in 窗口显示的动画效果，详见：窗口动画。 AppanimationDuration 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

初次进入应用为未登录状态------->登录---------->关闭应用，再次打开--------->为已登录状态

传统应用保持登录状态的方式是通过读取 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全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

###  ###