张现发项目实战三-----月度总结

微信小程序：

（1）项目流程

1、首先要注册一个微信小程序的账号

2、获取我们的AppID

3、创建我们的demo项目

4、可以通过预览在手机上查看项目效果

5、将代码上传到微信小程序的服务器

6、最后发布自己的微信小程序就可以了

（2）微信小程序的项目结构

微信小程序项目结构主要有四个文件类型

1、WXML在微信小程序中主要都是用微信自己定义的一些组件，和HTML页面有相同的功能，但是HTML中的好多标签在WXML中默认的都成了HTML中span标签的那个功能

2、WXSS是一套样式语言用于描述WXML的组件样式，具有CSS大部分特性

3、Js逻辑处理以及网络请求

4、Json小程序设置，如页面注册，页面标题以及tabBar

5、app.json这是微信小程序核心的一个文件，如果没有这个文件，项目会无法运行，微信框架将这个文件作为配置文件入口，整个小程序的全局配置

6、app.js也是微信小程序的核心文件，这个文件主要处理一些生命周期钩子函数以及声明全局变量

7、app.wxss全局配置样式的文件  这个文件可有可无

（3）怎么封装微信小程序的数据请求

1、将所有的接口放在统一的js文件中并导出

2、在app.js中创建封装请求数据的方法

3、在子页面中调用封装的方法请求数据

（4）怎么解决跨域问题

在回调函数中调用下一个组件的函数

代码演示：

（5）怎么进行双向绑定

在vue中我们使用的是this.data 但是在vue中使用this.data属性是补课咦同步到视图的   我们要使用 this.setData({)}属性来进行双向绑定

（6）小程序和vue写法的不同

① 在vue中循环是v-for==”item in list”在微信小程序中直接使用wx:for=”list”就可以循环遍历

②在调用data模型的时候  小程序是this.data.info，vue中是this.info

给模型赋值时：小程序-->this.setData{{info:1}}  vue-->this.info=1

（7）常用的生命周期钩子函数

①onShow生命周期钩子函数---监听小程序显示 当小程序启动时 或者从后台进入前台显示，会触发onShow

②onLoad监听页面加载

③ onUnload页面监听卸载

（8）组件

① 组件是视图层的基本组成单元

② 组件的一些基本的功能以及属性我们都可以在微信公众平台查看

微信小程序的优势：

1、不用安装，即开即用，用完就走。省流量，省安装时间，不占用桌面

2、开发成本较低

3、相较于各种APP微信小程序UI和操作流程会更统一，降低了用户的使用难度

Vue

Vue的优点：

（1）轻量级的框架：只关注视图层

（2）简单易学：国人开发，中文文档，不存在语言障碍，易于理解与学习

（3）双向数据绑定：在数据操作方面变得更为简单，极大的解放了dom操作

（4）组件化：实现html的封装以及重用，在构建应用方面有独特的优势

（5）视图，数据，结构分离：使得数据的更改变得非常简单，不需要进行逻辑代码的修改，只需要操作数据就能够完成相关的操作

（6）虚拟DOM：不在使用原生的dom节点，vue是操作虚拟dom（dom操作非常耗费性能）

Vue的不足：

（1）在IE9以下的版本不支持

（2）前后端混合受限：在处理json数据和数组的时候会很麻烦

便捷的指令

绑定click时间  v-on:click=“tab”  可以简写为 @click

绑定动态属性v-bind:href=”url”可以简写为:href=”url”

便捷的修饰符阻止单击事件冒泡->@click.stop=””只在按下回车是触发事件->@keyup.enter=””

渲染数据的时候使用v-for遍历渲染

MVVM模式

M：model，模型，在这里指的是数据模型

V：view，视图，在这里指的就是我们写的页面

VM：ViewModel，是数据模型和视图连接的纽带

图解：

在做项目的过程中我们经常使用的几个指令：

v-once：只绑定一次

v-bind：绑定数据

v-model：绑定模型

v-on：绑定事件

v-if、v-show：条件渲染

v-if：当值为true时，显示div，当值为false时，该元素消失，代码也会消失，相当于将代码删除了，当在为true时页面会重新渲染div

v-show：只是将css属性设为了display：none或者是block

生命周期钩子函数：

beforeCreate：组件实例刚被创建，组件属性计算之前，如data属性等

created：组件实例创建完成，属性已经绑定，但是DOM还未完成，$el属性还不存在

beforeMount：挂载之前

mounted：挂载之后

beforeUpdated：组件更新之前

updataed：组件更新之后

beforeDestory：组件销毁前调用

destoryed：组件销毁后调用

在vue2.0之后新增的钩子函数

activeted：组件被激活时使用

deactivated：组件被移除时使用

在添加动态的class样式时需要使用v-bind来完成-->

v-bind:class=”{active:isActive}”

添加动态的图片时-->

v-bind:src=”{}”

条件渲染：

在上面已经提到过v-if以及v-show的使用了

v-if：当值为true时，显示div，当值为false时，该元素消失，代码也会消失，相当于将代码删除了，当在为true时页面会重新渲染div

v-show：只是将css属性设为了display：none或者是block

列表渲染：

使用v-for将数据从定义好的数组中取出

Vue的计算属性-----computed：

Computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么对象的某个值改变的时候，同时会触发实时计算

过滤器（filter）：

过滤器分为私有过滤器和全局过滤器

私有过滤器：注册的时候使用filters属性，只能在vue组件下使用

全局过滤器：注册的时候使用vue.filter()全局API，可以在所有的vue组件下使用

我们在学习前端框架的时候都离不开组件，在vue中呢组件的作用也是非常大的

组件是页面组成的一部分，是封装好可以重用的代码，我们可以将页面中重复使用的一些代码封装成组件，这样一来就减少了我们的工作量，也让代码变得整洁

在使用组件的时候我们会遇见一下的几种情况：

父组件向子组件传值：

我们可以通过props将父组件的值传入到子组件里面

子组件向父组件传值：

子组件向父组件传值时用emit，主要是通过事件传递给父组件

非父子组件传值：

非父子组件就是讲两个不是父子组件的组件进行传值，在vue的官方文档中建议使用vuex其实就是定义一个公共的组件，然后将值传到里面在从里面获取

Vuex：

在刚开始学习vue的时候认识到vuex是一个状态管理工具，在中大型项目时推荐使用vuex

每一个vuex应用的核心就是store(仓库)。Store我理解为就是一个容器，它包含着我们项目的大部分状态 vuex和单纯的全局对象是有区别的：

首先vuex的状态存储是响应式的，就是当我们的组件从store读取数据的时候，如果store中的数据发生改变，那么响应组件的数据也会更新

不能直接改变store中的状态。改变 store 中的状态的唯一途径就是显式地提交 mutation。这样跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

由于我们的项目太大，请求时间太长，影响页面加载，效果体验极差，我们平时在做项目的时候也发现了，我们项目中的那个node_modules文件里面文件个数比较多的时候我们就应该在路由中配置组件懒加载

懒加载会在我们需要或者说请求到什么数据时在进行加载，随用随载

在单页应用中如果没有应用懒加载，运用webpack打包后的文件会非常大，导致我们在进入首页的过程中，需要加载的内容会非常多，不利于用户体验，如果用到懒加载的话，就会对页面进行划分，需要的时候在加载页面，可以有效的分担首页所承担的压力，减少首页加载应用，然后再打开首页的时候会比没有用到组件懒加载的文件快很多。

Promise：

Promise是一个构造函数，是对回调函数的一种封装，也可以说promise是ajax的执行状态管理工具，我们new出来的promise对象有三种状态：进行中、已完成、失败所以说可以很好的捕捉到我们的代码错误

使用promise的好处：

代码结构更加清晰明了

便于管理维护

能更好的捕获代码错误

Axios请求：

在我们做项目的过程中要想获取后台的数据我们通常都会使用axios来完成操作。

首先axios是一个基于promise的HTTP客户端

Axios有两种获取数据的方法 分别是post和get

在平时做项目的时候我用get比较多：

直接axios.get(url地址).then(回调函数)就可以获取到参数了

Post方法目前还没有在项目中应用过

JS、JQ以及ES6

ES6：

提到ES6我就会想到ES6新增的两个命令 分别是 let 和 const

Let：所声明的变量只在let命令所在的代码块内有效、不存在变量提升、不允许重复声明、存在暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的

Const：声明一个只读的常量，一旦声明，常量的值就不能改变。Const与let有个共同的特性，就是只在声明所在的块级作用域以内有效。Const声明的变量也是不存在变量提升，存在暂时性死区，只能在声明的位置后面使用；不可重复声明

还有一个函数的扩展----箭头函数：

解决了this指向的问题箭头函数下的this指向当前对象的父元素。

始终执行函数定义时的this

jQuery：

在jQuery中，$是jQuery的别名，所有使用$的地方都可以使用jQuery来替换

在jQuery中，无论使用哪种类型的选择器，都要以$()开始

在jQuery中也学习了好多的选择器：

基本选择器---层级选择器------过滤选择器-----表单选择器

Ajax：

Ajax是一种创建交互网页应用的网页开发技术

Ajax是由JavaScript、XMLHTTPRequest、DOM对象组成的，然后通过Request对象来向服务器发送异步请求，从服务器获取数据，然后用js的操作更新页面。

实现ajax的基本步骤分为4步：

第一步：创建异步调用对象

第二步：建立对服务器的调用

第三步：向服务器发送请求

第四步：接受服务器的处理结果

解决ajax跨域：

跨域问题来自源于js的同源策略，js只能访问和操作自己作用域下的资源，不能访问和操作其他作用域下的资源

解决跨域问题有三种方法：

JSONP：

JSONP是一种轻量级的数据传输格式

Ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不在返回JSON格式的数据，而是返回一段调用某个函数的js代码，而在src中进行了调用，这样实现了跨域，但是JSONP只支持get方法，不如post方法安全，JSONP的实现需要服务器的配合，如果访问的是第三方的服务器，我们没有修改服务器的权限，那这种方法就是不可行的。

添加响应头、代理的方式