程序员

使用WePY进行小程序开发

2019-03-28  本文已影响0人  陌浅Ivan

一直以来开发小程序都是中规中矩的使用微信小程序开发工具,原生开发小程序。最近偶然发现了一个腾讯出品的小程序开发框架WePY,是对小程序做了进一步的封装,看起来亮点多多。

优势

WePY的优势还在于相比其他类似的小程序开发框架,它的开源时间较早,有极其丰富的组件库,也有很多的Demo可供参考,比如微信小程序wepy框架开发资源汇总

开始安装

  1. 全局安装WePY命令行工具wepy-cli,如果有权限问题请在前面加上sudo。
npm install wepy-cli -g
  1. 使用wepy init创建WePY项目。
// 使用空模板创建
wepy init empyt myproject
// 使用基础模板创建
wepy init standard myproject
// 使用其他GitHub上的demo
wepy init wepyjs/wepy-wechat-demo myproject
  1. 在项目目录下安装依赖
cd myproject
npm install
  1. 运行项目
// 测试(该命令下会运行 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。

相关文件配置

所有node_modules里面的模块的版本、地址、依赖等相关信息。它和package.json的关系就类似于iOS项目里面podfile和podfile.lock文件的关系。

上一篇 下一篇

猜你喜欢

热点阅读