小程序开发环境

前端开发环境部署

Node.js 环境安装

 Mac 下安装 NVM

 Linux 下安装 NVM

 Windows 下安装 Node

安装 PostMan

PostMan 是一款跨平台，方便我们调试 API 的工具，你可以在 PostMan官网 下载，或者使用 百度网盘下载。

小程序个人账号申请

要开发微信小程序，首先需要申请小程序的个人账号。 ---- 链接 微信公众平台

安装微信开发者工具

微信开发者工具 是官方发布的微信开发 SDK，可以帮助我们简单、高效地开发和调试小程序。

安装 wepy-cli

使用下面命令进行全局安装，Mac 如无权限加上 sudo

$ yarn global add wepy-cli

安装成功，通过命令 wepy -v 可以查看到目前版本。

使用 wepy init standard 来初始化项目

$ wepy init standard ./

文件夹名称类型简介
dist --- 存放编译后的文件
src --- 源码文件
src/app.wpy --- 项目入口文件
src/pages --- 存放小程序页面
src/components --- 存放小程序组件
src/mixins --- 存放 Mixin 文件
node_modules --- NPM 依赖模块
src/index.template.html --- 模板页面html
wepy.config.js --- 全局配置文件
yarn.lock --- 依赖列表，确保这个应用的副本使用相同版本的依赖
package.json --- 项目的 package 配置
project.config.json --- 开发者工具配置
.wepyignore --- WePY 忽略的文件
.wepycache --- WePY 缓存文件，防止在build时，重复build npm目录
.prettierrc --- prettier 配置文件
.eslintrc.js --- eslint 配置文件
.eslintignore --- eslint 忽略的文件
.editorconfig --- 编辑器配置文件

WePY 依赖于很多 node 包，执行 yarn 安装这些包：

 $ yarn

最后对项目进行编译，并持续监听代码变化：

 $ wepy build --watch

dist 目录就是编译好的文件目录，点击右上角的 详情，可以看到开发者工具已经适配好 WePY 框架，默认将 ES6 转 ES5，上传代码时样式自动补全，代码上传时自动压缩 三个选项关闭，这里一定不要勾选这三个选项，否则调试的时候会报错。

至此，WePY 框架环境安装完成！