项目管理规范

目录结构

工程目录

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文件来对本页面的窗口表现进行配置。具体请看页面配置