第六单元 wepy
二、本单元知识点概述
三、本单元教学目标
（Ⅰ）重点知识目标
1.wepy的安装与运行
2.wepy配置
（Ⅱ）能力目标
1.掌握wepy的安装与运行
2.掌握wepy配置
四、本单元知识详讲
6.1. wepy
6.1.1 wepy简介
什么是wepy
WePY是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于 Vue.js，使用 WePY 框架能够提高 小程序的开发效率
注意：WePY 只是小程序的快速开发框架之一，市面上还有诸如 mpvue 之类的小程序开发框架也比较流行
为什么要使用wepy
开发风格接近于 Vue.js，支持很多vue中的语法特性
通过 polyfill 让小程序完美支持 Promise
以使用ES6等诸多高级语法特性，简化代码，提高开发效率
对小程序本身的性能做出了进一步的优化
支持第三方的 npm 资源
持多种插件处理和编译器
6.1.2 wepy的安装与运行
安装wepy
npm i -g @wepy/cli
运行
wepy init standard myproject # 使用 standard 模板初始化项目
cd myproject # 进入到项目目录
npm install # 安装项目依赖包
npm run dev # 监听并且编译项目
”wepy init” 是固定写法，代表要初始化 wepy 项目；
”standard” 代表模板类型为标准模板，可以 运行 ”wepy list” 命令查看所有可用的项目模板；
”myproject” 为自定义的项目名称
6.2. wepy文件介绍
6.2.1 介绍.wpy文件的组成部分
一个 .wpy 文件可分为四大部分，各自对应于一个标签：
结构部分，即<template></template>模板部分，对应于原生的 .wxml 文件。
脚本部分，即<script></script>标签中的内容，又可分为两个部分：
配置部分，即<config></config>标签部分，对应于原生的 .json 文件
样式部分，即<style></style>样式部分，对应于原生的 .wxss 文件。 其中，小程序入口文件 app.wpy 不需要 template，所以编译时会被忽略。
6.2.2 .wpy文件使用说明
wpy 文件中的 script、template、style 这三个标签都支持 lang 和 src 属性，lang 决定了其代码编译过程，src 决定是否外联代码，存在 src 属性且有效时，会忽略内联代码
各标签对应的 lang 值如下表所示
标签lang默认值lang支持值
stylecsscss、less、scss、stylus、postcss
templatehtmlhtml、wxml、xml、pug(原jade)
scriptbabelbabel、TypeScript
6.2.3 小程序入口app.wpy
入口文件 app.wpy 中所声明的小程序实例继承自 wepy.app 类
<style></style>标签：会被编译为小程序的 app.wxss 全局样式
<script></script>标签：会被编译为小程序的 app.js文件
<config></config>标签：会被编译为小程序的 app.json 全局配置文件
wepy.app中相关配置说明
wepy.app({
// 内置钩子事件，方便开发者可以对内置流程的控制
hooks: {
// 在用户注册的所有响应事件前触发(@tap, @change),返回 false 时会取消该事件的响应
'before-event': function(data) {},
// 在进行数据绑定之前触发，返回 false 时会取消该时事件绑定
'before-setData': function(dirty) {}
},
// 全局变量，整个小程序内有效
golbalData: '',
// 生命周期函数，小程序初始化完毕执行
onLaunch() {},
// 方法定义
methods: {}
})
6.2.4 页面.wpy文件中的script标签组成结构
页面文件 page.wpy 中所声明的页面实例继承自 wepy.page 类，该类的主要属性介绍如下
属性说明
data页面渲染数据对象，存放可用于页面模板绑定的渲染数据
methodswxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如bindtap、bindchange
eventsWePY组件事件处理函数对象，存放响应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数
computed计算属性
watch监听属性
其它小程序页面生命周期函数，如created、mounted等，以及其它自定义的方法与属性
6.3. wepy框架开发规范与使用
6.3.1 如何设置默认首页
如果要把刚创建的 home.wpy 设置为默认首页，需要打开 src -> app.wpy 入口文件，将 home.wpy 的页面 路径，注册到 config -> pages 数组中，并调整为数组的第一项即可
示例代码
<config>
{
pages: ['pages/home', 'pages/index']
}
</config>
6.3.2 创建页面的注意事项
每个页面的 script 标签中，必须导入 @wepy/core 模块，并创建继承自 wepy.page 的页面类,否则会报错
每个页面的路径，必须记录到 app.wpy 的 config -> pages 数组中
6.3.3 页面绑定事件以及传参
原生小程序使用 bindtap、bindinput 等绑定事件处理函数，在 wepy 框架中，优化了事件绑定机制，支持类似于 Vue.js 的事件绑定语法
例如：
原 bindtap="clickHandler" 替换为 @tap="clickHandler"
原 bindinput="inputHandler" 替换为 @input="inputHandler"
代码示例
<template>
<button @tap="handleTap(1)">点击</button>
</template>
<script>
import wepy from '@wepy/core'
wepy.page({
methods: {
handleTap(id) {
console.log(id)
}
}
})
</script>
6.3.4 页面以及文本框数据绑定
通过v-model指令实现文本框与页面的双向绑定
示例代码
<template>
<input v-model="msg" /> <br />
<div>{{ msg }}</div>
</template>
<script>
import wepy from '@wepy/core'
wepy.page({
data: {
msg: "hello world"
}
})
</script>
6.3.5 Wxs脚本的使用
与小程序中wxs脚本的使用方式一致，分为外联与内嵌
代码示例：
<template>
<div>
{{ mod.upper(msg) }}
</div>
</template>
<wxs module="mod">
var upper = function(str) {
return str.substring(0, 1).toUpperCase() + str.substring(1)
}
module.exports = {
upper: upper
}
</wxs>
<script>
import wepy from '@wepy/core';
wepy.page({
data: {
msg: "hello world",
}
})
</script>
注意：被注册的 wxs 模块，只能在当前页面的 template 中使用，不能在script中使用
6.3.6 配置promisify启用async和await
下载@wepy/use-promisify
npm i @wepy/use-promisify
基本用法
import wepy from '@wepy/core';
import promisify from '@wepy/use-promisify';
wepy.use(promisify)
小程序中异步API调用方法
安装@wepy/use-promisify后，小程序中所有的异步API调用格式为：wepy.wx.方法名
示例代码：
wepy.wx.getStorage('mykey').then(res => console.log(res));
简化参数
weapp-style函数始终需要一个Object参数，并且此插件将简化参数
示例代码：
wepy.use(promisify);
// wepy.wx.getStorage({ key: 'mykey' });
wepy.wx.getStorage('mykey');
// wepy.wx.request({ url: myurl });
wepy.wx.request(myurl);
6.3.7 Wepy发送get和post请求
如果没有安装@wepy/use-promisify,请求示例：
wx.request({
url: '', // url地址
method: '', // GET 或 POST
data: {}, // 数据请求
// 请求成功的回调函数
success() {}
})
如果安装了@wepy/use-promisify,请求示例：
wepy.wx.request({
url: '',
methods: '',
data: {}
}).then(data => {
console.log(data)
})
如果安装了@wepy/use-promisify并且是GET请求，可直接简写成
wepy.wx.request('url').then(data => { console.log(data) })
五、本单元知识总结**
1.明白下单的流程
