移动端开发案例【1】全局样式配置

 

全局引入样式

  在我们开发的过程中，样式显得十分重要，它是开发者直观的展示，如果开发的产品是本来的形体，那么样式就是装点形体的衣服，很多时候好的样式是可以应用到许多地方，这就决定了样式的反复利用。对开发者来说，反复的敲代码，或者复制修改，是非常浪费时间，也让代码的显得不严谨。这时候，我们就可以把一些公共样式引我们的入口文件里面：
 第一步：需要将公用的样式放在公共样式文件夹下，文件夹位置如图

接着，创建css文件，也如图

 

第二步：在文件的入口文件引入css样式

 

只引一次就行，其他页面都可以使用

 

配置tabbar底部导航

代码直接用

"tabBar":{

                 "color":"#000000",   文字颜色

                 "selectedColor":"#08C261",  选中后文字的颜色

                 "borderStyle":"black",  边框

                 "backgroundColor":"#F7F7F7",  背景颜色

                 "list":[

                         {

                                  "iconPath":"static/tabbar/index.png",   //初始图标

                                  "selectedIconPath":"static/tabbar/index-select.png",  //选中后图标

                                  "pagePath":"pages/tabbar/index/index",  对应的页面路由

                                  "text":"交流"    文字

                         },

                         {

                                  "iconPath":"static/tabbar/mail.png",

                                  "selectedIconPath":"static/tabbar/mail-select.png",

                                  "pagePath":"pages/tabbar/mail/mail",

                                  "text":"通讯录"

                         },

                        

                 ]

        }

 

注意：Tabbar：最少两个，最多五个，效果如图

 

配置globalStyle

"globalStyle": { 

                 "navigationBarTextStyle":  "black",   //颜色 只有这个两种 （black/white）

                 "navigationBarTitleText":  "媒资系统",  //名称项目

                 "navigationBarBackgroundColor":  "#F8F8F8",  背景

                 "backgroundColor":  "#F8F8F8",  项目名称颜色

        },

 

 

 

最终配置样式