一直以来开发小程序都是中规中矩的使用微信小程序开发工具，原生开发小程序。最近偶然发现了一个腾讯出品的小程序开发框架WePY，是对小程序做了进一步的封装，看起来亮点多多。
优势
- 使用类似于目前最为火爆的前端框架Vue.js的开发风格，前端开发者可以轻松掌握
- 支持使用第三方的NPM资源，可使用的组件更为丰富
- 支持最新的JS语法，支持ES6、ES7的若干新特性
- 单文件模式，不再像原生小程序那样一个页面需要四个文件
WePY的优势还在于相比其他类似的小程序开发框架，它的开源时间较早，有极其丰富的组件库，也有很多的Demo可供参考，比如微信小程序wepy框架开发资源汇总。
开始安装
- 全局安装WePY命令行工具wepy-cli，如果有权限问题请在前面加上sudo。
npm install wepy-cli -g
- 使用
wepy init创建WePY项目。
// 使用空模板创建
wepy init empyt myproject
// 使用基础模板创建
wepy init standard myproject
// 使用其他GitHub上的demo
wepy init wepyjs/wepy-wechat-demo myproject
- 在项目目录下安装依赖
cd myproject
npm install
- 运行项目
// 测试(该命令下会运行 wepy build --watch)
npm run dev
// 正式(项目包会减小,该命令下会运行 cross-env NODE_ENV=production wepy build --no-cache)
npm run build
执行上面的命令后，再项目根目录会生成一个叫做dist的文件夹，用微信开发者工具打开这个目录，里面就是典型的小程序架构的项目了。
编译小程序项目前记得要把一些设置关掉，如关闭ES6转ES5选项，关闭代码样式自动补全选项，关闭代码压缩上传选项，开启不检查域名选项。
IDE配置
在IDE方面我使用的口碑较好的WebStorm来进行WePY开发。默认情况下WebStorm是不识别WePY类型的文件的，为了使其实现对wpy文件的渲染，如下图所示，打开WebStorm的偏好设置，在Vue.js的Template里面添加wpy后缀的识别。
另外也推荐使用VS Code去进行WePY开发，VS Code是目前最流行的代码编辑器之一，有很丰富的插件扩展，比如Vetur-wepy插件就直接对wpy文件进行了正确的渲染，minapp插件对小程序的标签、属性进行了正确的补全等等。如果喜欢轻量级编辑器的朋友可以选择这款只有几十M的VS Code。
相关文件配置
-
package.json
-
scripts: WePY项目可执行的npm scripts,默认有dev, build, test三个命令，可以通过
npm run dev/build/test来执行。比如npm run dev默认情况下就是执行的wepy build --watch命令，npm run build就是执行的cross-env NODE_ENV=production wepy build --no-cache命令。建议把dev命令改为
cross-env NODE_ENV=development wepy build --watch，这样在使用npm run dev或者npm run build时，在wepy.config.js中可以通过process.env.NODE_ENV拿到不同的环境变量值。 -
dependencies: 项目所依赖的模块
-
devDependencies: 只下载使用某些模块，而不下载这些模块的测试和文档框架
-
-
package-lock.json
所有node_modules里面的模块的版本、地址、依赖等相关信息。它和package.json的关系就类似于iOS项目里面podfile和podfile.lock文件的关系。
-
project.config.json
- setting: 对应标准小程序项目里面的project.config.json文件里面的setting设置。es6为是否开启es6转es5，postcss为上传代码时是否自动代码补全，minified为上传代码时是否代码压缩，urlCheck为是否检查安全域名和TLS版本。
- miniprogramRoot: 编译的微信小程序项目所在目录，默认为"./dist"。
-
wepy.config.js
网友评论