AtmosphereMao

WePY

WePY官方文档

安装 wepy-cli

首先需要全局安装 wepy-cli：

1
2
3
$ sudo yarn global add wepy-cli
// 在windws环境下要加上--no-bin-links
> yarn global add wepy-cli --no-bin-links

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

初始化项目

1
2
3
4
5
6
7
8
9
$ wepy init standard ./weapp_project
? Yes // 目标文件已存在，是否继续
? weapp_project // 填写你的项目名
? wx63452****** // 填写你的AppID
? weapp laravel project // 填写你的项目描述
? AtmosphereMao@gmail.com // 开发者
? Yes // 使用Eslint
? Yes // 使用Redux
? Yes // 使用Web转换功能

WePY 结构

文件夹名称 类型 简介
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 安装这些包

1
2
3
$ yarn install
// 同上，windows需加--no-bin-links
> yarn install --no-bin-links

编译

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

1
2
3
4
$ wepy build --watch
// 如在homestead虚拟机环境下运行，会出现检测不到文件变化的情况
or
$ npm run dev

微信开发者工具调试

经过编译，可在微信开发者工具上看到小程序界面，查看项目 详情：

dist 目录就是编译好的文件目录，点击右上角的 详情，可以看到开发者工具已经适配好 WePY 框架

  • 默认将 ES6 转 ES5
  • 上传代码时样式自动补全
  • 代码上传时自动压缩

该三个选项关闭，这里一定不要勾选这三个选项，否则调试的时候会报错。


 上一页