应用配置

config.js是native插件读取的配置文件，方便开发者处理生成做包的配置项！

市面上大多数APP都可以抽象为几个部分或者环节（剔除具体的内容区域之外）：

  1. logo
  2. 启动图
  3. 引导图
  4. 菜单栏
  5. 导航栏

使用lighting-plugin-native插件可以方便的配置以上的所有项目，并且采用开发者易于处理和理解的JavaScript文件作为配置文件以提高配置和解析的效率。

  • 第一步：创建做包工程

使用指令light create -t app创建做包工程。

  • 第二步：编辑菜单及配置文件

编辑native目录下的资源文件，如native/config.js定义整包配置项目。

  • 第三步：打包及上传

使用light release -p指令做打包操作，将打包zip包上传到平台对应应用的条目内。

  • 第四步：在平台集成出安装包

使用平台的在线构建编译能力输出可安装的安装包。

应用logo是应用的启动图标，应用安装后会出现在桌面的应用列表区域。因设备分辨率的差异每个程序包都需要大小不一的logo图标。

在light工程中，只需要使用最大的logo图标即可，工具会自动将其裁剪为对应不同设备所需要的尺寸。

一般来说，APP中所需要的logo图标的分辨率有以下几种：

  1. 29*29
  2. 58*58（2倍图）
  3. 87*87（3倍图）
  4. 80*80（2倍图）
  5. 120*120（3倍图）
  6. 57*57
  7. 114*114（2倍图）
  8. 120*120（2倍图）
  9. 180*180（3倍图）
  10. 1024*1024

所以开发者只要配置最大图标1024*1024在工程内就可以了，其余的9张图片工具会自动裁剪生成并进行正确的命名！

module.exports = {
    res:{
        logo:"/native/res/logo.png"
    }
};

应用启动图

应用启动图也是应用运行的必要资源。程序中所需要的启动图分辨率为：

  1. 320*480
  2. 640*1136
  3. 640*1136
  4. 640*960
  5. 750*1334
  6. 1242*2208
  7. 640*960
  8. 1100*2436

和logo的配置类似，应用启动图的配置也只需要最大的一张图片（1242*2208）即可，其余的N张图片工具会根据不同设备尺寸的要求自动的裁剪生成。

配置项：res.launch

module.exports = {
    res:{
        launch:"/native/res/launch.png"
    }
};

注意：如果不配置此项目，则默认寻找/native/res/launch.png以做处理

应用引导图

module.exports = {
    res:{
        guide:["/images/source.png","/native/res/guide/0.png"]
    }
};

注意：路径可根据需要自定义，图片顺序即为引导图的显示顺序

应用菜单栏

module.exports = {
    menuBar:{
        backgroundColor:"",//背景色
        defaultColor:"",//默认菜单颜色
        selectedColor:"",//菜单选中颜色

        //使用字体图标自动生成图片，省去了开发者自己制作多张图的问题
        iconFontFrom:"",

        menus:[{
            text:'',//菜单的文本
            icon:'',//菜单图标在字体中的码点可以查看对应的css文件了解具体的码点，具体格式为0xabcd
            view:"",//当前菜单对应的视图名称，视图必须在views属性中定义
            jutting:'1' //类型string 是否开启异性按钮，开启后，按钮为凸起风格的异形按钮，1开启，默认不开启
        }]
    }
};

菜单栏目中的配置项主要如上图所示，下面逐一介绍一下：

  1. menuBar.backgroundColor，菜单栏的背景颜色，所有菜单项目都公用此背景色
  2. menuBar.defaultColor，菜单栏图标的默认颜色，此色值将配合iconFont配置项生成菜单栏的非选中状态下图标
  3. menuBar.selectedColor，菜单栏图标的选中颜色，此色值将配合iconFont配置项生成菜单栏的选中状态下图标
  4. menuBar.iconFontFrom，菜单栏图标中的字体图标的导出字体，仅支持ttf格式，字体图标可在iconfont等网站中自动生成
  5. menuBar.menus，菜单栏中的菜单条目，其结构是个数组，按照配置顺序确定实际在app中的显示顺序
  6. menuBar.menus[].text，菜单栏条目的文本，默认情况下为图片配文本的样式，文本在下
  7. menuBar.menus[].icon，菜单栏条目的图标在字体文件中的码点，默认情况下为图片配文本的样式，图标在上
  8. menuBar.menus[].view，菜单栏条目对应的views中的视图的名称，在菜单栏中使用的视图必须在views配置项目中进行了配置
  9. menuBar.menus[].jutting，菜单栏条目对应菜单是否开启凸起风格的异形按钮，传1为开启，默认不开启

我们选用了字体图标中的字体作为生成菜单栏项目图标的依据，主要是为了方便开发者随时更改图标的颜色同时帮助开发者生成在不同设备要求下的不同尺寸和倍率；菜单栏图标的生成依赖于defaultColor和selectedColor两个配置项，这样开发者可以以最小的成本生成APP打包所需要的大量图标。

此外还有一些需要注意的地方。如菜单中的配置项menuBar.menus[].icon并不是图片的路径而是图片在字体图标中的码点，其值为16进制数字的字符串格式，如：“0xabcd”；改图标对应的码点值可以通过生成此图标的网站来获取，也可以通过字体库工具来查看，具体使用可以搜索互联网上的资料！

注意事项：

menus菜单的图片也可以使用自定义的图片，只需将图片放到APP工程根目录下的/native/res/icon/目录下然后打包即可。

每个菜单需要提供4张图片（默认状态和选中状态的均需提供一张2x图和一张3x图），图片命名规则如下：(2x图的尺寸是48x48，3x图的尺寸是72x72)
第一个菜单：
menu_0@2x.png （默认状态）
menu_0@3x.png （默认状态）
menu_0_sel@2x.png （选中状态）
menu_0_sel@3x.png （选中状态）

第二个菜单：
menu_1@2x.png
menu_1@3x.png
menu_1_sel@2x.png
menu_1_sel@3x.png

依此类推…

应用侧边栏

module.exports = {
    slidemenu:{
        view:"index",//侧边栏对应的视图名称，视图必须在views属性中定义
    }
};

slidemenu.view：侧边栏对应的视图名称，视图必须在views属性中定义

页面中使用Light.navigate的形式访问，如 Light.navigate(“gmu://slidemenu”)，可打开配置好的侧边栏。

应用导航栏

module.exports = {
    navBar:{
       title:"",
       backgroundColor:"",
       titleColor:"",
       type:"1",  //string类型
       hiddenBarShadow:true,//控制IOS导航栏黑色阴影线是否隐藏
       backButton:"back1"   //back1为路径 /native/res/icon/back1.png  下的图片，传文件名即可
    }
};

导航栏中的配置项主要如上图所示，下面逐一介绍一下：

  1. navBar.title，导航栏文本，显示当前view的标题信息
  2. navBar.backgroundColor，标题栏背景色
  3. navBar.titleColor，标题栏文本颜色
  4. navBar.type，标题栏类型，可选项：0：不使用标题栏状态栏，1：默认使用标题栏状态栏，2：仅使用状态栏(单独的视图中支持配置此属性)
  5. navBar.hiddenBarShadow，控制IOS导航栏黑色阴影线是否隐藏，true：隐藏，默认显示
  6. navBar.backButton，设置导航栏返回按钮的图标 back1为路径 /native/res/icon/back1.png 下的图片，传文件名即可。（若想局部配置此按钮，请在路由跳转的时候带上配置参数）

应用视图

module.exports = {
    views:{
        "main":{
            url:"",
            navBar:{
                title:"",
                backgroundColor:"", 
                titleColor:""
            }
        }
    }
};

views配置项只要用来配置当前APP中所使用到的所有的视图，视图承载了页面的业务和功能，可以和light工程中view的概念对等起来；原则上来说，当前APP中使用到的所有的视图都应该在views中进行定义；views配置项是一个K/V的结构，其中K代表了可以在APP中使用的名称或者APP中唯一的ID，V代表了本视图的一些配置信息：

  1. url，代表本视图可以关联的URL，现阶段URL中可以出现两种路径的资源包括：相对路径（本地资源）、远程路径（http资源）；还可以定义两种类型的资源，包括：H5资源（不以JS文件后缀结尾的资源）、JSN资源（以JS文件后缀结尾的资源）
  2. navBar，代表本视图所使用的导航栏的配置，如不配置则使用默认navBar的配置，每个视图（菜单栏视图）都可以独立定义；navBar配置项目中的每个属性的具体含义可以参考配置应用导航栏中navBar的配置说明

自定义错误页面

module.exports = {
    error:"/native/error.html"  //存放地址可自行选择
};

没有网络时，APP请求远程资源，出来的网络错误页面可通过此配置来自定义

全局配置

module.exports = {
    statusBar:{
        type:'0' //状态栏文字颜色：0白色 1黑色 (安卓6.0以上支持)
    },
    global:{
        showOutShareButton: '0', //三方外部页面分享按钮，0不显示，1显示 默认不显示
        showCloseButton:'0',     //三方外部页面关闭按钮，0不显示，1显示 默认不显示
        observeScreenShot:'1', //监听屏幕截图
        disableJsnPreload:'1',//1关闭预加载，0开启预加载，默认开启
        type:"",//打包后类型，默认universal，可以配置为pad，以支持pad打包
        backgroundColor:"#000000", //H5容器的背景色
        screenShots:'1', //1不截图  0截图(只支持安卓)
        webCacheEnabled:"1" //ios的web容器关闭缓存功能，1开启，0关闭，默认关闭
    }
};