微信小程序基礎課件匯總整本書電子教案全套課件完整版ppt最新教學教程最全課件

1、第1章 微信小程序基礎微信小程序開發(fā)教程目錄1.1 微信小程序介紹1.2 微信小程序開發(fā)工具的使用1.3 創(chuàng)建一個微信小程序項目第1章 微信小程序基礎教學目標：本章將會介紹微信小程序的基本概念和特征。并針對開發(fā)環(huán)境的搭建和開發(fā)工具的使用詳細講解。1.1.1 什么是微信小程序微信小程序這個詞可以分解為“微信”和“小程序”兩部分：（1）其中“微信”可以理解為“微信中的”，指的是小程序的執(zhí)行環(huán)境；當然微信在提供執(zhí)行環(huán)境的同時也延長了用戶使用微信的時間。（2）“小程序”是說它首先是程序，然后具備輕便的特征。小程序并不像其他應用那樣，它不需要安裝，而是通過掃描二維碼等打開后直接執(zhí)行；用完以后也不需要卸載

2、。這就是所謂用完即走的原則?？傊⑿判〕绦蚴且环N全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。 微信小程序發(fā)展歷程微信小程序，簡稱小程序，英文名Mini Program，它是由微信之父張小龍在2017年1月9日正式發(fā)布的“輕”應用，它不需要下載安裝專門的APP，只需要通過微信的載體，就可以輕松實現(xiàn)APP的功能。全面開放申請后，主體類型為企業(yè)、政府、媒體、其他組織或個人的開發(fā)者，均可申請注冊小程序。小程序、訂閱號、服務號、企業(yè)號是并行的體系。2016年1月9日，微信團隊內部提出“應用號”設想；2016年1月11日，張小龍在微信公開課上闡述微信的四大價值觀

3、，并首次提出“以服務為主”開發(fā)一個新的形態(tài)應用號；2016年9月22日，微信公眾平臺對外發(fā)送“小程序”內測邀請，首批內測名額200個；2016年11月3日，微信小程序對外開放公測，開發(fā)者可以登錄微信公眾平臺申請，開發(fā)完成后可以提交審核，但公測期間不能發(fā)布；2016年12月28日，張小龍在微信公開課上第一次完整闡述了小程序，并明確小程序在微信沒有入口、沒有小程序商店、沒有訂閱關系、不能推送消息、可以分享到聊天和群等業(yè)界關心的問題；2016年12月30日，微信公眾平臺對外公告，上線的微信小程序最多可以生成10000個帶參數的二維碼；2017年1月9日，微信小程序正式上線。1.1.1 什么是微信小程

4、序微信小程序擁有大量的微信用戶群體。小程序和公眾號一樣背靠微信，本身自帶流量，而且微信小程序的入口多；在微信中通過搜索關鍵字、掃描二維碼、群分享、好友分享等途徑來實現(xiàn)打開一個微信小程序。微信小程序可以開發(fā)游戲，即微信小游戲，它是微信小程序的一個類目，使用相同的開發(fā)工具開發(fā)。1.1.2 注冊開發(fā)者賬號在創(chuàng)建自己的微信小程序之前，需要注冊小程序賬號，這樣才能進行代碼開發(fā)和提交工作。其注冊步驟如下：（1）使用瀏覽器打開微信公眾平臺網站，如圖1-1所示，單擊右上角“立即注冊”鏈接進行注冊。微信公眾平臺微信公眾平臺是騰訊在微信APP內推出的針對個人、企業(yè)和組織提供業(yè)務服務與用戶管理能力的全新服務平臺，微

5、信公眾平臺的應用類型包括：服務號訂閱號小程序企業(yè)微信微信公眾號是應用者在微信公眾平臺注冊的一個賬號，賬號開通后，就可以在微信公眾號里發(fā)視頻、圖片、文字等推銷商品或分享生活經驗等。通常所說的微信公眾號包括服務號和訂閱號。微信公眾平臺1訂閱號訂閱號是公眾平臺的一種賬號類型，旨在為媒體和個人提供一種新的信息傳播方式，主要偏向為用戶提供資訊、消息（類似報紙雜志）。訂閱號適用于個人、媒體、企業(yè)、政府或其他組織，認證前后每天可群發(fā)1條消息。其展現(xiàn)效果如圖所示。發(fā)給訂閱用戶（粉絲）的消息，將會顯示在對方的“訂閱號消息”文件夾中。如果想用公眾平臺簡單發(fā)發(fā)消息，做宣傳推廣服務，建議選擇訂閱號。微信公眾平臺2服務

6、號服務號是公眾平臺的一種賬號類型，旨在為企業(yè)和組織提供更強大的業(yè)務服務與用戶管理能力，大多為用戶提供服務類交互（功能類似12315、114，提供服務查詢）。服務號適用于媒體、企業(yè)、政府或其他組織，認證前后每個月內都可以發(fā)送4條消息。其展現(xiàn)效果如圖所示。發(fā)給訂閱用戶（粉絲）的消息，會顯示在對方的聊天列表中。如果想用公眾平臺進行商品銷售，建議選擇服務號，后續(xù)可認證再申請微信支付商戶。微信公眾平臺3企業(yè)微信企業(yè)微信是一個全平臺企業(yè)辦公工具，它提供與微信一致的溝通體驗，為企業(yè)員工提供最基礎和最實用的辦公服務，并加入貼合辦公場景的特色功能、輕OA工具，合理化區(qū)分工作與生活，提升工作效率。2018年6月2

7、9日企業(yè)微信2.0版本發(fā)布，正式與企業(yè)號合并。其展現(xiàn)效果如圖所示微信公眾平臺4小程序小程序是一種不需要下載安裝即可運行在微信環(huán)境中的應用，它實現(xiàn)了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可。簡單說，就是把手機上的APP搬到微信里面，不需要下載安裝就可以直接使用。用戶可以在微信的“發(fā)現(xiàn)”欄找到“小程序”的入口，從該入口可以打開需要的小程序1.1.2 注冊開發(fā)者賬號（2）根據圖1-2中頁面提示，在選擇注冊微信公眾平臺的賬號類型為“小程序”，即可開始賬號注冊。（3）小程序注冊頁面包含3個填寫頁面，即帳號信息，郵箱激活、信息登記。如圖1-3所示，完成注冊后可以使用剛才的注冊賬號登錄進入小程序管理

8、頁面，如圖1-4所示，可以進行小程序信息完善和管理工作。例如填寫小程序基本信息，包括名稱、頭像、介紹及服務范圍等。1.2 微信小程序開發(fā)工具的使用獲取微信小程序AppID登錄，就可以在微信小程序管理頁面的“開發(fā)”“開發(fā)設置”中，查看到微信小程序的AppID，如圖1-4所示。注意不可直接使用服務號或訂閱號的AppID。安裝微信開發(fā)者工具1.2 微信小程序開發(fā)工具的使用獲取微信小程序AppID微信開發(fā)者工具官方下載地址：/miniprogram/dev/devtools/download.html。安裝微信開發(fā)者工具1.2 微信小程序開發(fā)工具的使用創(chuàng)建小程序項目成功后，進入如圖1.16所示的微信開

9、發(fā)者工具主界面。開發(fā)者工具主界面，從上到下，從左到右，分別為包含菜單欄、工具欄、模擬器窗口、編輯器窗口（含目錄結構窗口和代碼窗口）和調試器窗口。1.2 微信小程序開發(fā)工具的使用微信小程序發(fā)布流程完成小程序開發(fā)后，提交代碼至微信團隊審核，審核通過后即可發(fā)布（公測期間不能發(fā)布）。（1）預覽單擊開發(fā)者工具頂部操作欄的預覽按鈕，會在界面上顯示一個二維碼。使用當前小程序開發(fā)者的微信掃碼即可看到小程序在手機客戶端上的真實表現(xiàn)。（2）上傳代碼單擊開發(fā)者工具菜單的“工具”“上傳”命令，填寫版本號以及項目備注，上傳成功之后，登錄小程序管理后臺，在“管理”“版本管理”就可以找到剛提交上傳的版本了。（3）可以將這個

10、版本設置“體驗版”或者“提交審核”。（4）發(fā)布 審核通過之后，管理員的微信中會收到小程序通過審核的通知，此時登錄小程序管理后臺，在“開發(fā)管理”“審核版本”中可以看到通過審核的版本。選擇單擊發(fā)布，即可發(fā)布小程序。（5）運營數據 登錄小程序管理后臺“統(tǒng)計”，單擊相應的tab選項卡可以看到相關的數據。1.3 創(chuàng)建一個微信小程序項目啟動微信開發(fā)者工具創(chuàng)建一個微信小程序項目，單擊菜單界面“項目”“新建項目”，如圖1-8中選擇小程序項目類型為“小程序”，同時填寫項目名稱（如井字棋）、項目文件存放的路徑和APPID。其中APPID就是用戶注冊時的小程序ID，見1.2.1節(jié)。如果沒有APPID，可以使用測試號

11、。但發(fā)布時需要使用正式的小程序ID。小程序項目類型為“小程序”“小游戲”“代碼片段”1.3 創(chuàng)建一個微信小程序項目小程序項目類型為“小程序”“小游戲”“代碼片段”其中“代碼片段”是一種可分享的小項目，可用于分享小程序和小游戲的開發(fā)經驗、展示組件和 API 的使用、復現(xiàn)開發(fā)問題等等。分享代碼片段會得到一個鏈接，所有擁有此分享鏈接的人可以在工具中導入此代碼片段。他們和普通“小程序”項目一樣可以直接運行，主要區(qū)別在于代碼片段體積小且可以被分享?！靶∮螒颉笔切〕绦虻囊粋€類目，小游戲是微信開放給小程序的更多的能力，讓小程序開發(fā)者有了開發(fā)游戲的能力?！靶∮螒颉遍_發(fā)將在第8章學習。初學者這里選擇小程序項目類

12、型為“小程序”。1.3 創(chuàng)建一個微信小程序項目官方默認的小程序項目的目錄結構及文件如圖所示，根目錄下app.js、app,json、app.wxss和project.config.json四個文件的作用分別是用于處理小程序的業(yè)務邏輯、對小程序的頁面路徑等相關屬性進行全局配置、定義小程序頁面的全局樣式和保存小程序項目的配置信息。本章小結本章介紹了微信平臺的訂閱號、服務號、企業(yè)微信和小程序的應用場景，詳細闡述了小程序的基本架構和特性，介紹了小程序開發(fā)工具的安裝使用方法和創(chuàng)建小程序的步驟，為讀者后續(xù)的微信小程序開發(fā)打下了基礎。第2章 JavaScript語法基礎微信小程序開發(fā)教程目錄2.1 在HTM

13、L中使用JavaScript語言2.2 基本語法2.3 常用控制語句2.3.1 選擇結構語句2.3.2 循環(huán)結構語句2.4 函數2.5 JavaScript面向對象程序設計2.6 JavaScript內置對象2.7 ES6簡介第2章 JavaScript語法基礎教學目標：本章將會介紹JavaScript的核心語法。掌握JavaScript的面向對象編程思想以及有關對象的基本概念初步掌握創(chuàng)建和使用自定義的類和對象。了解ES6的語法。2.1 JavaScript語言概述JavaScript主要用于以下三個領域：瀏覽器：得到所有瀏覽器的支持，只要有網頁的地方就有JavaScript。服務器：借助no

14、de.js運行環(huán)境，JavaScript已經成為很多開發(fā)者進行后端開發(fā)的選擇之一。微信小程序：小程序邏輯開發(fā)的語言。標準ECMAScript通常縮寫為ES。在微信小程序中通常使用ES5和ES6版本。 微信小程序2.1.2 運行JavaScript語言1在瀏覽器中運行在HTML文件中使用JavaScript腳本時，JavaScript代碼需要出現(xiàn)在和之間?！纠?-1】一個簡單的在HTML文件中使用JavaScript腳本實例。另外一種插入 JavaScript程序的方法是把 JavaScript 代碼寫到一個.js文件當中，然后在HTML文件中引用該js文件，方法如下：2.1.2 運行JavaS

15、cript語言JavaScript是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經過編譯，而是將文本格式的字符代碼發(fā)送給客戶端由瀏覽器解釋執(zhí)行。注意與Java的區(qū)別，Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經過編譯，因而客戶端上必須具有相應平臺上的解釋器，它可以通過解釋器實現(xiàn)獨立于某個特定的平臺編譯代碼的束縛。2.1.2 運行JavaScript語言2在服務器中運行搭建node運行環(huán)境后，通過命令行執(zhí)行JS文件。例如：node output.js3在微信小程序中運行在微信小程序中，JavaScript需要單獨保存在JS文件中，即外聯(lián)式。小程序框架對此進行了優(yōu)化，只要按目錄規(guī)范保證J

16、S文件與WXML文件同名，則無須使用引入即可使用。在微信開發(fā)工具中，單擊console選項卡可以查看JS代碼文件中console.log()輸出的調試信息。例如： var iNum = 10; iNum *= 2; console.log(iNum);console選項卡例如： var iNum = 10; iNum *= 2; console.log(iNum);2.2 基本語法2.2.1 數據類型JavaScript包含下面5種原始數據類型。1Undefined ：即為未定義類型，用于不存在或者沒有被賦初始值的變量或對象的屬性2Null ： 作用是表明數據空缺的值。一般將Undefined

17、型和Null 型等同對待。3Boolean ：取值為ture 或false，分別表示邏輯真和假4String：字符型數據。JavaScript不區(qū)分單個字符和字符串。用雙引號或單引號引起來。var nameA = Tom;var nameB = Tom;5Number：即為數值型數據，包括整數型和浮點型。var myDataA=8;var myDataB=6.3;JavaScript腳本語言除了支持上述基本數據類型外，也支持組合類型，如數組Array和對象Object等。2.2 基本語法2.2.2 常量和變量1常量常量是內存中用于保存固定值的單元，在程序中常量的值不能發(fā)生改變。2變量變量是內存

18、中命名的存儲位置，可以在程序中設置和修改變量的值。在JavaScript中，可以使用var關鍵字聲明變量。2.2.3 注釋JavaScript支持2種類型的注釋字符。1/2/* . */2.2 基本語法2.2.4 運算符和表達式1算術運算符算術運算符可以實現(xiàn)數學運行，包括加（+）、減（-）、乘（*）、除（/）和求余（%）。2賦值運算符JavaScript 腳本語言的賦值運算符包含“ =”、 “ +=”、 “=”、 “ *=”、 “ /=”、 “ %=”、“ &=”、“ =”等，如表 2-1所示。3關系運算符JavaScript 腳本語言中用于比較兩個數據的運算符稱為比較運算符，包括“ = =”

19、、“ !=”、“”、“”、“=”等，其具體作用見表2-2所示。4邏輯運算符JavaScript 腳本語言的邏輯運算符包括 “ &”、“ |”和“ !”等，用于兩個邏輯型數據之間的操作，返回值的數據類型為布爾型。邏輯運算符的功能如表2-3所示。2.2 基本語法2.2.4 運算符和表達式5位運算符位移運算符用于將目標數據（二進制形式）往指定方向移動指定的位數。JavaScript 腳本語言支持“”和“”等位移運算符，其具體作用如見表2-4：6條件運算符在 JavaScript 腳本語言中，“? ：”運算符用于創(chuàng)建條件分支。ab？a:b7逗號運算符使用逗號運算符可以在一條語句中執(zhí)行多個運算，例如：v

20、ar iNum1 = 1, iNum = 2, iNum3 = 3;8typeof運算符typeof 運算符用于表明操作數的數據類型，返回數值類型為一個字符串。2.3 常用控制語句2.3.1 選擇結構語句 1if語句 2if.else.語句2.3 常用控制語句3if.else ifelse語句【例2-3】下面是一個顯示當前系統(tǒng)日期的JavaScript代碼，其中使用到if.else ifelse語句。下面是一個顯示當前系統(tǒng)日期的JavaScript代碼/顯示當前系統(tǒng)日期 d=new Date(); console.log(今天是); if(d.getDay()=1) console.log(星

21、期一); else if(d.getDay()=2) console.log(星期二); else if(d.getDay()=3) console.log(星期三); else if(d.getDay()=4) console.log(星期四); else if(d.getDay()=5) console.log(星期五); else if(d.getDay()=6) console.log(星期六); else console.log(星期日); 2.3 常用控制語句4switch語句 switch(表達式) case 值1: 語句塊1 break; case 值2: 語句塊2 break

22、; case 值n: 語句塊n break; default: 語句塊n+1 【例2-5】將例2-4的按分數輸出其等級使用switch語句實現(xiàn)。按分數輸出其等級 /使用switch語句實現(xiàn)按分數輸出其等級 var MyScore = 89; /請輸入成績 score =parseInt(MyScore/10) / parseInt取整 switch(score/10) case 10: case 9: console.log(優(yōu)); break; case 8: console.log(良); break; case 7: console.log(中); break; case 6: cons

23、ole.log(及格); break; default: console.log (不及格); if.else ifelse語句實現(xiàn)按分數輸出其等級var score = 89; /請輸入成績 if (score = 90) console.log(優(yōu));else if (score = 80 & score= 70) console.log(中);else if (score = 60) console.log(及格);else console.log (不及格);2.3 常用控制語句2.3.2 循環(huán)結構語句1 while語句 while語句的語法格式為：while (表達式) 循環(huán)體語句【

24、例2-6】用while循環(huán)來計算1+2+3 . +98+99+100的值。/計算1+2+3 . +98+99+100的值var total=0;var i=1;while(i=100) total+=i; i+;console.log(total);2.3 常用控制語句2.3.2 循環(huán)結構語句2dowhile語句do-while語句的語法格式如下：do 循環(huán)體語句 while (表達式)；【例2-7】用dowhile循環(huán)來計算1+2+3 . +98+99+100的值。 /計算1+2+3 . +98+99+100的值 var total=0; var i=1; do total+=i; i+;

25、while(i=100); console.log(total);2.3 常用控制語句3for語句 for 循環(huán)語句是循環(huán)結構語句，按照指定的循環(huán)次數，循環(huán)執(zhí)行循環(huán)體內語句（或語句塊），其基本結構如下：for(表達式1;表達式2;表達式3) 循環(huán)體語句【例2-8】用for循環(huán)來計算1+2+3 . +98+99+100的值。 /計算1+2+3 . +98+99+100的值var total=0;for(var i=1; i=100; i+) total+=i;console.log(total);2.3 常用控制語句4continue語句continue語句的一般格式為：continue;該語句

26、只能用在循環(huán)結構中。當在循環(huán)結構中遇到continue語句時，則跳過continue語句后的其他語句，結束本次循環(huán)，并轉去判斷循環(huán)控制條件，以決定是否進行下一次循環(huán)。5break語句break語句的一般格式為：break;該語句只能用于兩種情況：（1）用在switch結構中，當某個case分支執(zhí)行完后，使用break語句跳出switch結構。（2）用在循環(huán)結構中，用break語句來結束循環(huán)。如果放在嵌套循環(huán)中，則break語句只能結束其所在的那層循環(huán)。2.4 函數函數（function）由若干條語句組成，用于實現(xiàn)特定的功能。函數包含函數名、若干參數和返回值。2.4.1 創(chuàng)建自定義函數funct

27、ion 函數名 (參數列表) 函數體function PrintWelcome() document.write(歡迎使用JavaScript);2.4 函數2.4.2 調用函數 1在JavaScript中使用函數名來調用函數在JavaScript中，可以直接使用函數名來調用函數。無論是內置函數還是自定義函數，調用函數的方法都是一致的。2在HTML中使用javascript:方式調用JavaScript函數在HTML中的a鏈接中可以使用javascript:方式調用JavaScript函數，方法如下：3與事件結合調用JavaScript函數可以將JavaScript函數指定為JavaScrip

28、t事件的處理函數。當觸發(fā)事件時會自動調用指定的JavaScript函數。設置 Hello1:function() console.log(單擊我了) 2.4 函數/計算并打印num1和num 2之和 function sum(num1, num2) console.log(num1 + num2); sum(1, 2); /結果是3與事件結合調用JavaScript函數設置 Hello1:function() console.log(單擊我了) 2.4 函數2.4.3 變量的作用域 var a = 100;/ 全局變量 function setNumber() var a = 10;/ 局部變

29、量 console.log(a);/ 打印局部變量a setNumber(); console.log(); console.log(a);/ 打印全局變量a程序運行結果：101002.4 函數2.4.3 變量的作用域在函數中定義的變量被稱為局部變量。局部變量只在定義它的函數內部有效，在函數體之外，即使使用同名的變量，也會被看作是另一個變量。相應地，在函數體之外定義的變量是全局變量。全局變量在定義后的代碼中都有效，包括它后面定義的函數體內。如果局部變量和全局變量同名，則在定義局部變量的函數中，只有局部變量是有效的。2.4 函數2.4.4 函數的返回值使用return語句可以返回函數值并退出函數

30、function 函數名() return 返回值;2.4.5 定義函數庫JavaScript函數庫是一個. js文件，其中包含函數的定義。在HTML文件中引用函數庫js文件的方法如下： / 引用js文件中的函數求(m,n)兩個數字之間的和，代碼如下：function getTotal(m,n) var total=0; if(m=n) return false; / n必需大于m否則無意義 for(var i=m;i=n;i+) total+=i; return total;console.log(getTotal(1, 10);2.4 函數2.4.6 JavaScript內置函數1aler

31、t()函數alert()函數用于彈出一個消息對話框，該對話框包括一個“確定”按鈕。2confirm()函數confirm()函數用于顯示一個請求確認對話框，包含一個“確定”按鈕和一個“取消”按鈕。在程序中，可以根據用戶的選擇決定執(zhí)行的操作2.4 函數3parseFloat()函數parseFloat()函數用于將字符串轉換成浮點數字形式。語法如下：parseFloat(str)參數str是待解析的字符串。函數返回解析后的數字。4parseInt ()函數parseInt ()函數用于將字符串轉換成整型數字形式。語法如下：parseInt(str, radix)參數str是待解析的字符串；參數r

32、adix可選。表示要解析的數字的進制。該值介于 2 36 之間。parseInt(10);/10進制，結果是10parseInt(f,16);/16進制，結果是15parseInt(010,2);/2進制，結果是22.4 函數3isNaN()函數isNaN()用于檢驗某個值是否為NaN（not a number不是數字），返回false為數字，返回true為非數字。var num = 123.456789abc;isNaN(num) /結果是trueisNaN(123)/結果是false4強制類型轉換函數用戶可以使用強制類型轉換函數來轉換值的類型。在ECMAScript中可以使用以下3種強制類

33、型轉換函數。String(value)：把給定的值轉換成字符串。類似于toString()方法，但是和它又不同，對null或undefined值toString()會報錯。Boolean(value)：把給定的值轉換成Boolean型。給定的值為空字符串、數字0、undefined或null返回false，其余返回true。Number(value)：把給定的值轉換成數字（可以是整數或浮點數）。2.4 函數var a=String(123); /返回123var a=Boolean(0); /返回falsevar a=Boolean(undefined); /返回falsevar a=Bool

34、ean(null); /返回falsevar a=Boolean(50); /返回truevar a=Number(11.11); /返回11.115保留幾位小數NumberObject.toFixed(位數)；toFixed()位數功能是保留幾位小數（四舍五入），參數為保留的小數點后位數，返回的值為String 類型。var a=13.37.toFixed(4); /返回13.3700var a=13.378888.toFixed(2); /返回13.382.5 JavaScript面向對象程序設計JavaScript腳本是面向對象（Object-based）的編程語言，它可以將屬性和代碼集

35、成在一起，定義為類，從而使程序設計更加簡單、規(guī)范、有條理。通過對象的來訪問可大大簡化JavaScript程序的設計，并提供直觀、模塊化的方式進行腳本程序開發(fā)。2.5.1 面向對象程序設計思想對象是客觀世界存在的人、事和物體等實體。現(xiàn)實生活中存在很多的對象，比如貓、自行車等。不難發(fā)現(xiàn)它們有兩個共同特征：都有狀態(tài)和行為。圖2-8 以自然人構造的對象2.5.1 面向對象程序設計思想凡是能夠提取一定度量數據并能通過某種途徑對度量數據實施操作的客觀存在都可以構成一個對象，且用屬性來描述對象的狀態(tài)，使用方法和事件來處理對象的各種行為。下面介紹一些概念。對象（Object）：面向對象程序設計思想可以將一組數

36、據和與這組數據有關操作組裝在一起，形成一個實體，這個實體就是對象。屬性：用來描述對象的狀態(tài)。通過定義屬性值，可以改變對象的狀態(tài)。如圖2-8中，可以定義height表示該自然人身高，字符串HungryOrNot來表示該自然人肚子的狀態(tài)，HungryOrNot成為自然人的某個屬性；方法：也稱為成員函數，是指對象上的操作。如圖2-8中，可以定義方法Eat( )來處理自然人肚子很餓的情況，Eat( )成為自然人的某個方法；事件：由于對象行為的復雜性，對象的某些行為需要用戶根據實際情況來編寫處理該行為的代碼，該代碼稱為事件。在圖2-8中，可以定義事件DrinkBeforeEat( )來處理自然人肚子很餓

37、同時嘴巴很渴需要先喝水后進食。2.5.2 面向對象編程面向對象編程（OPP）是一種計算機編程架構，具有三個最基本的特點：封裝、重用性（繼承）、多態(tài)。（1）類（class）：具有相同或相似性質的對象的抽象就是類。 （2）封裝：將數據和操作捆綁在一起，定義一個新類的過程就是封裝。（3）繼承：類之間的關系，在這種關系中，一個類共享了一個或多個其他類定義的屬性和行為。 （4）多態(tài)：從同一個類中繼承得到的子類也具有多態(tài)性，即相同的函數名在不同子類中有不同的實現(xiàn)。就如同子女會從父母那里繼承到人類共有的特性，而子女也具有自己的特性。實際上，JavaScript語言是通過一種叫做原型（prototype）的方

38、式來實現(xiàn)面向對象編程的。2.5.3 JavaScript類的定義和實例化嚴格的說，JavaScript 是基于對象的編程語言，而不是面向對象的編程語言。在面向對象的編程語言中（如Java、C+、C#、PHP等），聲明一個類使用 class 關鍵字。但是在JavaScript中，沒有聲明類的關鍵字，也沒有辦法對類的訪問權限進行控制。JavaScript 使用函數來定義類。1 .類的定義定義一個Person類：function Person() = 張三 ; / 定義一個屬性 name this.sex= 男 ; / 定義一個屬性 sex this.say=function() / 定義一個方法

39、say() console.log(我的名字是 + + ，性別是 + this.sex + 。); 2.5.3 JavaScript類的定義和實例化2. 創(chuàng)建對象（類的實例化）創(chuàng)建對象的過程也是類實例化的過程。在JavaScript中，創(chuàng)建對象（即類的實例化）使用 new 關鍵字。創(chuàng)建對象語法：new className()將上面的 Person 類實例化：var zhangsan=new Person();zhangsan.say();運行代碼，輸出如下內容： 大家好，我的名字是 張三 ，性別是 男 。2.5.3 JavaScript類的定義和實例化3. 通過對象直接初始化創(chuàng)建對象通過直接初

40、始化對象來創(chuàng)建對象，與定義對象的構造函數方法不同的是，該方法不需要new生成此對象的實例，改寫zhangsan對象：/直接初始化對象var zhangsan= name:張三, sex:男, say: function ()/定義對象的方法 document.write(大家好，我的名字是 + + ，性別是 + this.sex);zhangsan.say();對象直接初始化是一個“名字/值”對列表，最后用一個大括號括起來?！懊?值”對表示對象的一個屬性或方法，名和值之間用冒號分隔。2.5.3 JavaScript類的定義和實例化3. 通過對象直接初始化創(chuàng)建對象上面的zhangsan對象，也

41、可以這樣來創(chuàng)建：var zhangsan= = 張三;zhangsan.sex = 男;zhangsan.say = function() return 嗨！大家好，我來了。; 該方法在只需生成一個對象實例并進行相關操作的情況下使用時，代碼緊湊，編程效率高，但致命的是，若要生成若干個對象實例，就必須為生成每個對象實例重復相同的代碼結構，代碼的重用性比較差，不符合面向對象的編程思路，應盡量避免使用該方法創(chuàng)建自定義對象。2.5.4 JavaScript訪問對象的屬性和方法屬性是一個變量，用來表示一個對象的特征，如顏色、大小、重量等；方法是一個函數，用來表示對象的操作，如奔跑、呼吸、跳躍等。對象的屬

42、性和方法統(tǒng)稱為對象的成員。在JavaScript中，可以使用“ . ”和“ ”來訪問對象的屬性。1. 使用“ . ”來訪問對象屬性語法：objectNpertyName其中，objectName 為對象名稱，propertyName為屬性名稱。 2. 使用“ ”來訪問對象屬性語法： objectNamepropertyName3. 訪問對象的方法在JavaScript中，只能使用“ . ”來訪問對象的方法。語法：objectName.methodName()2.5.4 JavaScript訪問對象的屬性和方法【例2-15】創(chuàng)建一個Person對象并訪問其成員。function Person()

43、 =張三; / 定義一個屬性name this.sex=男; / 定義一個屬性sex this.age=22; / 定義一個屬性age this.say=function() / 定義一個方法 say() return 我的名字是 + + ，性別是 + this.sex + ，今年 + this.age +歲!; var zhangsan=new Person();console.log(姓名：+); / 使用“.”來訪問對象屬性console.log(性別：+zhangsan.sex);console.log(年齡：+zhangsanage); / 使用“ ”來訪問對象屬性console.l

44、og(zhangsan.say(); / 使用“.”來訪問對象方法動態(tài)添加對象的屬性和方法【例2-16】用Person類創(chuàng)建一個對象，向其添加屬性和方法。function Person(name,sex) / 定義類 =name; / 定義一個屬性 name this.sex=sex; / 定義一個屬性 sex this.say=function() / 定義一個方法 say() return 大家好，我的名字是 + + ，性別是 + this.sex + 。; var zhangsan=new Person(張三,男); / 創(chuàng)建對象zhangsan.say();/ 動態(tài)添加屬性和方法zha

45、ngsan.tel /動態(tài)添加屬性telzhangsan.run=function() / 動態(tài)添加方法run return 我跑得很快！ ;/ 彈出警告框alert(姓名：+);alert(姓別：+zhangsan.sex);alert(zhangsan.say();alert(電話：+zhangsan.tel);alert(zhangsan.run();2.6 JavaScript內置對象JavaScript 腳本提供豐富的內置對象（內置類），包括同基本數據類型相關的對象（如String、Boolean、Number）、允許創(chuàng)建用戶自定義和組合類型的對象（如Ob

46、ject、Array）和其他能簡化JavaScript操作的對象（如Math、Date、RegExp、Function）。了解這些內置對象是JavaScript編程和游戲開發(fā)的基礎和前提。2.6 JavaScript內置對象JavaScript的內置對象（內置類）框架如圖所示。2.6.2 基類Object所有的JavaScript對象都繼承自Object類，后者為前者提供基本的屬性（如prototype屬性等）和方法（如toString()方法等）。而前者也在這些屬性和方法基礎上進行擴展，以支持特定的某些操作?；怬bject的屬性和方法見表2-2所示。2.6.3 Date類Date類主要提供

47、獲取和設置日期和時間的方法，如getYear()、getMonth()、getDate()等。Date類的常用方法見表2-3所示。2.6.4 String類String是JavaScript的字符串類，用于管理和操作字符串數據?？梢允褂孟旅?種方法創(chuàng)建String對象：MyStr = new String(這是一個測試字符串); /把參數作為MyStr對象的初始值。MyStr = 這是一個測試字符串; / 直接對String對象賦值字符串String類只有一個屬性length，用來返回字符串的長度。【例2-18】計算String對象的長度。 var MyStr; MyStr = new Str

48、ing(這是一個測試字符串); console.log(“ +MyStr+”的長度為: + MyStr. length); /演示使用String對象的length屬性運行結果如下： “這是一個測試字符串”的長度為:9String類的常用方法見表2-4所示。2.6.4 String類【例2-19】演示slice()方法的例子。var str=Hello world!console.log(str. slice (6, 11)2.6.5 Array類Array數組是在內存中保存一組數據。Array類的常用方法見表2-5所示。1Array數組創(chuàng)建與使用方法一：可以使用new關鍵字創(chuàng)建Array對象

49、，方法如下：Array對象 = new Array(數組大小)例如下面的語句可以創(chuàng)建一個由3個元素組成的數組cars：var cars=new Array(3);通過下面的方法訪問數組元素。數組元素值 = 數組名索引var cars=new Array(3);cars0=Audi;cars1=BMW;cars2=Volvo;方法二：在創(chuàng)建數組對象的時候給元素賦值。var cars=new Array(Audi,BMW,Volvo);方法三：直接賦值。var cars=Audi,BMW,Volvo;2.6.5 Array類2數組遍歷可以使用for語句遍歷數組的所有索引，然后使用數組名索引方法訪問

50、每個數組元素。【例2-20】使用for語句遍歷數組。 var MyStr; MyArr = new Array(3); MyArr0 = 中國; MyArr1 = 美國; MyArr2 = 日本; for(var i=0;i MyArr.length; i+) console.log(MyArri);2.6.5 Array類3數組排序使用Array類的sort ()方法可以對數組元素進行排序，sort ()方法返回排序后的數組。語法如下：arrayObject. sort(sortby)參數sortby可選，用于規(guī)定排序順序，sortby必須是函數。如果調用該方法時沒有使用參數，將按字母順序對

51、數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序?！纠?-22】對數組排序的例子。 var arr = new Array(6) ; arr0 = George; arr1 = Johney; arr2 = Thomas; arr3 = James; arr4 = Adrew; arr5 = Martin; console.log(排序前+ arr); console.log(排序后+ arr.sort();2.6.5 Array類4數組的操作(1) push()方法往數組后面添加數組，并返回數組新長度。var a = aa,bb,cc;console.log(a.push(d

52、d); /輸出4console.log(a); /輸出 aa,bb,cc,dd而unshift()方法可向數組的開頭添加一個或更多元素，并返回新的長度。(2) pop()方法和shift()方法pop()方法刪除數組最后一個元素，并返回該元素。而shift()方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。var a = aa,bb,cc;console.log(a.pop(); /輸出ccconsole.log(a.shift ();/輸出aa2.6.5 Array類 (3) slice()方法可從已有的數組中返回選定的元素的一個新數組。語法如下：arrayObject.slic

53、e(start,end)(4) join()方法用于把數組中的所有元素連接起來放入一個字符串。 var arr = new Array(3) ; arr0 = George; arr1 = John; arr2 = Thomas; console.log(arr.join(.);/ 輸出 George.John.Thomas2.6.5 Array類5二維數組數組中的元素又是數組就成為二維數組。創(chuàng)建二維數組方法如下：方法一：先創(chuàng)建一個一維數組，然后該一維數組的所有元素再創(chuàng)建一維數組。var persons = new Array(3);/創(chuàng)建一個一維數組persons0 = new Array(

54、2);/每個元素persons0又是一維數組persons1 = new Array(2);/每個元素persons1又是一維數組persons2 = new Array(2);/每個元素persons2又是一維數組persons00 = zhangsan;persons01 = 25;persons10 = lisi; persons11 = 22;persons20 = wangwu;persons21 = 32;方法二：先創(chuàng)建一個一維數組，然后該一維數組的所有元素直接賦值。var persons = new Array(3);persons0 = zhangsan, 25;persons

55、1 = lisi, 21;persons2 = wangwu, 32;方法三：直接賦值。var persons = zhangsan, 25, lisi, 21, wangwu, 32;2.6.5 Array類5二維數組數組中的元素又是數組就成為二維數組。創(chuàng)建二維數組方法如下：方法一：先創(chuàng)建一個一維數組，然后該一維數組的所有元素再創(chuàng)建一維數組。var persons = new Array(3);/創(chuàng)建一個一維數組persons0 = new Array(2);/每個元素persons0又是一維數組persons1 = new Array(2);/每個元素persons1又是一維數組perso

56、ns2 = new Array(2);/每個元素persons2又是一維數組persons00 = zhangsan;persons01 = 25;persons10 = lisi; persons11 = 22;persons20 = wangwu;persons21 = 32;方法二：先創(chuàng)建一個一維數組，然后該一維數組的所有元素直接賦值。var persons = new Array(3);persons0 = zhangsan, 25;persons1 = lisi, 21;persons2 = wangwu, 32;方法三：直接賦值。var persons = zhangsan, 25

57、, lisi, 21, wangwu, 32;2.6.6 Math對象Math對象是對一個已創(chuàng)建好的Math類的實例，因此不能使用new運算符。其提供一些屬性是數學中常用的常量，E（自然對數的底，約為2.718）、LN2（2的自然對數）、LN10（10的自然對數）、LOG2E（以2為底的e的對數）、LOG10E（以10為底的e的對數）、PI（圓周率）等。Math 對象提供的一些方法是數學中常用的函數，如sin()、random()、log()等。Math對象的常用方法見表 2-6所示。2.7 ES6簡介微信小程序已經支持絕大部分的ES6 API，用戶可以放心的使用。2.7.1 變量相關ES20

58、15(ES6) 新增加了兩個重要的JavaScript關鍵字：let和const。let聲明的變量只在let所在的代碼塊（一對花括號內部的代碼）內有效，也成為塊作用域。let只能聲明同一個變量一次而var可以聲明多次。for循環(huán)計數器很適合用let聲明。var j=5;for (let j = 0; j 左邊為函數輸入參數，而右邊是進行的操作以及返回的值。例如：x = x * x上面的箭頭函數相當于： 匿名函數的一種簡寫function (x) return x * x;如果參數不是一個，就需要用括號()括起來。/ 兩個參數:(x, y) = x * x + y * y 如果要返回一個對象，就

59、要注意，如果是單表達式，這么寫的話會報錯。x = foo: x / Syntax Error:因為和函數體的 . 有語法沖突，所以要改為：x = ( foo: x ) / okES6標準新增了一種新的函數Arrow Function（箭頭函數）。箭頭函數的定義用的就是一個箭頭。2.7.6 箭頭函數2this相關箭頭函數看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區(qū)別：箭頭函數沒有自己的this，箭頭函數會捕獲其所在上下文的this值，作為自己的this?？梢越鉀Q由于JavaScript嵌套函數中this指向的問題。通常來說，箭頭函數內部的this就是外層代碼塊的this。

60、 = window;var obj = name:latency, show_name:function () /箭頭函數的this，指向箭頭函數定義時所處的對象，默認使用外層函數的this. var fn = () = console.log(); /其this指向obj，輸出latency fn(); ,obj.show_name(); /輸出obj的name：latency 以上例子就可以很清楚的看出箭頭函數和普通函數中this的區(qū)別。箭頭函數與普通函數的區(qū)別var obj = a: 10, b: () = console.log(this.a); / undefined console