WePY - 小程序的组件化开发框架

wepy vs mpvue

quick start

wepy 开发文档
1 全局安装 cli：npm i -g wepy-cli
- 查看版本：wepy --version
2 通过脚手架初始化项目结构：wepy init empty my-project
- empty 空模板
3 进入项目根目录，安装项目所有依赖项：npm i
4 启动项目，并开启实时编译：wepy build --watch
5 使用微信开发者工具打开 dist 目录
6 在微信开发者工具中配置：
- 关闭：ES6 转 ES5
- 关闭：上传代码时样式自动补全
- 关闭：代码压缩上传
- 开启：不校验合法域名

1 2	# 初始化 standard（示例）模板项目 wepy init standard my-project

.wpy 文件语法高亮

1 安装 vetur 插件（Vue 插件）
2 打开任意 .wpy 文件
3 点击右下角的选择语言模式，默认为纯文本
4 在弹出的窗口中选择 .wpy 的配置文件关联...
5 在选择要与 .wpy 关联的语言模式 中选择 Vue

不校验 wepy 文件的 template

在 VSCode 中添加配置："vetur.validation.template": false

功能实现

1 结构+样式
2 data 假数据
3 获取接口数据

开启 Promise 和 async

开启 async

解析 HTML

说明：将 HTML 解析为 wxml
使用场景：服务器端返回的商品详情是 HTML 字符串，需要转化为 wxml 才能展示
wxParse

wepy 项目开发注意点

功能列表

1 配置 window（外观）和 tabBar（底部 tab 栏）
2 首页页面结构和样式
3 首页获取接口数据渲染页面
- 发起请求：wepy.request({})
- 开启：不校验合法域名
4 开启 Promise/async 支持和封装 fetch
5 返回顶部
- 5.1 页面滚动到一定距离后才展示返回顶部按钮
- 5.2 点击返回顶部，实现页面回到顶部（ wx.pageScrollTo(OBJECT) ）

如何开始一个新功能

1 在 app.wpy 的 pages 中配置新页面路径
2 在 pages 目录中新建页面文件（文件名.wpy）
3 在页面中添加 template/style/script 三项内容

创建 wepy 文件报错说明

如果新建页面后小程序中报错，按以下方式处理：

1 终止 wepy build --watch 终端命令
2 关闭微信开发者工具
3 删除 dist 文件夹
4 重新运行 wepy build --watch 命令
5 重新打开微信开发者工具
说明：wepy 命令行工具自身的问题，会导致这个错误

小程序合法域名的说明

为了安全性的考虑，小程序中能够访问的接口域名需要在小程序管理后台配置后，才能正常访问
可以在微信公众平台|小程序中的设置 -> 开发设置 -> 服务器域名添加合法域名
在开发期间，可以绕过这个配置项，只需要在微信开发者工具中勾选 不校验合法域名，那么，小程序就可以请求任何域名的接口数据了
等到小程序真正上线的时候，就必须配置合法域名，否则，小程序无法正常获取数据以及上线

wepy 中数据操作的说明

读取数据

直接使用 this.swiperList 就可以访问了

设置数据

同步：this.swiperList = []
异步：
- 1 this.swiperList = []
- 2 this.$apply()

开启 Promise 和 async

注意：开启 Promise 支持后，原来回调函数的方式就不再支持了！

开启步骤如下：

1 安装：npm i -S wepy-async-function
2 修改 app.wpy，如下：

// 2.1 导入async包
import 'wepy-async-function'

export default class extends wepy.app {
  constructor() {
    super()

    // 2.2 让wepy中的API变为Promise的使用方式
    this.use('promisify')
  }
}

3 重启编译：wepy build --no-cache

封装 fetch 的说明

为什么要封装 fetch？
- 1 因为 wepy 提供的 request 使用繁琐
如何封装？
- 1 先开启 wepy 的 Promise/async 支持
- 2 封装 fetch，代替 wepy.request
封装的具体操作：
- 1 处理公共路径，以后每次请求的时候，只需要提供当前接口地址即可（BASEURL）
- 2 封装获取 data。封装前需要 res.data.data 才能获取到，封装后，只需要 res.data 就可以了