小程序开发框架: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
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
