银商小程序

创建工程

第一步：项目初始化

借助 weex 脚手架模板对工程进行快速创建

$ weex create awesome-project

在等待 Weex 脚手架完成功能模块的安装后，开发者可根据提示，对工程进行详细配置，具体内容如下：



















 
 
 
 

? Project name awesome-project      //确定项目名称
? Project description (A weex project) A ums_weex miniProgram      //添加项目名称
? Author (XXX <xxx@XX.com>)   xxx    //填写所有者信息
? Select weex web render      //选择渲染器，推荐选择第二个（通过上下键切换）
  1.0.17 Current: latest features
> 0.12.17 LTS: recommended for most users
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets)      //选择js编译器，推荐选择'stage-0':支持所有ES6语法
> stage-0: recommended for most users, support you to use all es6 syntax
  stage-1
  stage-2
  stage-3
? Use vue-router to manage your view router?(not recommended)(y/N)  Yes   //根据项目实际，选择是否添加路由模块
? Use ESLint to lint your code?(Y/n)  Yes   //是否使用 ESLint 进行代码规范管理，统一代码风格
? Pick an ESLint preset (Use arrow keys)      //选择一个 ESLint 预设代码风格（由于上一步选择了使用 ESLint，需进一步配置，推荐standard标准模式）
> standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)
? Set up unit tests (Y/n)  Yes    //选择是否安装单元测试
? Should we run 'npm install' for you after the project has been created? (recommended) (Use arrow keys)      //根据实际需要选择包管理工具对项目依赖进行安装，或者选择最后一项后手动进行操作
> Yes, use NPM
  Yse, use Yarn
  No, I will handle that myself

执行完命令后，在 awesome-project 目录中已经为我们生成了标准项目结构。

第二步：npm安装项目依赖

提示

1.若开发者在项目创建的最后一步，选择了 Yes, use NPM 进行依赖自动安装，可跳过此步直接进入【第三步： 运行工程】。

2.若开发者对项目目录下 package.json 文件进行了手动配置，也可参考该步骤，对项目依赖进行补充更新。

脚手架工具生成项目工程模板时，已经把小程序开发会用到的基础插件配置在 package.json 文件夹中。

开发者也可以根据项目的需要，自行配置package.json文件。

开发者在首次编译项目前，需要执行安装依赖操作:

注意

开发者在进行安装依赖操作前，需将当前路径切换到已创建的工程目录下。 此时应在第一步项目初始化步骤的基础上，切换到 /awesome-project目录。

$ cd awesome-project      //切换当前路径到已创建工程目录下
$ npm install      //安装依赖

以上命令会在项目 根目录 生成 node_modules 文件夹，把开发所需依赖文件安装进项目中。

其他安装依赖操作

国内开发者使用 npm 包管理工具下载插件也许需要很长时间，若安装了淘宝 cpnm 镜像，可执行如下操作：

$ cnpm install

第三步：运行工程

weex-toolkit创建的工程是标准的webpack工程，可分别通过如下几种方式运行该工程：

  • start: 启动一个本地的 Web 服务，监听8081端口，此时浏览器会自动打开一个服务窗口。开发者也可手动访问链接http://172.20.10.12:8081查看页面在 Web 下的渲染效果，可以像一个普通 Vue.js 项目一样来开发。
$ npm start      //或执行 npm run serve ,可达到一样的效果
  • debug: 运行weex-devtool, 实现了Chrome Debugging Protocol的inspect/debug。通过此工具，可以快速调试小程序中的JS代码。
$ weex debug [filename]

随后，使用银联商务的Playground App扫描以上二维码，可以在App上看到小程序效果。

  • build: 源码编译，在 dist 文件夹下生成JS Bundle。该命令主要用于正式生成小程序。
$ npm run build

← 项目管理规范 →