微信小程序wepy框架入门教程-搭建开发环境（一）

1：安装node

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，WePY借鉴了Vue.js（后文简称Vue）的语法风格和功能特性，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。

5640239-f49d5024e96b3fe7.png

安装成功之后显示如下，查看版本，安装成功。

5640239-b9aff0f1769bf687.png

2：安装全局淘宝npm镜像

进入D盘（当然可以根据你自己的选择来安装路径）全局安装镜像。由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功之后显示如下，查看版本，安装成功。

5640239-75d9e0497af049ef.png

3:全局安装或更新WePY命令行工具

npm install wepy-cli -g

5640239-307487e888883879.png

4：初始化一个项目myproject

注意版本,因为我的版本是1.7.3的 1.7.0之后的版本使用 wepy init standard myproject 初始化项目

wepy init standard myproject

暂时可以一路回车，后续如果遇到要做具体的项目的时候，可以根据项目需要填写。

5640239-f2fced40c5e0e25a.png

打开d盘，可以看见初始化的项目

5640239-cf477e9c5f958672.png

目录结构

├── dist                   微信开发者工具指定的目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules           
├── src                    代码编写的目录（该目录为使用WePY后的开发目录）
|   ├── components         WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
|   |   ├── com_a.wpy      可复用的WePY组件a
|   |   └── com_b.wpy      可复用的WePY组件b
|   ├── pages              WePY页面目录（属于完整页面）
|   |   ├── index.wpy      index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json           项目的package配置

5：进入myproject

cd myproject

6:安装依赖

在新建的项目里面安装需要的依赖包

npm  install

5640239-9895ffbcf9b557a9.png

安装完成之后可以看见，文件里面多出了两个依赖文件

5640239-69528dd33f0c30d2.png

7:进行实时编译

wepy build --watch

5640239-bcfec167790602ad.png

8：在微信开发者工具打开

可以看到，刚才创建的项目

5640239-655765fcb1a34aac.png

注意：因为小程序开发工具对wepy文件不太友好，无法直接在开发者工具里面打开，所以要另外选择编辑器编写代码，开发者工具可进行调试和查看效果

5640239-cd01cd59e989a0fb.png

ps:简书写文章的一个缺陷，就是有时候在上传markdown图片的过程中不能继续使用键盘，等图片上传好之后才可以，不然通篇文章都会消失，进入顶部重新编辑，遇到过两三次，编辑好的文章就这样消失了，头疼，只好又开始重新写一遍，权当是加深印象咯。

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题