wepy学习笔记之环境搭建

1,038 阅读2分钟

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

安装wepy-cli

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

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

初始化项目

wepy init standard demo1

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

   wepy-cli · Generated "demo1".

一个标准的名为demo1wepy项目就创建完成了。该项目会帮我们默认开启promiseasync等功能。如果需要安装一个简单的空模板,将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项目就这么搭建完成了,总体来讲还是很省心的。