dev app

使用配置化的方式开发APP程序

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

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

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

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

应用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张图片工具会自动裁剪生成并进行正确的命名！

1
2
3
4
5
6
//native/config.js
module.exports = {
    res:{
        logo:"/native/res/icon.png",
    }
};

注意：配置值中的/代表工程的根目录！

注意：如果不配置此项目，则默认寻找/native/res/icon.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

1
2
3
4
5
module.exports = {
    res:{
        launch:"/native/res/launch.png"
    }
};

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

配置应用引导图

选项应用的引导图是可选配置，不需要在native/config.js进行配置项目的修改，只需要将对应的资源文件放置在工程根的splash目录下即可！

配置菜单栏和导航栏

菜单栏和导航栏的配置都和views的配置相关联，以区分全局默认和局部特殊配置的不同。

  1. menuBar，配置菜单栏的默认配置项，包括：背景色、选中色、默认色、菜单项
  2. navBar，配置导航栏的默认配置项，包括：背景色、文本色、是否显示
  3. views，配置当前APP中所使用到的所有视图，原则上所有的视图都应该在此配置项中定义（现阶段不强制）
1
2
3
4
5
6
7
8
9
//配置文件的定义
module.exports = {
    menuBar:{
    },
    navBar:{
    },
    views:{
    }
};

配置应用视图

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    views:{
        "main":{
            url:"",
            navBar:{
                title:"",
                backgroundColor:"",
                titleColor:"",
                type:""
            }
        }
    }
};

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的配置说明

配置应用菜单栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
    menuBar:{
        backgroundColor:"",//背景色
        defaultColor:"",//默认菜单颜色
        selectedColor:"",//菜单选中颜色

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

        menus:[{
            text:'',//菜单的文本
            icon:'',//菜单图标在字体中的码点可以查看对应的css文件了解具体的码点，具体格式为0xabcd
            view:"",//当前菜单对应的视图名称，视图必须在views属性中定义
        }]
    }
};

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

  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配置项目中进行了配置

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

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

配置应用导航栏

1
2
3
4
5
6
7
8
module.exports = {
    navBar:{
       title:"",
       backgroundColor:"",
       titleColor:"",
       type:""
    }
};

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

  1. navBar.title,导航栏文本，显示当前view的辩题信息
  2. navBar.backgroundColor，标题栏背景色
  3. navBar.titleColor，标题栏文本颜色
  4. navBar.type，标题栏类型，可选项：0-不使用标题栏，1-默认标题栏

其他配置项目

最后，可以在plugins配置项中配置APP中使用的插件信息，如扫一扫，分享等；

1
2
3
4
5
6
7
8
module.exports = {
    plugins:{
        "scan":{
        },
        "share":{
        }
    }
};

使用说明

特别注意：ImageMagick不能安装到中文路径下

本插件自动裁剪图片的功能依赖ImageMagick，在使用本插件打包之前需要先安装ImageMagick软件包并在命令行尝试执行magick指令：

1
2
3
4
5
6
abel@abel-pc ~> magick -version
Version: ImageMagick 7.0.7-16 Q16 x86_64 2017-12-26 http://www.imagemagick.org
Copyright: © 1999-2018 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenCL OpenMP 
Delegates (built-in): bzlib cairo fontconfig freetype gslib jng jp2 jpeg lcms lqr ltdl lzma openexr pangocairo png ps raw rsvg tiff webp wmf x xml zlib

ImageMagick的安装方法可以参考这里。

ImageMagick的安装完成后需要将ImageMagick的安装目录添加到系统path内。

特别注意：ImageMagick不能安装到中文路径下

第一步：创建做包工程

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

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

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

第三步：打包及上传

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

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

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