学习目标

1. 使用wepy框架开发小程序 =
2. 了解ES6中的class类
   . 轮播图组件的使用
3. 使用flex布局
4. 请求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类

面向对象的基础

1. 类的基本概念
2. 类的继承和多态性

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中第一时间调用,因为子类必须先通过父类的构造函数完成构建, (类的静态方法，也可以被子类继承)

总结

1. 类使用class声明，类名的首字母必须大写
2. constructor方法是类的默认方法
3. 实例方法内部也可以通过this来访问当前实例
4. 静态方法前面使用static声明， 实例无法访问类的静态方法
5. 继承使用关键字extends, 子类必须在constructor方法中调用super方法

首页

首页基本布局

轮播图组件的使用

swipe组件的使用

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

基本使用

<swiper indicator-dots autoplay>
    <swiper-item>
      <image src="https://img.alicdn.com/simba/img/TB14dt2knnI8KJjy0FfSuwdoVXa.jpg" width="100%" height="150"/>
      <image src="https://img.alicdn.com/tfs/TB1txjivHorBKNjSZFjXXc_SpXa-520-280.jpg_q90_.webp" width="100%" height="150"/>
    </swiper-item>
</swiper>

使用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
<swiper indicator-dots autoplay>
    <swiper-item wx:for="{{swiperData}}">
      <image src="{{item}}" width="100%" height="150"/>
    </swiper-item>
</swiper>

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();
    } 
}

第三天内容知识点总结：

1. 使用 VSCode 安装wepy插件
2. 能使用 npm install -g wepy-cli 全局安装 wepy
3. 能使用 wepy init empty wepyshop 初始化 wepy 商城项目
4. 能使用 wepy build --watch 实时编译 wepy 商城项目
5. 能把 wepy 商城项目导入到微信开发者工具中
6. 掌握 ES6 Class 基础语法，通过class 关键词定义类，注意首字母大写的类名规范
7. 掌握 class 中 constructor 函数添加类实例属性
8. 掌握 class 中 static 关键词添加类的静态方法
9. 掌握 class 继承基础语法，通过 extends 关键词实现类的基本继承
10. 掌握 super() 函数继承父类的 constructor 的实例属性，注意 super() 书写位置
11. 了解通过 typeof 关键词查看类的本质是一个函数，类可以看做构造函数的另一种写法
12. 掌握 swiper 组件实现轮播图，添加属性实现自动播放，无缝滚动，指示器的小圆点颜色修改
13. 能利用 flex 模式实现了首页导航的布局
14. 能利用 flex 模式实现了首页楼层的布局
15. 能通过 git clone 命令把老师的项目代码克隆到自己电脑上
16. 能通过微信开发者工具调试器的 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文件

}