小程序开发框架:mpvue(一)初篇
小程序开发框架:mpvue(二)项目代码分析
小程序开发框架:mpvue(三)完成一个积极干净的mpvue初创项目
小程序开发框架:mpvue(四)组件通信
前言:项目实战可以让你的技术得到快速的提升。功能的实现是重要的,同时在实现功能的时候如果多思考一下关于项目的架构,组件的封装,那么你会发现你的视野和技术深度随着时间的推移会越来越深刻。
最近深度学习了很多前端技术,Vue,JS高阶, ES6… 抓紧时间通过练习巩固下,这篇文章主要内容有两个
1: ES6的语法解析
- - - 通过项目来学习ES6新增语法
2: 实战总结
- - - 通过完善上一篇的项目实现如下效果,在新的项目中我们将使用到很多知识点,如网络请求的封装,Vuex的深度理解,mpvue在微信小程序上的使用等等(‘’麻雀虽然,五脏俱全’)
2. 解构赋值
3. Proxy代理
4. 异步Promise
5. 类Class
6. Module模块化
1.1 参数默认值
// ES6允许对函数使用默认参数, 当传入参数的时候,不使用默认参数,反之则使用默认参数
// 此处默认参数name的值为dude,如果调用setName的时候,不传参数,则输出hello dude
function setName(name='dude'){
console.log(`Hello ${name}`);
}
其中第5行是使用``符号配合使用$符号来将字符串和变量进行拼接
1.2 rest参数
其语法为 …变量名,如下
// rest函数的使用,其简单理解就是将多个参数合并在arg中,arg可以作为一个数组,类似java中的不定参数
function sum(...arg) {
let total = 0
for (var val of values) {
total += val;
}
console.log('**参数总和为**', total)
}
1.3 箭头函数
如下函数的作用是通过箭头遍历array当中的每一个元素
function printWithEs6() {
this.array.forEach(element => console.log(element));
}
=> 该操作符可以定义一个函数, 操作符左边为输入的参数,而右边则是进行的操作以及返回的值
如 var single = a => a 理解为定义一个函数,其参数为a,返回值为single, =>返回的是一个函数,定义一个变量single使其指向该函数
同时箭头函数返回中如果有多条语句,或者参数为空,我们需要使用花括号,并使用return来返回值
所谓解构赋值,简单理解就是将数组或者对象中的数据进行拆分,然后赋值给数组中的元素或对象中的元素,尤其是对象的结构赋值,在网络解析时会经常用到
2.1 数组/对象解构赋值
// 解构: 自动解析数组或对象中的值
// 使用[]进行解构可以是数组或者任意有迭代器的元素
// 使用{}进行结构可以是json对象
function analyze() {
// 解构数组
let [name,age] = ['张三','17']
console.log('**数组解构**', name , age)
// 对象结构
let jsonObject = {
year: 2019,
mouth: 4
}
let {year, mouth} = jsonObject
console.log('**对象解构**', year , mouth)
}
第13行完成了对象解构,它将json对象中的year字段赋值给year,这里我们可以看到在对象结构中,被赋值的变量需要与json对象字段同名
2.2 函数解构赋值
// 函数参数也可以做解构赋值,其原理和对象或者数组解构赋值是一样的
// 如下函数的使用为analyzeF([1, 2])
// 其步骤是将参数[1, 2]传递给函数analyzeF,在接收函数参数的时候完成参数解构
function analyzeF ([x, y]) {
return x + y
}
对于这个概念,学习java的同学应该不会陌生,在我们常用的网络收发框架如httpclient或者fly中经常会有这样的功能,对请求或者响应进行拦截,然后再交还给调用者;这个Proxy就相当于一个拦截器,对你的操作进行拦截处理,然后再返回给你对应的数据.
其语法格式为:
var proxy = new Proxy(target, handler);
其中target表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为
下面的代码将演示如何拦截一个对象的赋值操作
// 代理,Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作
function proxy(){
//定义被侦听的目标对象
var engineer = { name: 'Joe Sixpack', salary: 50 };
//定义处理程序
var interceptor = {
set: function (receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
}
};
//创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.salary = 60;//控制台输出:salary is changed to 60
}
第4行,定义一个即将被拦截的对象engineer,即定义Proxy对象参数一
第6行,定义一个处理程序,即定义Proxy对象参数二
第13行,创建Proxy对象,即拦截engineer对象,当其相关属性发生对应操作的时候,回调interceptor函数
第15行,对engineer对象进行赋值操作,此时将触发Proxy对象中的set方法
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署,resolve函数会在异步函数成功之后被回调,反之则reject被回调;
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
下面演示在mpvue里面如何在微信小程序的post请求中使用Promise
postWx (url, data) {
return new Promise((resolve, reject) => {
wx.request({
url: url,
header: {
'content-type': 'application/json'
},
method: 'POST',
data: data,
success (res) {
const response = JSON.parse(res.data)
resolve(response)
},
fail (res) {
reject(res)
}
})
})
}
第2行,表示postWx函数返回一个Promise对象
第12行,则表示post请求成功则resolve函数被回调,同时将响应内容作为参数传出
调用代码为:
postWx(‘http://baidu.com’, {name: 'myself'}).then((value) => {
console.log(value);
});
通过then方法的参数即可拿到post请求返回的数据
ES6里面新增了类的概念,极大的方便了java开发同学的开发。定义和使用和java基本类似,如有自己的构造函数,有自己的私有属性,继承等等5.1 类的定义
// 通过constructor定义构造函数,当new这个对象的时候,自动执行该函数
// 这里我们应该注意到,constructor方法默认返回实例对象(即this) 只有在constructor函数里面,才会关联类的实例
// 子类可以通过super的方式使用父类方法
// 子类也可以直接使用父类的方法
class coffee {
constructor(name, price) {
this.coffeeName = name
this.coffeePrice = price
console.log('**咖啡父类构造函数**',this.coffeeName,this.coffeePrice)
}
// 父类的方法
allowExtends(allowEx) {
this.allow = allowEx
console.log('**咖啡父类allowExtends**', this.allow)
}
}
在实际的开发过程中我建议
1)类的成员属性应该在构造函数里完成赋值,而不是像第14行那样进行赋值,因为只有在constructor函数里面,this才关联类的实例,这点在后续的例子中我会再说明一次
5.2 类的继承
通过extends关键字即可完成继承
// 类继承的使用,定义摩卡咖啡
class mokaCoffee extends coffee{
constructor(name, price) {
// 调用父类的构造函数
super(name,price)
this.mokaName = name
this.mokaPrice = price
console.log('*摩卡咖啡构造函数**', this.mokaName, this.mokaPrice)
}
}
我们调用的方法跟java是一样的
let moka = new mokaCoffee('摩卡',18)
moka.allowExtends(true)
可见子类可以使用父类的函数,通过super的方法完成调用父类对应的方法
模块化的思想是一种封装,里面封装着某种实现,我们可以通过export完成对某种操作的导出,外界通过import来引入这个能力
导出功能有两个关键字
1)export
export var firstName = 'Michael'; //导出变量firstName供其他模块使用,其他模块通过import {firstNamer} from './xxx.js'使用该变量
export function multiply(x, y) { //导出方法multiply供其他模块使用,其他模块通过import {multiply} from './xxx.js'使用该方法
return x * y;
};
2)export default
通过上述例子,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。而有的时候我们不知道其他组件暴露了什么接口出来,此时就要用到export default命令,为模块指定默认输出。export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字
// export-default.js
export default function () { //表示导出一个函数,但是没有明确被导出函数的名字,那么可以通过import customName from './export-default';完成加载,此时可以注意到import没有花括号了
console.log('foo');
}
引入一个功能则使用import即可
更多的ES6知识还需要我们在开发的过程中多多体会。这里就不做更多描述了
二: 实战总结,作者将不断完善这个项目,把重要知识点归纳总结
通过这个项目你能学到1. 组件的封装
2. 组件通信
3. 网络请求框架的封装
4. mpvue如何使用微信video控件
5. 微信小程序在mpvue中实现图片放大镜效果
6. 微信小程序在mpvue中监听网络状态切换
7. Vuex解析
8.工具类的封装,如防止按钮暴力点击
在es6的世界中就有了Module的概念,同样的在mpvue中每一个vue文件,每一个js也可以视为一个组件,我们也是通过export和import来导出和导入相关组件
项目组件全部定义在components目录下,例如components/login.vue登录组件
组件间通信方法有
2.1 子组件通过props获取父组件值
2.2 子组件通过.$emit传递事件给父组件
2.3 Vuex
2.4 共享的js模块
这个项目利用了fly作为网络传输框架,代码目录在httpclient/httpclient.js,该类的实例为单例,避免多次创建
应该注意到播放进度监听的问题,mpvue里面是有on关键字的,所以在对handle进行处理的时候,取消去掉on,所以在mpvue中监听微信小程序video播放进度代码为
<template>
<div class="videogroup">
<!-- 演示微信video组件的使用 -->
<video ref="video" class="videoview" id="myVideo" :poster='videoposter' @timeupdate="timeupdate" :show-center-play-btn="false" :loop="false" :autoplay="false" :src="videoSourceUrl" :controls="true">
<!-- 由于video和canvas组件的优先级,所以想在其上做其他页面元素,需要使用cover-view或者cover-image -->
<cover-view class="playVideo" @click="play">继续播放</cover-view>
</video>
</div>
</template>
其中
@timeupdate="timeupdate"表示监听video播放进度
:poster='videoposter’表示视频封面,其只能加载网络图片
其核心代码就是利用微信绘图API完成,大家可以参考下微信小程序开发文档。
CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
本例实现代码地址为:components/preshow.vue
大家可以下载项目来看下,给作者点点代码,一起提高
项目地址
获取码:mw86