【uni-app从入门到实战】环境搭建和配置学习

【uni-app从入门到实战】环境搭建和配置学习

文章目录

​​创建项目​​​​globalStyle全局外观配置​​​​pages页面配置​​​​配置基本的tabbar​​​​condition启动模式配置​​

创建项目

globalStyle全局外观配置

globalStyle 作用是设置默认页面的窗口表现。这里介绍几个常简设置项，更多详情可查看：​​pages.json页面路由——globalStyle​​

我们修改 pages.json 中的 globalStyle

"globalStyle": { "navigationBarTextStyle": "white",//标题栏文字颜色 "navigationBarTitleText": "uni-app",//标题栏文字内容，pages.json中pages可单独设置页面标题栏内容 "navigationBarBackgroundColor": "#1E90FF",//标题栏颜色 "backgroundColor": "#87CEFA",//下拉刷新时背景颜色，只有开启下面的配置项才能下拉刷新 "enablePullDownRefresh":true,//是否开启下拉刷新 "backgroundTextStyle":"light"//下拉刷新三个点点的颜色 },

效果如下：

pages页面配置

pages 作用是设置页面路径及窗口表现，下面我们新建一个页面来学习这些配置，更多详情可查看：​​pages.json页面路由——pages​​

pages 中新建 message 目录，其中新建 message.vue

新建的时候要勾选​​在 pages.json 中注册​​​，这样在 ​​pages.json​​ 中就会自动添加 message.vue 到 pages 设置项中，我们进行修改，把 message 的配置放到第一个，这样启动时就变成了首页。我们可以单独设置标题和背景颜色，同时增加 h5 的配置，这样我们在浏览器运行时会有单独的样式

"pages": [ { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#FFA500", "h5": { "titleNView": { "backgroundColor": "#800080" } } } }, { ...... } ],

运行在浏览器的样式：

配置基本的tabbar

​​tabbar官方文档​​

我们在 globalStyle 同级下增加 tabBar 配置

"tabBar":{ "color": "#222222",//未选中时文字颜色 "selectedColor": "#1E90FF",//选中时文字颜色 "backgroundColor": "#87CEFA",//背景色 "borderStyle":"white",//上边框的颜色，可选值 black/white "list": [//tab 的列表，详见 list 属性说明，最少2个、最多5个 tab { "text": "首页", "pagePath": "pages/index/index", "iconPath": "static/tabs/index.png", "selectedIconPath": "static/tabs/index_active.png" }, { "text": "信息页", "pagePath": "pages/message/message", "iconPath": "static/tabs/message.png", "selectedIconPath": "static/tabs/message_active.png" }, { "text": "联系", "pagePath": "pages/contact/contact", "iconPath": "static/tabs/contact.png", "selectedIconPath": "static/tabs/contact_active.png" } ] }

效果如下：

condition启动模式配置

我们在 pages 下新建 detail 目录，在其中新建 detail.vue 文件，记得在 pages.json 的 pages 中注册。然后在 tabbar 同级增加 ​​condition​​ 配置项

"condition": { "current": 0, "list": [ { "name": "详情页",//启动模式名称 "path": "pages/detail/detail",//启动页面路径 "query": "id=80"//启动参数，可在页面的 onLoad 函数里获得 } ] }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。