学习目标
- 使用wepy框架开发小程序 =
- 了解ES6中的class类
. 轮播图组件的使用 - 使用flex布局
- 请求api数据,把数据绑定到轮播图
使用wepy框架开发小程序
一款让小程序支持组件化开发的框架,类Vue开发风格
项目地址: https://github.com/Tencent/wepy
安装wepy脚手架工具
wepy-cli
文档地址:https://tencent.github.io/wepy/document.html#/./doc.cli
全局安装
npm install -g wepy-cli
初始化项目
// 默认生成带有组件其他模块的项目(redux)
// wepy init standard wepyshop
// 默认生成空白项目
wepy init empty wepyshop
切换到项目目录,安装依赖
cd wepyshop
npm install
编译为小程序
注意:初始化项目时未输入appid的可以在项目根目录project.config.json中修改`appid`字段
// 加上--watch设置为实时编译
wepy build --watch
编译后会在项目根目录生成一个dist
文件夹,dist
文件夹就是编译后的小程序项目,使用微信开发工具导入项目
通过vscode打开项目,wepy语法高亮需要安装vue的高亮插件 - Vetur
总结:
wepy的使用流程:
npm install -g wepy-cli
wepy init empty wepyshop
cd wepyshop & npm install
wepy build --watch
微信开发工具导入dist
了解ES6中的class类
面向对象的基础
- 类的基本概念
- 类的继承和多态性
class的基础语法
注意:类名的首字母必须大写
// Cat是类
// name是Cat类的属性
class Cat {
name = "hello kitty";
}
// 生成对象实例
const smallCat = new Cat();
使用typeof查看类的类型
typeof Cat; // function
因为浏览器并不支持类的写法,所以class最终会编译成function
类的constructor方法
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。
也就说只要调用new Cat()
, 那么相当于执行Cat
类中constructor
方法,如果没有定义,会自动生成一个空的方法;
class Cat {
}
// 等同于
class Cat {
constructor() {}
}
添加实例属性
生成多个对象,对象都有自己的名字, constructor内部可以使用this来访问实例,来给实例添加属性
class Cat {
constructor(name){
this.name = name;
}
}
const smallCat = new Cat("hello kitty");
const bigCat = new Cat("tiger");
注意:上例的this.name就是实例的属性
添加实例方法
在类内部添加函数 ,注意不要带function
class Cat{
constructor(name){
this.name = name;
}
sound(voice){
console.log(voice);
}
}
const smallCat = new Cat("hello kitty");
smallCat.sound("喵喵喵");
注意: 实例方法内部也可以通过this来访问当前实例
类的静态方法
静态方法是类的自身的方法,可以通过类名来访问,实例无法访问类的静态方法,通常用来定义类的默认就存在的并且不会改变的东西
class Cat{
constructor(name){
this.name = name;
}
static footer(){
console.log(4);
}
}
//写法等同于:
Cat.footer = function(){
console.log(4);
}
类的继承
Class 可以通过extends关键字实现继承,子类必须在constructor方法中调用super方法,否则新建实例时会报错。
这是因为子类必须先通过父类的构造函数完成构建,得到与父类同样的实例属性和方法,再加上子类自己的实例属性和方法, 如果存在相同的属性或者方法,则子类会覆盖父类的属性或方法
// 父类
class Animal{
constructor(){
this.age = 2;
}
}
// 子类
class Cat extends Animal{
constructor(name){
super();
this.name = name
}
sound(voice){
console.log(voice);
}
}
把子类的name属性和sound方法也封装到Animal类中
注意: super必须在子类的constructor中第一时间调用,因为子类必须先通过父类的构造函数完成构建, (类的静态方法,也可以被子类继承)
总结
- 类使用class声明,类名的首字母必须大写
- constructor方法是类的默认方法
- 实例方法内部也可以通过this来访问当前实例
- 静态方法前面使用static声明, 实例无法访问类的静态方法
- 继承使用关键字extends, 子类必须在constructor方法中调用super方法
首页
首页基本布局
轮播图组件的使用
swipe组件的使用
文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
基本使用
使用wx:for读取data数据来实现
// script
data = {
swiperData: [
'https://img.alicdn.com/simba/img/TB14dt2knnI8KJjy0FfSuwdoVXa.jpg',
'https://img.alicdn.com/tfs/TB1txjivHorBKNjSZFjXXc_SpXa-520-280.jpg_q90_.webp'
]
}
// template
wepy.request的使用
使用wepy.request请求接口, 替换轮播图的数据
接口api:https://itjustfun.cn/api/public/v1/home/swiperdata
基本使用方法
wepy.request({
// 开发者服务器接口地址
url: 'https://itjustfun.cn/api/public/v1/home/swiperdata',
// 请求的参数
data: {},
// HTTP 请求方法,默认"GET"
method: "GET",
// 返回的数据格式
dataType: "json",
// 接口调用成功的回调函数
success: (res) => {
console.log(res)
}
})
注意:使用request请求前需要绑定域名到开发设置的服务器域名
wepy中更新数据
在原生小程序中使用this.setData;
this.setData({
title: 'this is title';
})
在wepy中只需要
this.title = 'this is title';
而在异步中调用更新数据,比如wepy中使用的时候,需要调用一次 this.$apply()方法
wepy.request({
url: "",
success: (res) => {
this.title = res.title;
this.$apply();
}
}
第三天内容知识点总结:
- 使用 VSCode 安装wepy插件
- 能使用 npm install -g wepy-cli 全局安装 wepy
- 能使用 wepy init empty wepyshop 初始化 wepy 商城项目
- 能使用 wepy build --watch 实时编译 wepy 商城项目
- 能把 wepy 商城项目导入到微信开发者工具中
- 掌握 ES6 Class 基础语法,通过class 关键词定义类,注意首字母大写的类名规范
- 掌握 class 中 constructor 函数添加类实例属性
- 掌握 class 中 static 关键词添加类的静态方法
- 掌握 class 继承基础语法,通过 extends 关键词实现类的基本继承
- 掌握 super() 函数继承父类的 constructor 的实例属性,注意 super() 书写位置
- 了解通过 typeof 关键词查看类的本质是一个函数,类可以看做构造函数的另一种写法
- 掌握 swiper 组件实现轮播图,添加属性实现自动播放,无缝滚动,指示器的小圆点颜色修改
- 能利用 flex 模式实现了首页导航的布局
- 能利用 flex 模式实现了首页楼层的布局
- 能通过 git clone 命令把老师的项目代码克隆到自己电脑上
- 能通过微信开发者工具调试器的 AppData 面板查看当前小程序页面的 data 数据
17 能实现首页轮播图的虚拟数据的数据绑定
18 掌握通过 wepy.request() 成功发送请求
19 掌握把请求结果的数据赋值给当前页面的 data 数据,如:this.swiperData = res.data
20 掌握 wepy 在异步函数中,需手动调用 this.$apply() 更新 data 数据从而更新视图层
注意
1 import导入组件时候后面不要.wpy
2 vscode高亮,先点击纯文本,选择与wpy配送关联,输入vue
3 wepy={ // 中有三种方法
app,
page, //用在page文件夹下的,.wpy文件
component // 用在components文件夹下的.wpy文件
}