WePY框架学习_wepy build --watch

一、WePY 简介

1. 什么是 WePY

WePY 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装

2. 为什么使用 WePY

WePY 相比于原生小程序开发，拥有众多的开发特性和优化方案

• 开发风格接近于 Vue.js，支持很多vue中的语法特性；
• 通过 polyfill 让小程序完美支持 Promise；
• 可以使用ES6等诸多高级语法特性，简化代码，提高开发效率；
• 对小程序本身的性能做出了进一步的优化；
• 支持第三方的 npm 资源；
• 支持多种插件处理和编译器；

二、WePY 的安装与运行

1. 安装 WePY

• WePY 的安装或更新都通过 npm 进行全局安装

npm install wepy-cli -g
1

2. 初始化 WePY 项目

• 使用命令行方式进行初始化项目结构

wepy init standard wepyproject
1

• ”wepy init” – 是固定写法，代表要初始化 wepy 项目；
• ”standard” – 代表模板类型为标准模板，可以运行 ”wepy list” 命令查看所有可用的项目模板
• ”wepyproject” – 为自定义的项目名称。
  注意：创建项目的时候，要勾选 ESLint 选项！回车表示采用默认值
  

3. 运行编译 WePY 项目

• 运行 cd myproject 切换至 `WePY`` 项目根目录
• 运行 npm install 安装 WePY 项目依赖项
• 运行 wepy build --watch 开启实时编译(执行窗口不可关闭)
  • wepy build --watch 命令，会循环监听 WePY项目中源代码的变化，自动编译生成小程序项目

注意：生成的小程序项目默认被存放于 dist 目录中。

4. 认识WePY 项目目录

├── 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配置
1
2
3
4
5
6
7
8
9
10
11

5. 将 WePY 项目导入到开发者工具中

5.1 加载 WePY 项目到微信开发者工具

• 1.7.0 版本之后的 wepy-cli 工具生成的项目根目录下，包含 project.config.json 文件，
  • 记录了项目的基本配置信息，例如：项目的名称、appId、生成的小程序项目根路径等。
• 如果项目中存在 project.config.json 文件，
  • 使用 微信开发者工具 --> 导入项目，”项目目录”请选择 wepy 项目根目录，
  • 会根据 project.config.json 文件的配置，把 wepy编译生成的小程序项目加载到微信开发者工具中。

5.2 解决 ESLint 报错的问题

ESLint 是好用的代码格式检查工具，能够帮助程序员养成良好的代码书写习惯。首次把 WePY 项目加载到微信开发
者工具后，终端会报两个红色的错误信息，截图如下：

这是因为 ESLint 规定，不允许在代码中出现连续多个空行，此时根据报错信息，在vscode中打开，找到对应的文件，删除多余的空行，重新编译 WePY 项目即可。

5.3 代码高亮

文件后缀为.wpy，可共用 Vue 的高亮规则，但需要手动设置。如下是 VS Code 中实现代码高亮的相关设置步骤：
① 在 Code 里先安装 Vue 的语法高亮插件 Vetur。
② 打开任意 .wpy 文件。
③ 点击右下角的选择语言模式，默认为纯文本。
④ 在弹出的窗口中选择 .wpy 的配置文件关联。
⑤ 在选择要与 .wpy 关联的语言模式 中选择 Vue。
⑥ 在 VS Code 编辑器设置中设置。// 文件-首选项-设置-settings.json 中，添加 “files.associations”: { “*.wpy”: “vue” }

6. WePY 和 小程序项目的关系

• 通过 wepy init 命令初始化的wepy 项目，实际是一个模板项目，不能直接当作小程序运行。
• 需要运行相关的命令，把模板项目编译为小程序项目，才可以运行。

三、WePY 文件介绍

1. 介绍.wpy文件的组成部分

• 一个.wpy 文件可分为三大部分，各自对应于一个标签：
  • 脚本部分，即 <script></script> 标签中的内容，又可分为两个部分：
    • 逻辑部分，除了 config 对象之外的部分，对应于原生的 .js 文件
    • 配置部分，即 config 对象，对应于原生的 .json 文件
  • 结构部分，即 <template></template> 模板部分，对应于原生的 .wxml 文件。
  • 样式部分，即<style></style>样式部分，对应于原生的 .wxss 文件。
• 其中，小程序入口文件 app.wpy 不需要 template，所以编译时会被忽略。

2. .wpy文件的使用说明

• .wpy 文件中的 script、template、style 这三个标签都支持 lang 和 src 属性，

  • lang 决定了其代码编译过程，
  • src 决定是否外联代码，存在 src 属性且有效时，会忽略内联代码。

• 语法属性

• 案例代码

<style lang="less" src="page1.less"></style>
<template lang="wxml" src="page1.wxml"></template>
<script>
    // some code
</script>
1
2
3
4
5

3. 小程序入口 app.wpy

入口文件 app.wpy 中所声明的小程序实例继承自 wepy.app 类，包含一个 config 属性和其它全局属性、方法、事件。

• config 属性会被编译为小程序的 app.json 全局配置文件；
• config 属性之外的其它节点，会被编译为小程序的 app.js 文件；
• style 标签会被编译为小程序的 app.wxss 全局样式；

4. app.wpy 全局配置小程序外观

在小程序的入口文件中找到 window 节点：app.wpy -> script标签 -> config -> window 即可全局配置小程序的外观

window: {
  backgroundTextStyle: 'dark',
  navigationBarBackgroundColor: '#fff',
  navigationBarTitleText: 'app',
  navigationBarTextStyle: 'black'
}
1
2
3
4
5
6

5. 页面 .wpy 文件中 script 标签组成结构

页面文件 page.wpy 中所声明的页面实例继承自 wepy.page 类

四、WePY 框架开发规范与使用

1. 自定义默认首页

1.1 创建 home 首页

在 src -> pages 目录下，创建 home.wpy 页面，并创建页面的基本代码结构，示例代码如下：

<template>
<view>home首页</view>
</template>
<script>
import wepy from 'wepy'
export default class Home extends wepy.page {
  config = {
    navigationBarTitleText: 'home'
  }
  methods = {}
}
</script>
<style lang="less">
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.2 如何设置默认首页

打开 src -> app.wpy 入口文件，将新创建的页面路径，注册到 config -> pages 数组中，并调整为数组的第一项即可

 pages: ['pages/home', 'pages/index']
1

1.3 创建页面的注意事项

• 每个页面的 script 标签中，必须导入 wepy 模块，并创建继承自 wepy.page 的页面类；否则会报错。
• 每个页面的路径，必须记录到 app.wpy 的 config -> pages 数组中。
• 页面路径记录完毕之后，必须再回到原新增页面文件中，摁下 Ctrl + S 快捷键重新编译生成页面，否则会报错。

2. 为 WePY 页面绑定事件并传参

在 wepy 框架中，优化了事件绑定机制，支持类似于 Vue.js的事件绑定语法

• 在 WePY 中，统一使用 @ 绑定事件，传递参数直接采用@tap='handle({{params}})'传递
• 案例代码

<template>
  <view>
    <view>home首页</view>
  <button @tap="btnHandler({{number}})" type="primary" size="mini">WePY@绑定事件</button>
  </view>
</template>
<script>
import wepy from 'wepy'
export default class Home extends wepy.page {
  config = {
    navigationBarTitleText: 'home'
  }
  data = {
    number: 10
  }
  methods = {
  // 触发事件函数写在methods里
  // num形参值为data中number的值
    btnHandler(num) {
      console.log('按钮被点击了')
      console.log('传递的参数为' + num)
      this.add()
    }
  }
  // 自定义方法要写在外面，与methods平级节点
  add() {
    console.log('自定义函数' )
  }
}
</script>
<style lang="less">

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

• 页面绑定事件的注意事项

  • WePY 中的 methods 属性只能声明页面 wxml 标签的事件处理函数，不能声明自定义方法，
  • 自定义方法需要声明到和 methods 平级的节点位置，这与 Vue 中的用法是不一致的。

3. 页面以及文本框数据绑定

• .wpy 页面中的私有数据，需要定义到 data 节点中，页面上使用双大括号语法 {{ }} 渲染 data 中的数据
• 文本框与 data 做双向数据绑定需要定义事件
• 案例代码

<input value="{{val}}" placeholder="请输入值" @input="inputHandle">


data = {
  age: 18,
  val: ''
}

methods = {
  inputHandle: function (e) {
    console.log(e.detail.value)
    // 用this加data函数就能直接调用
    //e.detail.value 为输入文本框里输入的值
    this.val = e.detail.value
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. wxs 脚本的使用

• 将 wxs 脚本定义为外联文件，并且后缀名为 .wxs
• 在 <script></script> 标签内，通过 import 导入相对路径的 wxs 模块
• 在当前页面的 class 类中，通过 wxs = { } 注册刚才导入的 wxs 模块
• 注意：被注册的 wxs 模块，只能在当前页面的 template 中使用，不能在script中使用

//  wxs/home.wxs
module.exports = {
  mes: 'hi'
}
1
2
3
4

// 引入页面的js
import homeWxs from '../wxs/home.wxs'
// 新建一个与data、config平级的节点
  wxs = {
    homeData: homeWxs
  }
1
2
3
4
5
6

<!--在页面上显示-->
 <view>{{homeData.mes}}</view>
1
2

5. 配置 promisify 启用 async 和 await

• 默认使用 wepy-cli 创建的项目，不支持使用 ES7 的 async 和 await 来简化 Promise API 的调用。
• 需要手动开启此功能：打开 src -> app.wpy，找到 constructor() 构造函数，在构造函数中代码的最后一行，添加 this.use('promisify')

constructor () {
  super()
  this.use('requestfix')
  this.use('promisify')
}
1
2
3
4
5

6. WePY 发送 get 和 post 请求

WePY 框架对原生小程序做了封装，之前通过 wx 调用的 API，都可以直接使用 wepy 进行调用

// wepy 发送 Get 请求

async getInfo () {
  const res = await wepy.request('接口地址')
  
  console.log(res)
}
1
2
3
4
5
6
7

// wepy 发送 Post 请求

async getInfo () {
  const res = await wepy.request({
    url: '接口地址',
    method: 'post',
    data: {
      name: 'lengend'
    }
  })
  
  console.log(res)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

7. 异步更新数据

在异步函数中更新数据的时候，页面检测不到数据的变化，必须手动调用this.$apply 方法。

作用是强制页面重新渲染

 // 被 async 修饰的函数叫做异步函数

async getInfo() {
  const res = await wepy.request('接口地址’)
  this.getMsg = res.data
  this.$apply()
}
1
2
3
4
5
6
7