好的网站特点,三网合一网站建设,ui设计师需要考什么证,wordpress首页文章只显示标题文章目录 一、项目步骤1 新建一个无AppID的movie项目2将准备好的底部标签导航图标拷贝到movie项目下面(将图标文件夹image放到项目文件夹里#xff09;3 打开App.json配置文件#xff0c;在pages数组里添加4个页面路径:电影“pages/movie/movie”、影院“pages/cinema/cinema… 文章目录 一、项目步骤1 新建一个无AppID的movie项目2将准备好的底部标签导航图标拷贝到movie项目下面(将图标文件夹image放到项目文件夹里3 打开App.json配置文件在pages数组里添加4个页面路径:电影“pages/movie/movie”、影院“pages/cinema/cinema”、发现“pages/find/find”、我的“pages/me/me”保存后会自动生成相应的页面文件夹;删除“pages/index/index”“pages/logs/logs”页面路径以及对应的文件夹4 在window数组里配置窗口导航背景颜色为红色(#D53E37)导航栏文字为电影字体颜色为白色(white)。5 在tabBar对象里配置底部标签导航背景色为灰色(#f5f5f5)文字默认颜色为白色(white)选中时为红色(#D53E37)在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。 二 tabBar导航栏讲解三 页面配置 一、项目步骤
1 新建一个无AppID的movie项目 2将准备好的底部标签导航图标拷贝到movie项目下面(将图标文件夹image放到项目文件夹里 image图 3 打开App.json配置文件在pages数组里添加4个页面路径:电影“pages/movie/movie”、影院“pages/cinema/cinema”、发现“pages/find/find”、我的“pages/me/me”保存后会自动生成相应的页面文件夹;删除“pages/index/index”“pages/logs/logs”页面路径以及对应的文件夹 4 在window数组里配置窗口导航背景颜色为红色(#D53E37)导航栏文字为电影字体颜色为白色(white)。
backgroundTextStyle背景文本样式有light和dark navigationBarBackgroundColor导航栏背景颜色 navigationBarTitleText导航栏标题文字 navigationBarTextStyle导航栏文本样式
5 在tabBar对象里配置底部标签导航背景色为灰色(#f5f5f5)文字默认颜色为白色(white)选中时为红色(#D53E37)在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。 二 tabBar导航栏讲解
tabBar 字段定义小程序顶部、底部 tab 栏用以实现页面之间的快速切换可以通过 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面。 属性类型必填默认值描述colorHexColor是tab 上的文字默认颜色仅支持十六进制颜色selectedColorHexColor是tab 上的文字选中时的颜色仅支持十六进制颜色backgroundColorHexColor是tab 的背景色仅支持十六进制颜色borderStylestring否blacktabbar 上边框的颜色 仅支持 black / whitelistArray是tab 的列表详见 list 属性说明最少 2 个、最多 5 个 tabpositionstring否bottomtabBar 的位置仅支持 bottom / top
其中 list 接受一个数组只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序每个项都是一个对象其属性值如下
属性类型必填描述pagePathstring是页面路径必须在 pages 中先定义textstring是tab 上按钮文字iconPathstring否图片路径icon 大小限制为 40kb建议尺寸为 81px * 81px不支持网络图片。当 position 为 top 时不显示 icon。selectedIconPathstring否选中时的图片路径icon 大小限制为 40kb建议尺寸为 81px * 81px不支持网络图片。当 position 为 top 时不显示 icon。
代码示例app.json
{pages:[pages/movie/movie,pages/cinema/cinema,pages/find/find,pages/me/me],window:{backgroundTextStyle:light,navigationBarBackgroundColor: #D53E37,navigationBarTitleText: 电影,navigationBarTextStyle:white},tabBar: {selectedColor: #D53E37,backgroundColor: #f5f5f5,borderStyle: white,list: [{pagePath: pages/movie/movie,text: 电影,iconPath: images/bar/movie-0.jpg,selectedIconPath: images/bar/movie-1.jpg},{pagePath: pages/cinema/cinema,text: 影院,iconPath: images/bar/cinema-0.jpg,selectedIconPath: images/bar/cinema-1.jpg},{pagePath: pages/find/find,text: 发现,iconPath: images/bar/find-0.jpg,selectedIconPath: images/bar/find-1.jpg},{pagePath: pages/me/me,text: 我的,iconPath: images/bar/me-0.jpg,selectedIconPath: images/bar/me-1.jpg}]}
}三 页面配置
小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置需要注意的是页面|配置文件的属性和 全局配置文件中的 window 属性几乎一致,只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项页面中配置项 会覆盖全局配置文件中相同的配置项。
属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色如 #000000navigationBarTextStylestringwhite导航栏标题、状态栏颜色仅支持 black / whitenavigationBarTitleTextstring导航栏标题文字内容navigationStylestringdefault导航栏样式仅支持以下值default 默认样式custom 自定义导航栏只保留右上角胶囊按钮。homeButtonbooleanfalse在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键backgroundColorHexColor#ffffff窗口的背景色backgroundColorContentHexColor#RRGGBBAA页面容器背景色backgroundTextStylestringdark下拉 loading 的样式仅支持 dark / lightbackgroundColorTopstring#ffffff顶部窗口的背景色仅 iOS 支持backgroundColorBottomstring#ffffff底部窗口的背景色仅 iOS 支持enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离单位为px。pageOrientationstringportrait屏幕旋转设置支持 auto / portrait / landscapedisableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。只在页面配置中有效无法在 app.json 中设置usingComponentsObject否页面自定义组件配置initialRenderingCachestring页面初始渲染缓存配置支持 static / dynamicstylestringdefault启用新版的组件样式singlePagesinglePage否单页模式相关配置restartStrategystringhomePage重新启动策略配置handleWebviewPreloadstringstatic控制预加载下个页面的时机。支持 static / manual / autovisualEffectInBackgroundstring否切入系统后台时隐藏页面内容保护用户隐私。支持 hidden / none若对页面单独设置则会覆盖全局的配置enablePassiveEventObject或boolean否事件监听是否为 passive若对页面单独设置则会覆盖全局的配置rendererstring否渲染后端rendererOptionsObject否渲染后端选项componentFrameworkstring否组件框架
找到对应模块的.json文件不带window
全局配置app.json
