手把手小程序开发【1-WePY的安装】

在心中，你是一棵大树，我是大树上的一片绿叶;在心中，你是一座花园，我是花园里的一朵小花;在心中，你是一幢大厦，我是大厦里的一块砖石;在心中，祖国，永远爱着你!

小程序很火，以后一定会越来越多接触到小程序的，很有必要来学一学呀。

1

安装Node.js

下载地址：

http://nodejs.cn/download/，如下是Node的中文社区界面：

验证Node和NPM是否安装成功：

window下 “win键+R”，在输入框中输入cmd，打开命令行界面：

在命令行里，输入以下命令，查看是否安装成功：

node -v
npm -v

都有显示版本号，则说明node和npm都已经安装成功。

2

更改npm的镜像源：

有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：

命令行安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm 是否安装成功：

cnpm -v

如上，出现cnpm的相关信息，则说明安装成功，往下就可以用cnpm来代替npm下载安装包了。

3

WePY的简介及安装

简介：

WePY是对原生小程序的一种优化型的开发框架，该框架并不是开发必须的，但使用它可以极大提高开发的效率以及组件化的应用。

更多详细的WePY可以到官网（https://tencent.github.io/wepy/）了解一下。

安装：

WePY的安装是使用npm来安装的，所以本节开始就先安装了Node和npm。

安装WePY，使用一下命令行安装，用cnpm代替npm，不然可能下载得很慢：-g 的意思是全局安装。

cnpm install wepy-cli -g

稍等片刻即可安装成功。安装完成，输入以下命令，查看WePY是否安装成功。

可以看到，显示WePY的版本号，则说明安装成功。

4

运行小程序

1、在自己的系统中创建一个空的文件夹，然后用编辑器打开。如下，是我创建的文件夹的路径，用PHPStorm代码编辑器打开：

2、“Alt+F12”,打开编辑器内置的命令行，输入以下代码：

wepy init standard helloworld

跟上以上图片的操作，输入一些项目的信息，就可以看到在当前我们创建的目录中生成了一些文件，如下：

以上创建的信息，如APPID那些，并不会作用于小程序，这是信息只会记录在项目中的 project.config.json 文件中，如下：

{
  "description": "A WePY project",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "helloworld",
  "miniprogramRoot": "./dist"
}

我们可以看到该项目中的所有文件，但这只是一个框架，还无法编译，这就需要使用 npm install 命令安装项目依赖。

3、编译

使用如下代码，项目会自动进行编译：

npm install
wepy build --watch

编译后，我们会看到在项目中生成一个叫“dist”的文件夹，项目编译后的文件都会存放在这个文件夹。

使用“wepy build --watch”这个命令，只要我们在项目中有改动过代码，程序会自动编译。

4、小程序

用微信开发者工具导入一个项目，目录指向“dist”文件夹：

这样我们小程序就创建完成了，但我们会看到控制台会有报错：

这主要是因为WePY项目和原生小程序对于代码的处理方式不同造成的。只需要取消ES6转ES5，上传代码时样式自动补全、上传代码自动压缩混淆这3项，具体如下：

看到如下界面，则说明可以用WePY框架开发小程序了：

本来还想来个Hello World，但限于篇幅过长，就作罢了。下去咱们可以用这个来玩玩，自己动手做几个小程序。这节就先到这里了。