張現(xiàn)發(fā)項目實戰(zhàn)三-----月度總結(jié)

微信小程序：

（1）項目流程

1旅急、首先要注冊一個微信小程序的賬號

2逢勾、獲取我們的AppID

3、創(chuàng)建我們的demo項目

4藐吮、可以通過預覽在手機上查看項目效果

5溺拱、將代碼上傳到微信小程序的服務器

6、最后發(fā)布自己的微信小程序就可以了

（2）微信小程序的項目結(jié)構(gòu)

微信小程序項目結(jié)構(gòu)主要有四個文件類型

1谣辞、WXML在微信小程序中主要都是用微信自己定義的一些組件迫摔，和HTML頁面有相同的功能，但是HTML中的好多標簽在WXML中默認的都成了HTML中span標簽的那個功能

2泥从、WXSS是一套樣式語言用于描述WXML的組件樣式句占，具有CSS大部分特性

3、Js邏輯處理以及網(wǎng)絡請求

4躯嫉、Json小程序設置纱烘，如頁面注冊，頁面標題以及tabBar

5祈餐、app.json這是微信小程序核心的一個文件擂啥，如果沒有這個文件，項目會無法運行帆阳，微信框架將這個文件作為配置文件入口哺壶，整個小程序的全局配置

6、app.js也是微信小程序的核心文件蜒谤，這個文件主要處理一些生命周期鉤子函數(shù)以及聲明全局變量

7山宾、app.wxss全局配置樣式的文件 ?這個文件可有可無

（3）怎么封裝微信小程序的數(shù)據(jù)請求

1、將所有的接口放在統(tǒng)一的js文件中并導出

2鳍徽、在app.js中創(chuàng)建封裝請求數(shù)據(jù)的方法

3资锰、在子頁面中調(diào)用封裝的方法請求數(shù)據(jù)

（4）怎么解決跨域問題

在回調(diào)函數(shù)中調(diào)用下一個組件的函數(shù)

代碼演示：

（5）怎么進行雙向綁定

在vue中我們使用的是this.data 但是在vue中使用this.data屬性是補課咦同步到視圖的 ??我們要使用 this.setData({)}屬性來進行雙向綁定

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

① 在vue中循環(huán)是v-for==”item in list”在微信小程序中直接使用wx:for=”list”就可以循環(huán)遍歷

②在調(diào)用data模型的時候 ?小程序是this.data.info，vue中是this.info

給模型賦值時：小程序-->this.setData{{info:1}} ?vue-->this.info=1

（7）常用的生命周期鉤子函數(shù)

①onShow生命周期鉤子函數(shù)---監(jiān)聽小程序顯示 當小程序啟動時 或者從后臺進入前臺顯示阶祭，會觸發(fā)onShow

②onLoad監(jiān)聽頁面加載

③ onUnload頁面監(jiān)聽卸載

（8）組件

① 組件是視圖層的基本組成單元

② 組件的一些基本的功能以及屬性我們都可以在微信公眾平臺查看

微信小程序的優(yōu)勢：

1台妆、不用安裝翎猛，即開即用，用完就走接剩。省流量切厘，省安裝時間，不占用桌面

2懊缺、開發(fā)成本較低

3疫稿、相較于各種APP微信小程序UI和操作流程會更統(tǒng)一，降低了用戶的使用難度

Vue

Vue的優(yōu)點：

（1）輕量級的框架：只關(guān)注視圖層

（2）簡單易學：國人開發(fā)鹃两，中文文檔遗座，不存在語言障礙，易于理解與學習

（3）雙向數(shù)據(jù)綁定：在數(shù)據(jù)操作方面變得更為簡單俊扳，極大的解放了dom操作

（4）組件化：實現(xiàn)html的封裝以及重用途蒋，在構(gòu)建應用方面有獨特的優(yōu)勢

（5）視圖，數(shù)據(jù)馋记，結(jié)構(gòu)分離：使得數(shù)據(jù)的更改變得非常簡單号坡，不需要進行邏輯代碼的修改，只需要操作數(shù)據(jù)就能夠完成相關(guān)的操作

（6）虛擬DOM：不在使用原生的dom節(jié)點梯醒，vue是操作虛擬dom（dom操作非常耗費性能）

Vue的不足：

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

（2）前后端混合受限：在處理json數(shù)據(jù)和數(shù)組的時候會很麻煩

便捷的指令

綁定click時間 ?v-on:click=“tab” ?可以簡寫為 @click

綁定動態(tài)屬性v-bind:href=”url”可以簡寫為:href=”url”

便捷的修飾符阻止單擊事件冒泡->@click.stop=””只在按下回車是觸發(fā)事件->@keyup.enter=””

渲染數(shù)據(jù)的時候使用v-for遍歷渲染

MVVM模式

M：model宽堆，模型，在這里指的是數(shù)據(jù)模型

V：view茸习，視圖畜隶，在這里指的就是我們寫的頁面

VM：ViewModel，是數(shù)據(jù)模型和視圖連接的紐帶

圖解：

在做項目的過程中我們經(jīng)常使用的幾個指令：

v-once：只綁定一次

v-bind：綁定數(shù)據(jù)

v-model：綁定模型

v-on：綁定事件

v-if号胚、v-show：條件渲染

v-if：當值為true時籽慢，顯示div，當值為false時猫胁，該元素消失箱亿，代碼也會消失，相當于將代碼刪除了杜漠，當在為true時頁面會重新渲染div

v-show：只是將css屬性設為了display：none或者是block

生命周期鉤子函數(shù)：

beforeCreate：組件實例剛被創(chuàng)建极景，組件屬性計算之前察净，如data屬性等

created：組件實例創(chuàng)建完成驾茴，屬性已經(jīng)綁定，但是DOM還未完成氢卡，$el屬性還不存在

beforeMount：掛載之前

mounted：掛載之后

beforeUpdated：組件更新之前

updataed：組件更新之后

beforeDestory：組件銷毀前調(diào)用

destoryed：組件銷毀后調(diào)用

在vue2.0之后新增的鉤子函數(shù)

activeted：組件被激活時使用

deactivated：組件被移除時使用

在添加動態(tài)的class樣式時需要使用v-bind來完成-->

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

添加動態(tài)的圖片時-->

v-bind:src=”{}”

條件渲染：

在上面已經(jīng)提到過v-if以及v-show的使用了

v-if：當值為true時锈至，顯示div，當值為false時译秦，該元素消失峡捡，代碼也會消失击碗，相當于將代碼刪除了，當在為true時頁面會重新渲染div

v-show：只是將css屬性設為了display：none或者是block

列表渲染：

使用v-for將數(shù)據(jù)從定義好的數(shù)組中取出

Vue的計算屬性-----computed：

Computed相當于屬性的一個實時計算们拙，如果實時計算里關(guān)聯(lián)了對象稍途，那么對象的某個值改變的時候，同時會觸發(fā)實時計算

過濾器（filter）：

過濾器分為私有過濾器和全局過濾器

私有過濾器：注冊的時候使用filters屬性砚婆，只能在vue組件下使用

全局過濾器：注冊的時候使用vue.filter()全局API械拍，可以在所有的vue組件下使用

我們在學習前端框架的時候都離不開組件，在vue中呢組件的作用也是非常大的

組件是頁面組成的一部分装盯，是封裝好可以重用的代碼坷虑，我們可以將頁面中重復使用的一些代碼封裝成組件，這樣一來就減少了我們的工作量埂奈，也讓代碼變得整潔

在使用組件的時候我們會遇見一下的幾種情況：

父組件向子組件傳值：

我們可以通過props將父組件的值傳入到子組件里面

子組件向父組件傳值：

子組件向父組件傳值時用emit迄损，主要是通過事件傳遞給父組件

非父子組件傳值：

非父子組件就是講兩個不是父子組件的組件進行傳值，在vue的官方文檔中建議使用vuex其實就是定義一個公共的組件账磺，然后將值傳到里面在從里面獲取

Vuex：

在剛開始學習vue的時候認識到vuex是一個狀態(tài)管理工具芹敌，在中大型項目時推薦使用vuex

每一個vuex應用的核心就是store(倉庫)。Store我理解為就是一個容器绑谣，它包含著我們項目的大部分狀態(tài) vuex和單純的全局對象是有區(qū)別的：

首先vuex的狀態(tài)存儲是響應式的党窜，就是當我們的組件從store讀取數(shù)據(jù)的時候，如果store中的數(shù)據(jù)發(fā)生改變借宵，那么響應組件的數(shù)據(jù)也會更新

不能直接改變store中的狀態(tài)幌衣。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 mutation。這樣跟蹤每一個狀態(tài)的變化壤玫，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應用豁护。

由于我們的項目太大，請求時間太長欲间，影響頁面加載楚里，效果體驗極差，我們平時在做項目的時候也發(fā)現(xiàn)了猎贴，我們項目中的那個node_modules文件里面文件個數(shù)比較多的時候我們就應該在路由中配置組件懶加載

懶加載會在我們需要或者說請求到什么數(shù)據(jù)時在進行加載班缎，隨用隨載

在單頁應用中如果沒有應用懶加載，運用webpack打包后的文件會非常大她渴，導致我們在進入首頁的過程中达址，需要加載的內(nèi)容會非常多，不利于用戶體驗趁耗，如果用到懶加載的話沉唠，就會對頁面進行劃分，需要的時候在加載頁面苛败，可以有效的分擔首頁所承擔的壓力满葛，減少首頁加載應用径簿，然后再打開首頁的時候會比沒有用到組件懶加載的文件快很多。

Promise：

Promise是一個構(gòu)造函數(shù)嘀韧，是對回調(diào)函數(shù)的一種封裝篇亭，也可以說promise是ajax的執(zhí)行狀態(tài)管理工具，我們new出來的promise對象有三種狀態(tài)：進行中锄贷、已完成暗赶、失敗所以說可以很好的捕捉到我們的代碼錯誤

使用promise的好處：

代碼結(jié)構(gòu)更加清晰明了

便于管理維護

能更好的捕獲代碼錯誤

Axios請求：

在我們做項目的過程中要想獲取后臺的數(shù)據(jù)我們通常都會使用axios來完成操作。

首先axios是一個基于promise的HTTP客戶端

Axios有兩種獲取數(shù)據(jù)的方法 分別是post和get

在平時做項目的時候我用get比較多：

直接axios.get(url地址).then(回調(diào)函數(shù))就可以獲取到參數(shù)了

Post方法目前還沒有在項目中應用過

JS肃叶、JQ以及ES6

ES6：

提到ES6我就會想到ES6新增的兩個命令 分別是 let 和 const

Let：所聲明的變量只在let命令所在的代碼塊內(nèi)有效蹂随、不存在變量提升、不允許重復聲明因惭、存在暫時性死區(qū)：在代碼塊內(nèi)岳锁，使用let命令聲明變量之前，該變量都是不可用的

Const：聲明一個只讀的常量蹦魔，一旦聲明激率，常量的值就不能改變。Const與let有個共同的特性勿决，就是只在聲明所在的塊級作用域以內(nèi)有效乒躺。Const聲明的變量也是不存在變量提升，存在暫時性死區(qū)低缩，只能在聲明的位置后面使用嘉冒；不可重復聲明

還有一個函數(shù)的擴展----箭頭函數(shù)：

解決了this指向的問題箭頭函數(shù)下的this指向當前對象的父元素。

始終執(zhí)行函數(shù)定義時的this

jQuery：

在jQuery中咆繁，$是jQuery的別名讳推，所有使用$的地方都可以使用jQuery來替換

在jQuery中，無論使用哪種類型的選擇器玩般，都要以$()開始

在jQuery中也學習了好多的選擇器：

基本選擇器---層級選擇器------過濾選擇器-----表單選擇器

Ajax：

Ajax是一種創(chuàng)建交互網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)

Ajax是由JavaScript银觅、XMLHTTPRequest、DOM對象組成的坏为，然后通過Request對象來向服務器發(fā)送異步請求究驴，從服務器獲取數(shù)據(jù)，然后用js的操作更新頁面匀伏。

實現(xiàn)ajax的基本步驟分為4步：

第一步：創(chuàng)建異步調(diào)用對象

第二步：建立對服務器的調(diào)用

第三步：向服務器發(fā)送請求

第四步：接受服務器的處理結(jié)果

解決ajax跨域：

跨域問題來自源于js的同源策略洒忧，js只能訪問和操作自己作用域下的資源，不能訪問和操作其他作用域下的資源

解決跨域問題有三種方法：

JSONP：

JSONP是一種輕量級的數(shù)據(jù)傳輸格式

Ajax請求受同源策略影響帘撰，不允許進行跨域請求跑慕，而script標簽src屬性中的鏈接卻可以訪問跨域的js腳本万皿，利用這個特性摧找，服務端不在返回JSON格式的數(shù)據(jù)核行，而是返回一段調(diào)用某個函數(shù)的js代碼，而在src中進行了調(diào)用蹬耘，這樣實現(xiàn)了跨域芝雪，但是JSONP只支持get方法，不如post方法安全综苔，JSONP的實現(xiàn)需要服務器的配合惩系，如果訪問的是第三方的服務器，我們沒有修改服務器的權(quán)限如筛，那這種方法就是不可行的堡牡。

添加響應頭、代理的方式