小程序组件化开发框架

WePY项目的创建与使用

  1. 环境介绍:macOS Sierra 10.12.6 (16G29)
$ npm --version
5.4.2

$ node -v
v8.8.1
  1. 全局安装或更新WePY命令行工具
$ npm install wepy-cli -g
/usr/local/bin/wepy -> /usr/local/lib/node_modules/wepy-cli/bin/wepy.js

> fsevents@1.1.2 install /usr/local/lib/node_modules/wepy-cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/wepy-cli/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ wepy-cli@1.5.9
added 255 packages in 27.108s
  1. 在开发目录中生成Demo开发项目
$ wepy new wxapp2
[21:16:49] [创建] 目录:wxapp2
[21:16:49] [写入] 配置: package.json
[21:16:49] [拷贝] 文件: .editorconfig
[21:16:49] [拷贝] 文件: .eslintignore
[21:16:49] [拷贝] 文件: .eslintrc.js
[21:16:49] [拷贝] 文件: .wepyignore
[21:16:49] [拷贝] 文件: src/app.wpy
[21:16:49] [拷贝] 文件: src/components/counter.wpy
[21:16:49] [拷贝] 文件: src/components/group.wpy
[21:16:49] [拷贝] 文件: src/components/groupitem.wpy
[21:16:49] [拷贝] 文件: src/components/list.wpy
[21:16:49] [拷贝] 文件: src/components/panel.wpy
[21:16:49] [拷贝] 文件: src/index.template.html
[21:16:49] [拷贝] 文件: src/mixins/test.js
[21:16:49] [拷贝] 文件: src/pages/index.wpy
[21:16:49] [拷贝] 文件: wepy.config.js
[21:16:49] [执行] 执行命令: npm install --save wepy wepy-com-toast wepy-async-function
[21:16:49] [执行] 执行命令: npm install --save-dev wepy-compiler-babel babel-plugin-transform-decorators-legacy babel-plugin-syntax-export-extensions babel-plugin-transform-export-extensions babel-plugin-transform-class-properties babel-preset-env wepy-compiler-less cross-env eslint@3.18.0 babel-eslint@7.2.1 eslint-config-standard@7.1.0 eslint-friendly-formatter@2.0.7 eslint-plugin-html@2.0.1 eslint-plugin-promise@3.5.0 eslint-plugin-standard@2.0.1 wepy-eslint
[21:16:49] [信息] 可能需要几分钟, 请耐心等待...
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN wxapp2@1.2.8 No description
npm WARN wxapp2@1.2.8 No repository field.

+ wepy-async-function@1.4.4
+ wepy@1.6.0
+ wepy-com-toast@1.0.2
added 5 packages in 3.299s
npm WARN wxapp2@1.2.8 No description
npm WARN wxapp2@1.2.8 No repository field.

+ babel-eslint@7.2.1
+ eslint@3.18.0
+ eslint-friendly-formatter@2.0.7
+ eslint-plugin-promise@3.5.0
+ eslint-plugin-html@2.0.1
+ babel-plugin-transform-decorators-legacy@1.3.4
+ eslint-config-standard@7.1.0
+ eslint-plugin-standard@2.0.1
+ babel-plugin-syntax-export-extensions@6.13.0
+ babel-plugin-transform-class-properties@6.24.1
+ babel-plugin-transform-export-extensions@6.22.0
+ wepy-compiler-babel@1.5.1
+ babel-preset-env@1.6.1
+ wepy-compiler-less@1.3.10
+ cross-env@5.1.0
+ wepy-eslint@1.5.2
added 308 packages in 40.672s
[21:17:34] [完成] 安装依赖完成
[21:17:34] [执行] 执行命令: wepy build
[21:17:34] [信息] 可能需要几分钟, 请耐心等待...
[21:17:35] [编译] 入口: src/app.wpy
[21:17:35] [写入] JSON: dist/app.json
[21:17:35] [编译] 组件: src/components/counter.wpy
[21:17:36] [编译] 组件: src/components/group.wpy
[21:17:36] [编译] 组件: src/components/groupitem.wpy
[21:17:36] [编译] 组件: src/components/list.wpy
[21:17:36] [编译] 组件: src/components/panel.wpy
[21:17:36] [拷贝] HTML: src/index.template.html
[21:17:36] [编译] 页面: src/pages/index.wpy
[21:17:36] [写入] JSON: dist/pages/index.json
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/wepy.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy-async-function/index.js
[21:17:36] [写入] JS  : dist/app.js
[21:17:36] [写入] JS  : dist/components/counter.js
[21:17:36] [写入] JS  : dist/components/group.js
[21:17:36] [写入] JS  : dist/components/groupitem.js
[21:17:36] [写入] JS  : dist/components/list.js
[21:17:36] [写入] JS  : dist/components/panel.js
[21:17:36] [写入] JS  : dist/mixins/test.js
[21:17:36] [写入] WXML: dist/pages/index.wxml
[21:17:36] [拷贝] 依赖: dist/npm/wepy-com-toast/toast.js
[21:17:36] [写入] JS  : dist/pages/index.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/app.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/page.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/component.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/event.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/base.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/util.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/mixin.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/wepy.js
[21:17:36] [拷贝] 依赖: dist/npm/wepy-async-function/global.js
[21:17:36] [拷贝] 依赖: dist/npm/promise-polyfill/promise.js
[21:17:36] [拷贝] 依赖: dist/npm/regenerator-runtime/runtime.js
[21:17:36] [写入] JS  : dist/npm/wepy-async-function/index.js
[21:17:36] [编译] Other: node_modules/wepy-com-toast/toast.wpy
[21:17:36] [拷贝] 依赖: dist/npm/wepy/lib/native.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/app.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/page.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/component.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/event.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/base.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/util.js
[21:17:36] [写入] JS  : dist/npm/wepy/lib/mixin.js
[21:17:36] [写入] JS  : dist/npm/wepy-async-function/global.js
[21:17:36] [写入] JS  : dist/npm/promise-polyfill/promise.js
[21:17:36] [写入] JS  : dist/npm/regenerator-runtime/runtime.js
[21:17:36] [写入] WXML: dist/npm/wepy-com-toast/toast.wxml
[21:17:36] [写入] JS  : dist/npm/wepy-com-toast/toast.js
[21:17:36] [写入] WXSS: dist/app.wxss
[21:17:36] [写入] JS  : dist/npm/wepy/lib/native.js
[21:17:36] [写入] WXSS: dist/components/counter.wxss
[21:17:36] [写入] WXSS: dist/components/group.wxss
[21:17:36] [写入] WXSS: dist/components/groupitem.wxss
[21:17:36] [写入] WXSS: dist/components/list.wxss
[21:17:36] [写入] WXSS: dist/components/panel.wxss
[21:17:36] [写入] WXSS: dist/pages/index.wxss
[21:17:36] [写入] WXSS: dist/npm/wepy-com-toast/toast.wxss
[21:17:37] [完成] 代码编译完成
[21:17:37] [完成] 项目初始化完成, 可以开始使用小程序。
  1. 切换至项目目录
$ cd wxapp2
  1. 开启实时编译
$ wepy build --watch
[23:01:22] [编译] 入口: src/app.wpy
[23:01:22] [写入] JSON: dist/app.json
[23:01:23] [拷贝] DS_STORE: src/.DS_Store
[23:01:23] [编译] 组件: src/components/counter.wpy
[23:01:23] [编译] 组件: src/components/group.wpy
[23:01:23] [编译] 组件: src/components/groupitem.wpy
[23:01:23] [编译] 组件: src/components/list.wpy
[23:01:23] [编译] 组件: src/components/panel.wpy
[23:01:23] [拷贝] HTML: src/index.template.html
[23:01:23] [编译] 页面: src/pages/index.wpy
[23:01:23] [写入] JSON: dist/pages/index.json
[23:01:23] [写入] JS  : dist/app.js
[23:01:23] [写入] JS  : dist/components/counter.js
[23:01:23] [写入] JS  : dist/components/group.js
[23:01:23] [写入] JS  : dist/components/groupitem.js
[23:01:23] [写入] JS  : dist/components/list.js
[23:01:23] [写入] JS  : dist/components/panel.js
[23:01:23] [写入] JS  : dist/mixins/test.js
[23:01:23] [写入] WXML: dist/pages/index.wxml
[23:01:23] [写入] JS  : dist/pages/index.js
[23:01:23] [写入] WXSS: dist/app.wxss
[23:01:23] [写入] WXSS: dist/components/counter.wxss
[23:01:23] [写入] WXSS: dist/components/group.wxss
[23:01:23] [写入] WXSS: dist/components/groupitem.wxss
[23:01:23] [写入] WXSS: dist/components/list.wxss
[23:01:23] [写入] WXSS: dist/components/panel.wxss
[23:01:23] [写入] WXSS: dist/pages/index.wxss
[23:01:23] [信息] 开始监听文件改动。
  1. 接下来直接参考 https://wepyjs.github.io/wepy/#/