學(xué)習(xí)目標(biāo)
- 使用wepy框架開發(fā)小程序 =
-
了解ES6中的class類
. 輪播圖組件的使用 - 使用flex布局
- 請(qǐng)求api數(shù)據(jù)兜看，把數(shù)據(jù)綁定到輪播圖
使用wepy框架開發(fā)小程序
一款讓小程序支持組件化開發(fā)的框架舶得，類Vue開發(fā)風(fēng)格
項(xiàng)目地址： https://github.com/Tencent/wepy
安裝wepy腳手架工具
wepy-cli文檔地址：https://tencent.github.io/wepy/document.html#/./doc.cli
全局安裝
npm install -g wepy-cli
初始化項(xiàng)目
// 默認(rèn)生成帶有組件其他模塊的項(xiàng)目(redux)
// wepy init standard wepyshop
// 默認(rèn)生成空白項(xiàng)目
wepy init empty wepyshop
切換到項(xiàng)目目錄耍休，安裝依賴
cd wepyshop
npm install
編譯為小程序
注意：初始化項(xiàng)目時(shí)未輸入appid的可以在項(xiàng)目根目錄project.config.json中修改`appid`字段
// 加上--watch設(shè)置為實(shí)時(shí)編譯
wepy build --watch
編譯后會(huì)在項(xiàng)目根目錄生成一個(gè)dist文件夾缝驳，dist文件夾就是編譯后的小程序項(xiàng)目挽牢，使用微信開發(fā)工具導(dǎo)入項(xiàng)目
通過vscode打開項(xiàng)目唯灵，wepy語法高亮需要安裝vue的高亮插件 - Vetur
總結(jié)：
wepy的使用流程:
?
npm install -g wepy-cli
wepy init empty wepyshop
cd wepyshop & npm install
wepy build --watch
微信開發(fā)工具導(dǎo)入dist
?
了解ES6中的class類
面向?qū)ο蟮幕A(chǔ)
- 類的基本概念
- 類的繼承和多態(tài)性
class的基礎(chǔ)語法
注意：類名的首字母必須大寫
// Cat是類
// name是Cat類的屬性
class Cat {
name = "hello kitty";
}
// 生成對(duì)象實(shí)例
const smallCat = new Cat();
使用typeof查看類的類型
typeof Cat; // function
因?yàn)闉g覽器并不支持類的寫法钝鸽，所以class最終會(huì)編譯成function
類的constructor方法
constructor方法是類的默認(rèn)方法喷户，通過new命令生成對(duì)象實(shí)例時(shí)唾那，自動(dòng)調(diào)用該方法。
也就說只要調(diào)用new Cat(), 那么相當(dāng)于執(zhí)行Cat類中constructor方法褪尝，如果沒有定義闹获，會(huì)自動(dòng)生成一個(gè)空的方法;
class Cat {
}
// 等同于
class Cat {
constructor() {}
}
添加實(shí)例屬性
生成多個(gè)對(duì)象，對(duì)象都有自己的名字, constructor內(nèi)部可以使用this來訪問實(shí)例,來給實(shí)例添加屬性
class Cat {
constructor(name){
this.name = name;
}
}
const smallCat = new Cat("hello kitty");
const bigCat = new Cat("tiger");
注意：上例的this.name就是實(shí)例的屬性
添加實(shí)例方法
在類內(nèi)部添加函數(shù) ,注意不要帶function
class Cat{
constructor(name){
this.name = name;
}
sound(voice){
console.log(voice);
}
}
const smallCat = new Cat("hello kitty");
smallCat.sound("喵喵喵");
注意: 實(shí)例方法內(nèi)部也可以通過this來訪問當(dāng)前實(shí)例
類的靜態(tài)方法
靜態(tài)方法是類的自身的方法河哑，可以通過類名來訪問,實(shí)例無法訪問類的靜態(tài)方法避诽，通常用來定義類的默認(rèn)就存在的并且不會(huì)改變的東西
class Cat{
constructor(name){
this.name = name;
}
static footer(){
console.log(4);
}
}
//寫法等同于：
Cat.footer = function(){
console.log(4);
}
類的繼承
Class 可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承,子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)璃谨。
這是因?yàn)樽宇惐仨毾韧ㄟ^父類的構(gòu)造函數(shù)完成構(gòu)建沙庐，得到與父類同樣的實(shí)例屬性和方法鲤妥，再加上子類自己的實(shí)例屬性和方法, 如果存在相同的屬性或者方法，則子類會(huì)覆蓋父類的屬性或方法
?
// 父類
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中第一時(shí)間調(diào)用,因?yàn)樽宇惐仨毾韧ㄟ^父類的構(gòu)造函數(shù)完成構(gòu)建, (類的靜態(tài)方法拱雏，也可以被子類繼承)
總結(jié)
- 類使用class聲明棉安，類名的首字母必須大寫
- constructor方法是類的默認(rèn)方法
- 實(shí)例方法內(nèi)部也可以通過this來訪問當(dāng)前實(shí)例
- 靜態(tài)方法前面使用static聲明， 實(shí)例無法訪問類的靜態(tài)方法
- 繼承使用關(guān)鍵字extends, 子類必須在constructor方法中調(diào)用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數(shù)據(jù)來實(shí)現(xiàn)
// 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請(qǐng)求接口, 替換輪播圖的數(shù)據(jù)
接口api：https://itjustfun.cn/api/public/v1/home/swiperdata
基本使用方法
wepy.request({
// 開發(fā)者服務(wù)器接口地址
url: 'https://itjustfun.cn/api/public/v1/home/swiperdata',
// 請(qǐng)求的參數(shù)
data: {},
// HTTP 請(qǐng)求方法,默認(rèn)"GET"
method: "GET",
// 返回的數(shù)據(jù)格式
dataType: "json",
// 接口調(diào)用成功的回調(diào)函數(shù)
success: (res) => {
console.log(res)
}
})
注意：使用request請(qǐng)求前需要綁定域名到開發(fā)設(shè)置的服務(wù)器域名
wepy中更新數(shù)據(jù)
在原生小程序中使用this.setData;
this.setData({
title: 'this is title';
})
在wepy中只需要
this.title = 'this is title';
而在異步中調(diào)用更新數(shù)據(jù)铸抑，比如wepy中使用的時(shí)候垂券，需要調(diào)用一次 this.$apply()方法
wepy.request({
url: "",
success: (res) => {
this.title = res.title;
this.$apply();
}
}
第三天內(nèi)容知識(shí)點(diǎn)總結(jié)：
- 使用 VSCode 安裝wepy插件
- 能使用 npm install -g wepy-cli 全局安裝 wepy
- 能使用 wepy init empty wepyshop 初始化 wepy 商城項(xiàng)目
- 能使用 wepy build --watch 實(shí)時(shí)編譯 wepy 商城項(xiàng)目
- 能把 wepy 商城項(xiàng)目導(dǎo)入到微信開發(fā)者工具中
- 掌握 ES6 Class 基礎(chǔ)語法，通過class 關(guān)鍵詞定義類羡滑，注意首字母大寫的類名規(guī)范
- 掌握 class 中 constructor 函數(shù)添加類實(shí)例屬性
- 掌握 class 中 static 關(guān)鍵詞添加類的靜態(tài)方法
- 掌握 class 繼承基礎(chǔ)語法菇爪，通過 extends 關(guān)鍵詞實(shí)現(xiàn)類的基本繼承
- 掌握 super() 函數(shù)繼承父類的 constructor 的實(shí)例屬性，注意 super() 書寫位置
- 了解通過 typeof 關(guān)鍵詞查看類的本質(zhì)是一個(gè)函數(shù)柒昏，類可以看做構(gòu)造函數(shù)的另一種寫法
- 掌握 swiper 組件實(shí)現(xiàn)輪播圖凳宙，添加屬性實(shí)現(xiàn)自動(dòng)播放，無縫滾動(dòng)职祷，指示器的小圓點(diǎn)顏色修改
- 能利用 flex 模式實(shí)現(xiàn)了首頁導(dǎo)航的布局
- 能利用 flex 模式實(shí)現(xiàn)了首頁樓層的布局
- 能通過 git clone 命令把老師的項(xiàng)目代碼克隆到自己電腦上
- 能通過微信開發(fā)者工具調(diào)試器的 AppData 面板查看當(dāng)前小程序頁面的 data 數(shù)據(jù)
17 能實(shí)現(xiàn)首頁輪播圖的虛擬數(shù)據(jù)的數(shù)據(jù)綁定
18 掌握通過 wepy.request() 成功發(fā)送請(qǐng)求
19 掌握把請(qǐng)求結(jié)果的數(shù)據(jù)賦值給當(dāng)前頁面的 data 數(shù)據(jù)氏涩，如：this.swiperData = res.data
20 掌握 wepy 在異步函數(shù)中，需手動(dòng)調(diào)用 this.$apply() 更新 data 數(shù)據(jù)從而更新視圖層
注意
1 import導(dǎo)入組件時(shí)候后面不要.wpy
2 vscode高亮有梆，先點(diǎn)擊純文本是尖，選擇與wpy配送關(guān)聯(lián)，輸入vue
3 wepy={ // 中有三種方法
? app,
? page, //用在page文件夾下的泥耀，.wpy文件
? component // 用在components文件夾下的.wpy文件
}
