wepy学习笔记之环境搭建

写了近两年小程序了，越来越发现原生小程序有太多鸡肋的地方。所以今天准备尝试一下wepy，正好最近手上有个外包，可以拿来练手。如果可以的话，或许会出一系列wepy相关的文章（偏实战），欢迎大佬们指正。

安装wepy-cli

npm install wepy-cli -g
wepy --version          //查看版本，这里是1.7.3

复制代码

根据文档介绍，wepy-cli在1.7.0之前和1.7.0之后是有区别的，这里使用的是1.7.3，所以下面的都是基于wepy-cli 1.7.3版本

初始化项目

wepy init standard demo1
复制代码

接下来就会弹出一系列的配置选项，按照自己的需求添加就行啦，最简单的直接全选。选完之后，会输出一个：

   wepy-cli · Generated "demo1".
复制代码

一个标准的名为demo1的wepy项目就创建完成了。该项目会帮我们默认开启promise、async等功能。如果需要安装一个简单的空模板，将wepy init standard demo1换成wepy init empty demo1即可。

运行项目

项目创建完成了，现在需要在微信开发者工具上查看下效果。

wepy build -w
复制代码

上面命令表示编译，然后监听文件的变化。但是这个时候坑爹的报错了，提示:

未发现相关 less 编译器配置，请检查wepy.config.js文件。
复制代码

根据报错可以知道，这是因为缺少less相关的包导致的，执行下面命令可以解决：

npm install less -d 
复制代码

然后再试试

wepy build -w     
复制代码

输出开始监听文件改动。。OK！现在可以打开微信开发者工具了，导入项目下面的dist目录，然后appid的话，有就填上，没有可以点击测试。
不出意外的话，它又会报错，大概是下面这样的。

后来查阅文档之后发现，原因出在开发工具上面默认开启了ES6转ES5，手动关闭就好了。

再次编译，然后查看。就会看到如下的界面：

尝试一下empty模板

• empty模板，的目录结构如下：

• standard目录机构如下：

对于学习而言，建议使用standard，因为其中部分安利给我们参考，不知道的时候可以看看官方的写法。

直接下载案例

除了以上两个基本的模板以外，官方还提供了其他的几个demo给我们作为参考，也可以直接拉取下来看看:

结尾

一个简单的wepy项目就这么搭建完成了，总体来讲还是很省心的。