Uni-app入坑笔记(二)

Uni-app配置文件--------pages.json:

pages.json文件用来对uni-app进行全局配置,决定页面文件的路径,窗口表现,设置多tab等

pages.json配置项列表:

globalStyle     Object    　　　　否    设置默认界面的窗口表现

pages   　　   Object  Array  　 是    设置页面路径及窗口表现

tabBar     　   Object     　　　   否    设置底部  tab  的表现

condition        Object    　　　　否    启动模式设置

以下是包含了所有配置选项的pages.json:

{
  "pages": [{
    "path": "pages/component/index",
    "style": {
      "navigationBarTitleText": "组件"
    }
  }, {
    "path": "pages/API/index",
    "style": {
      "navigationBarTitleText": "接口"
    }
  }, {
    "path": "pages/component/view/index",
    "style": {
      "navigationBarTitleText": "view"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "接口"
    }]
  }
}

globalStyle:

用于设置应用的导航栏,导航条,标题,窗口颜色等,是全局样式,范围比pages.style大

navigationBarBackgroundColor HexColor #000000 导航栏背景颜色 
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white 
navigationBarTitleText String  导航栏标题文字内容 
navigationStyle String default 导航栏样式，仅支持 default/custom。 
backgroundColor HexColor #ffffff 窗口的背景色 微信小程序

注意:navigationStyle只在pages.json  ->  globalStyle中设置生效.开启custom后,所有窗口均无导航栏

pages:

接收一个数组,来指定应用的页面组成.每一项表示对应的页面信息,应用中新增/减少页面都需要对pages数组进行修改

文件名你需要写后缀,框架会自动找寻路径下的页面资源.

注意:pages节点的第一页为应用入口页(既首页).

代码示例:

路径

则需要在pages.json 中填写如下代码:

{
  "pages": [{
      "index": {
        "path": "pages/index/index"
      }
    },
//向数组中分别添加两个对象,对象内以对象为属性,内层对象的属性值为路径
    {
      "login": {
        "path": "pages/login/login"
      }
    }
  ]
}

pages.style:

用于设置每个页面的状态栏,导航条,标题,窗口背景颜色等,是针对各个独立的页面进行设置.

navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000" 
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white 
navigationBarTitleText String  导航栏标题文字内容 
backgroundColor HexColor #ffffff 窗口的背景色 微信小程序
backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark/light 
enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数 
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px 
navigationStyle String default 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮。 微信小程序
backgroundColorTop String #ffffff 顶部窗口的背景色。 微信小程序且为 iOS
backgroundColorBottom String #ffffff 底部窗口的背景色。 微信小程序且为 iOS

 代码示例:

{
  "pages": [{
      "index": {
        "path": "pages/index/index",
        //在index页面下创建style对象进行页面设置
        "style": {
            "navigationBarTitleText": "首页",//设置页面标题文字
          "enablePullDownRefresh":true//开启下拉刷新
        }
      }
    },
    ...
  ]
}    

tabBar:

如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现以及tab切换时显示的对应页.

tips:当设置position为top时,将不显示icon

tabBar中的list是一个数组,只能配置2~5个tab,tab按数组的顺序排序.

color HexColor 是  tab 上的文字默认颜色
selectedColor HexColor 是  tab 上的文字选中时的颜色
backgroundColor HexColor 是  tab 的背景色
borderStyle String 否 black tabbar 上边框的颜色，仅支持 black/white
list Array 是  tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top

其中list接收一个数组,数组中的每一项都是一个对象,其属性如下:

pagePath String 是 页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath String 否 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

condition:

启动模式配置.仅开发期间生效,用于模拟直达页面的场景,例如小程序转发之后,用户点击所打开的界面

current Number 是 当前激活的模式，list节点的索引值
list Array 是 启动模式列表

list说明:

name String 是 启动模式名称

path String 是 启动页面路径

query String 否 启动参数，可在页面的 onLoad 函数里获得

注意:在5+app里真机运行可以直接打开配置的页面,微信开发者工具里需要手动改变编译模式:

代码示例:

"condition": { //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式（list 的索引项）
    "list": [{
            "name": "swiper", //模式名称
            "path": "pages/component/swiper/swiper", //启动页面，必选
            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
        },
        {
            "name": "test",
            "path": "pages/component/switch/switch"
        }
    ]
}

配置文件---------manifest.json

manifest.json文件是应用的配置文件,用于指定应用的名称,图标,权限等.

name String  应用名称
appid String 新建uni-app项目时，DCloud云端分配。 应用标识
description String  应用描述
versionName String  版本名称，例如：1.0.0
versionCode String  版本号，例如：36
app-plus Object  5+App 特有配置
quickapp Object  快应用特有配置，即将支持
mp-weixin Object  微信小程序特有配置
mp-baidu Object  百度小程序特有配置，即将支持
mp-alipay Object  支付宝小程序特有配置，即将支持

 app-plus:

modules Object 权限模块
distribute Object 5+App 发布信息

plus----->modules 可配置的权限模块:

Contacts 系统通讯录
Fingerprint 指纹识别
Maps 地图
Messaging 短彩邮件消息
OAuth 登录授权
Payment 支付
Push 消息推送
Share 社交分享
Speech 语音识别
Statistic 统计
VideoPlayer 视频播放
LivePusher 直播推流

plus----->distribute配置说明:

android Object  Android 应用配置
ios Object  iOS 应用配置
sdkConfigs Object  SDK配置

tips:　　manifest.json文件的配置推荐在HBuilderX提供的可视化操作界面完成.

部分配置在打包时的操作界面补全,例如证书等信息

Native.js全县部分会根据配置的模块权限,在打包后自动填充

部分 modules 是默认的,不需要配置.

mp-weixin:

appid String 微信小程序的AppID，登录  申请