项目管理规范
目录结构
工程目录
weex-toolkit脚手架工具生成的小程序工程模板目录结构如下:
project-template
├── configs //工程运行、热更新、插件、依赖及webpack等配置文件目录
├── dist //webpack编译src文件夹生成的目录,即最终发布的小程序文件,如js文件、静态文件等
├── node_modules //工程依赖包,与package.json的配置相关
├── platforms //平台模板目录
├── plugins //插件下载目录
├── src //业务代码,项目开发的源文件目录
│ │── components //组件配置目录
│ │ └── HelloWorld.vue //一个欢迎页组件
│ │── entry.js //入口配置文件
│ │── index.vue //根组件
│ └── router.js //路由配置文件
├── web //web应用界面相关配置目录
├── package.json //npm的配置文件,里面包含小程序开发所用依赖配置
├── .babelrc //支持ES6语法的配置文件,删除后无法使用ES6
├── .eslintrc //ESLint代码风格管理配置文件
├── android.config.json //安卓端小程序项目配置文件,添加应用信息
├── ios.config.json //ios端小程序项目配置文件
......
└── webpack.config.js //webpack全局配置文件
src项目目录
一般情况下,开发者仅需专注于小程序工程中 src
目录下的页面源码开发工作,可参照如下目录结构对小程序工程进行规范化布局:
/src
│── assets //本地静态文件存储目录
│ │── css //全局样式文件目录
│ │ └── index.css //全局样式配置文件
│ │── font //字体文件目录
│ └── img //图片文件目录
│── components //组件配置目录
│ └── XX.vue //一个通用组件
│── filters //通用过滤器
│ └── index.js //过滤器配置文件
│── mixins //全局混入,代码复用操作
│ └── index.js //全局混入配置文件
│── store //Vuex全局状态管理工具
│ └── index.js //配置文件
│── views //小程序页面组件存放目录
│ └── XXX.vue //一个页面级组件
│── entry.js
│── index.vue
└── router.js
配置文件管理
config.json配置
config.json 用来对小程序进行全局配置,定义小程序的应用名、图标、入口文件等。 以下是一个包含了所有配置选项的config.json:
{
"packName":"com.landicorp.ulightapp",
"apkName":"轻应用",
"versionCode":"1",
"versionName":"1.0.0",
"icon":"favicon.png",
"enter":"index.js",
"description":"这是小程序应用Demo"
}
config.json配置项列表如下:
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
packName | String | 是 | 平台识别字段。公司域名+包名 |
apkName | String | 是 | 小程序应用显示名 |
versionCode | String | 是 | 平台识别字段。用于区分版本 |
versionName | String | 是 | 小程序版本名 |
icon | String | 是 | 小程序应用图标 |
enter | String | 是 | 小程序第一个页面入口路径 |
description | String | 否 | 小程序扫描信息 |
package.json配置
在每个小程序工程的根目录下,一般都会有一个 package.json 文件,定义了这个项目所需要的各种模块,以及项目的配置信息,如名称、版本、脚本命令等。
package.json 文件可以手动编写,也可在项目初始化时自动生成。具体结构如下所示:
{
"name":"awesome-project",
"version":"1.0.0",
"description":"A ums_weex miniProgram"
"scripts": {
"start": "npm run serve",
"build": "webpack --env.NODE_ENV=common --watch",
"dev": "webpack --env.NODE_ENV=common --progress --watch",
"serve": "webpack-dev-server --env.NODE_ENV=development --progress",
......
},
"dependencies": {
"phantom-limb": "0.0.1",
"vue": "^2.5.11",
"weex-vue-render": "^1.0.17"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.8",
"eslint": "^4.15.0",
......
},
......
}
package.json 文件中主要包含三个重要字段:
scripts
:定义了运行脚本命令的 npm 命令行缩写;dependencies
:表示项目所需的运行时依赖;devDependencies
:表示项目所需的开发时依赖。
提示
1.若开发者对 package.json 文件进行手动配置,项目名称和项目版本这两个参数是必须的,没有则无法执行 npm install
操作。
2.开发者引入依赖时,可选择运行时、开发时依赖:
$ npm install --save <packname> //运行时,例:element,vue-router
$ npm install --save-dev <packname> //开发时,例:xxx-cli,less-loader,babel-loader
小程序界面配置
为提升开发体验,银商小程序框架为开发者提供了小程序界面整体配置功能。开发者可在完成 npm run build
打包后,在 dist 文件夹下加入 xxx.json 配置文件来实现界面配置。
/dist
│── assets //本地静态文件存储目录
│── xxx.json //包文件夹根目录下加入xxx.json配置文件
└── index.js
- app.json
定义小程序的windows属性、tabBar属性、permission属性,具体请看全局配置。
- xxx.json
定义小程序的某一页面的windows属性,每一个小程序页面(如:xxx.js)在同目录下放置xxx.json文件来对本页面的窗口表现进行配置。具体请看页面配置。