自从我在2016年9月发布第一套小程序视频教程以来，很多同学开始利用这套视频教程走上小程序开发之路。 同时建立了多个小​​程序交流QQ群。 到目前为止，群里已经人满为患，我已经无法在群里回答有关小程序的问题了。

但有时我想分享一些有用的信息，我该怎么办？ 我想了想，决定通过【微信公众号】分享出来。

小程序发展到今天，已经开放了很多好消息，API也变得非常丰富和完善。

然而，开发小程序往往非常繁琐。 原因是小程序架构需要四个文件才能写入一个页面：

页面.wxml

页面.wxss

页面.js

页面.json

同时还存在很多问题，ES6/7语法支持不完整，代码编写体验较差。

有好的解决办法吗？

答案是：WePY！

WePY是腾讯开源的小程序开发框架。 WePY的第一个版本于2016年12月发布，当时小程序刚刚推出。 到目前为止，WePY已经发布了52个版本。

WePY官网是这样描述的：

“WePY是一个支持基于组件的小程序开发的框架。 通过预编译，开发者可以选择自己喜欢的开发风格来开发小程序。 框架的细节优化和引入，都是为了让小程序项目的开发更简单、更高效。”

同时，WePY借鉴了Vue.js（以下简称Vue）的语法风格和功能特点。 它支持Vue的很多特性，比如父子组件、组件间通信、属性计算、监听器、值传输、槽分配，以及很多高级特性：混合、拦截器等。

超好的？ 如何使用它？

第 1 步：在计算机上安装 WePY

npm wepy-cli -g

步骤2：通过WePY创建项目

初始化

第三步：安装依赖项

新项目管理

至此，项目就创建完成了，我们可以通过第三方开发工具打开项目了。 这里我使用（这个工具对我个人来说是世界上最好的开发者工具）。

如果想查看项目运行效果，只需执行上图命令即可：

哭泣--

执行该命令后，目录中会生成一个名为dist的文件夹。 然后用微信开发者工具打开dist文件夹，可以看到下图。

注意：通过微信开发者工具打开可能会出现错误。 切记不要勾选以下三个选项：ES6转ES5/上传代码时自动补全样式/上传时自动压缩代码。

同时，我们编写的任何代码都会实时反馈到微信开发者工具的预览窗口。

在上图中，我可以看到一个名为app.wpy的文件，它是小程序的入口文件。 打开它我们会看到如下代码：

也就是说，原生开发的小程序中，入口文件app.js、app.json、app.wxss都已经合并到了app.wpy文件中。

就像 Vue 一样，我们只需要在 中编写代码，在 中编写 css 代码，在 = {} 中编写配置代码。

在原生开发环境中，我们编写一个页面需要以下四个文件：

页面.wxml

页面.wxss

页面.js

页面.json

现在，我们只需要编写一个 page.wpy 文件，其中包含以下内容：

编写js代码，={}编写页面配置，编写布局代码； 编写样式代码。

注意：此时，代码可能不会高亮，但是没关系，只需要以下两步：

1.打开，搜索，搜索Vue.js插件并安装。

2.打开，搜索File，找到Vue.js，添加*.wpy。

你还记得小程序默认自动生成的代码吗？ 以下代码是获取用户信息：

= () {

var self = this;

wx.({

： （数据） {

wx.({

: () {

自己。（{： }）;

});

});

但在WePY中，只需要两行代码就足够了：

wepy 来自 'wepy'；

() {

哭泣。();

这。 = wepy.();

没有嵌套回调，没有 () 赋值。

使用WePY组件来替换小程序原生模板也是非常酷的，例如：

55, : 数字 < 45}"> {{数字}}

上面的代码写了一个名为的组件，效果如下：

按[+][-]按钮可以修改以下数据。

然后在页面中导入该组件（page.wpy）就可以使用了，例如：

无论是在代码复用性还是开发体验上，确实是无法比拟的。 我们公司有N个小程序都是使用WePY开发的，目前没有发现任何坑。 毕竟：

1.WePY是腾讯官方开源产品，官方保障

2、2016年12月上线，至今已发布50多个版本，非常成熟

3.基于Vue的生态编译工具和代码高亮，生态完整

4.支持组件化、插件化、NPM、ES6/7特性，让开发变得非常有趣