wepy-小程序开发框架学习（一）

一、安装npm

由于新版的NodeJS已经集成了npm，我们可以安装NodeJS来实现安装npm。

首先去nodejs官网(https://nodejs.org/en/)上下载最新版的nodejs，如下图，点击下载

下载完成以后，一路next即可安装，如需更改安装目录，请自行配置。

安装完成以后验证npm是否安装成功：运行cmd命令

npm -v

得到如下图所示，我的版本是6.0.0

表示安装成功。

二、安装wepy

用管理员身份打开cmd命令窗口，然后执行cmd命令

npm install wepy-cli -g

进行全局安装wepy（此命令也是更新wepy的命令），如下图所示，表示wepy安装成功，标红处为版本号

此处需注意的是要用管理员身份运行cmd命令，如非管理员身份运行可能会出现权限问题导致安装失败，如下图：

三、开始一个小程序

wepy提供一些小程序的模板，就是一些小例子，下面我们来看看这些模板

运行cmd命令进入自己想要下载的目录，然后输入

wepy list

回车查看官方提供的模板，如下图（标红处为模板，标黄处为下载模板的命令）

下面我们来下载一份空模板来看看，在cmd命令窗口输入

wepy init empty myproject

如下图：

出现一些乱码，编码格式的问题，不影响下载代码，可以忽略，我们继续

命令执行会让你输入Project name，AppId等等，我直接回车使用默认

最后一行问你是否使用ESLint，我们先选择否（输入n即可），先拿到一个最简单的模板看看，具体后面再说

然后我们去我们的模板看看它的结构（我用的Sublime Text3编程工具打开文件夹，这个编程工具根据自己的喜好选择就好）

首先我们看一下项目结构（这是编译之前的结构）

├── src                    代码编写的目录（该目录为使用WePY后的开发目录）

|   ├── pages              WePY页面目录（属于完整页面）

|   |   ├── index.wpy      index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）

|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）

└── package.json           项目的package配置

另外还有一些配置文件如

project.config.json：对应小程序里的project.config.json文件里的某些属性配置

wepy.config.js：wepy编译方面的某些配置

下面执行cmd命令来下载npm依赖

npm install

如下图所示

下面我们来对这个模板编译一下看看，继续执行cmd命令：

wepy build -w

此命令表示开启实时编译，我们对这个项目所做的更改都会实时编译到编译目录里

报了个WARNING,未安装wepy-eslint，但不影响编译，查看了一下是上面选择是否使用eslint，上面我们选择了否，而下载的模板中使用了这个，我们可以找到相关的配置文件，关掉后就不报警了，即将wepy.config.js里的eslint的属性值改为false即可，如下图所示：

在上图，我们同时也看到了，多了一个dist目录，这个目录就是编译的目录

还有一个node_modules目录，是npm下载依赖的目录（这个目录在执行npm install时就已经创建）

编译完成后，我们就可以把项目的根目录加到小程序开发工具上查看，如下图所示：

这样，一个hello world就完成了，但是项目可能运行会报错，解决方法如下图，点击右上角详情按钮，会出现被我标蓝的窗口，将es6转es5取消选择即可

之所以将项目的根目录加入小程序开发工具中即可运行，是因为1.7.0 之后的版本init新生成的代码包会在根目录包含project.config.json文件，这个文件中设置了小程序的根目录，所以直接把项目的根目录加入到小城西开发工具上可以运行，若是1.7.0之前版本，也可以通过手动编写该文件，然后这样加入小程序开发工具运行，编写内容如下

{
     

  "description": "project description",

  "setting": {
     

    "urlCheck": true,

    "es6": false,

    "postcss": false,

    "minified": false

  },

  "compileType": "miniprogram",

  "appid": "touristappid",//小程序的appid

  "projectname": "Project name",//小程序的项目名称

  "miniprogramRoot": "./dist"//根目录

}