微信小程序培訓(xùn)課完整版_圖文

1、犀牛課堂小程序培訓(xùn)課,——培訓(xùn)講師：Tabniu 微信、QQ、TEL：13912992499,微信小程序開(kāi)發(fā)工具,1、打開(kāi)瀏覽器輸入https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364打開(kāi)頁(yè)面2、查看系統(tǒng)信息3、選擇下載對(duì)應(yīng)的工具4、安裝工具5、打開(kāi)工具（需要微信掃描登錄）6、嘗試運(yùn)行微信小程序,學(xué)完你能做

2、什么？怎么做？,1、你能夠獨(dú)立的編寫(xiě)自己的網(wǎng)頁(yè)，如個(gè)人簡(jiǎn)歷。2、微信運(yùn)營(yíng)人員完全可以?huà)侀_(kāi)網(wǎng)絡(luò)上的微信編輯器，自己想做啥樣就啥樣，完全自己做主。3、你可以勝任初級(jí)web前端的崗位要求。4、你可以做自己想要的微信功能（基于你強(qiáng)大的javascript編程能力）5、除了以上，你可以開(kāi)發(fā)網(wǎng)絡(luò)上任何一家提供api的接口，實(shí)現(xiàn)自己想要的應(yīng)用程序。如淘寶客，地圖導(dǎo)航，天氣預(yù)報(bào)等等。案例：http://www.zgdnbxg.com 電腦打開(kāi)和

3、手機(jī)瀏覽器打開(kāi)是不同的風(fēng)格,該案例用html + css + javascript + php + 淘寶客api開(kāi)發(fā)怎么做？通過(guò)教學(xué)，學(xué)會(huì)基礎(chǔ)的知識(shí)，親自動(dòng)手，不懂先百度，再不懂問(wèn)網(wǎng)友。周而復(fù)始，鍛煉自己的一套學(xué)習(xí)方法和學(xué)習(xí)技巧。就像你一開(kāi)始玩lol一樣，拿出那樣的游戲精神，大不了坑了隊(duì)友唄，坑一次兩次就夠了，關(guān)鍵要學(xué)會(huì)思考，能做什么？先做什么？再做什么？不用一年，你一定會(huì)成為高手。網(wǎng)絡(luò)視頻的合理利用優(yōu)酷視頻：電腦打開(kāi)優(yōu)酷視頻

4、，搜索關(guān)鍵字“html基礎(chǔ)教程”選擇適合自己的視頻觀(guān)看。,學(xué)習(xí)小程序所需的技能,1、軟件的使用（代碼的輔助工具）瀏覽器：瀏覽器很多，有谷歌瀏覽器，火狐瀏覽器，ie瀏覽器，qq瀏覽器等，這里我們統(tǒng)一使用火狐瀏覽器調(diào)試。（沒(méi)有火狐沒(méi)關(guān)系，只要你有瀏覽器就行。只不過(guò)火狐好一點(diǎn)，不影響開(kāi)發(fā)）編輯器：編輯器也有很多，有自帶的文編編輯器，dreamweaver，eclipse，android studio都行，這里我們統(tǒng)一使用Dreamwea

5、ver編寫(xiě)代碼。（沒(méi)有dreamweaver也沒(méi)關(guān)系，只要你的系統(tǒng)是windows，有記事本就ok）不要糾結(jié)細(xì)節(jié)。掌握方法才是學(xué)習(xí)的目的2、HTML：超文本標(biāo)記語(yǔ)言（與瀏覽器溝通的一種方式，最基礎(chǔ)）3、CSS：層疊樣式表（就想人的衣服一樣，裝飾的，但很重要！?。。?、JavaScript：2016最火的網(wǎng)絡(luò)腳本語(yǔ)言，往后幾年會(huì)一直火下去（必須會(huì)?。。。?。在這里要感謝微信大神：張小龍。,html基礎(chǔ)課程,HTML：超文本標(biāo)記語(yǔ)言

6、標(biāo)簽：閉合標(biāo)簽、自閉標(biāo)簽HTML很重要，重要，一定要學(xué)好。HTML標(biāo)簽的熟練使用如：等等。演示常用的標(biāo)簽，并在瀏覽器打開(kāi)，查看效果html代碼分：塊級(jí)元素/行內(nèi)元素html在線(xiàn)手冊(cè)地址：http://www.w3school.com.cn/html/ 多看,為什么要學(xué)習(xí)css？怎么學(xué)？,在學(xué)習(xí)之前我們要明白學(xué)習(xí)css是為了什么？1、前面我們提到css是一種“裝飾”語(yǔ)言。是人的衣服，是多彩的，是多樣化的，是靈活

7、的。2、學(xué)習(xí)css我們能夠把網(wǎng)頁(yè)或者小程序（產(chǎn)品）打扮漂亮，為了讓用戶(hù)看起來(lái)舒服，用起來(lái)爽，專(zhuān)業(yè)點(diǎn)就叫用戶(hù)體驗(yàn)佳，css就起到關(guān)鍵的作用。怎么學(xué)？？？1、學(xué)習(xí)css之前html要熟練，沒(méi)有墻面（html）的話(huà)，我們給墻面怎么刷漆（css裝飾）？對(duì)不對(duì)？2、看視頻教程，看書(shū)籍，寫(xiě)代碼，調(diào)試代碼，多思考。3、堅(jiān)持下去，選擇他就要把他學(xué)好，不忘初心。網(wǎng)絡(luò)在線(xiàn)手冊(cè)地址：http://www.w3school.com.cn/cs

8、s/,css基礎(chǔ)課程,css中文名稱(chēng)：層疊樣式表css語(yǔ)法：由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明選擇器：通常是指需要改變樣式的html元素每條聲明：由一個(gè)屬性和一個(gè)值組成（如p{color:red;}）p就是一個(gè)html元素（標(biāo)簽）一個(gè)屬性是color（顏色），一個(gè)值是red，中間用英文冒號(hào)隔開(kāi) : 在值的后面用英文的 分號(hào)結(jié)束 ;一條聲明：例如p{color:red;

9、} p { color : red ; } 也可以多條聲明：例如p{color:red; text-align:center;}多條聲明用;隔開(kāi),可以寫(xiě)在一行;注意：英文狀態(tài)下的分號(hào),p{color:red; text-align:center;text-indent:24px;}也可以這樣編寫(xiě)，但是一定要注意結(jié)尾有英文的分號(hào).初學(xué)者建議采用上面的方式編寫(xiě)css;css高級(jí)語(yǔ)法同時(shí)

10、定義多個(gè)元素多組聲明的寫(xiě)法，英文狀態(tài)下的逗號(hào)p,h1,h2,div,table{color:red;font-size:16px;}4種css的加載方式1、行內(nèi)方式一段文本這里我們定義了段落的字體為紅色，字體大小為14像素，行高為30px2、內(nèi)嵌方式p{color:red; font-size:12px;text-indent:24px;}3、連接方式（最常用）4、導(dǎo)入樣式（不常用）@impor

11、t url(my.css),樣式表屬性布局：clear、float、clip、overflow、overflow-x、overflow-y、display、visibility定位：position、z-index、top、right、bottom、left邊界：margin、margin-top、mairgin-right、margin-bottom、margin-left補(bǔ)白：padding、padding-left、pa

12、dding-right、padding-bottom、padding-left尺寸：height、max-height、min-height、width、max-width、min-width背景：background、background-color、background-image、background-repeat輪廓：outline、outline-color、outline-style、outline-width列表：

13、list-style、list-style-image、list-style-position、list-style-type表格：border-collapse、border-spacing文本：text-indent、text-align、direction、word-wrap、text-jusitify字體：font、color、font-family、font-size、font-style、font-weight、lin

14、e-height、letter-spacing、word-spacing滾動(dòng)條:scrollbar-3dlight-color、scrollbar-shadow-color、scrollbar-base-color、scrollbar-face-color、scrollbar-track-color 以上包含css最常用到的屬性，特別是用顏色注明的一定要熟練掌握最常見(jiàn)的定寬居中顯示圖片在div中水平垂直居中3列排版 l

15、eft middel right,你知道嗎?,1、如何讓圖片居中顯示？2、如何讓文字顯示在圖片之上？3、如何給元素加上背景顏色，背景圖片？4、如何讓一個(gè)html元素顯示在固定的位置？,什么是盒子模型？,網(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以用日常生活中的常見(jiàn)事物——盒子作一個(gè)比喻來(lái)理解，所以叫它盒子模式。

16、CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。想象一個(gè)盒子，它有：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）四個(gè)屬性；讓我們俯視這個(gè)盒子，它有上下左右四條邊，所以每個(gè)屬性都包括四個(gè)部分：上下左右；這四部分可同時(shí)設(shè)置，也可分別設(shè)置；內(nèi)邊距可以理解為盒子里裝的東西和邊框的距離，而邊框有厚薄和顏色之分，內(nèi)容就是盒子中間裝的東西，外邊距就是邊框外

17、面自動(dòng)留出的一段空白。,為什么要學(xué)javascript？怎么學(xué),1、學(xué)習(xí)javascript之前得大概的知道他是什么？前面我們講他是2016年最火的網(wǎng)絡(luò)腳本語(yǔ)言。javascript是用來(lái)改進(jìn)設(shè)計(jì)、驗(yàn)證表單檢查瀏覽器、創(chuàng)建cookies，完成交互，以及更多的應(yīng)用，如：小程序。JavaScript 是一種輕量級(jí)的編程語(yǔ)言。JavaScript 是可插入 HTML 頁(yè)面的編程代碼。JavaScript 插入 HTML 頁(yè)面后，可由

18、所有的現(xiàn)代瀏覽器執(zhí)行。JavaScript 很容易學(xué)習(xí)。javascript我們通常簡(jiǎn)稱(chēng) js文件的格式如：my.js 回顧 html的格式： demo001.html css的格式: my.css2、學(xué)習(xí)javascript之前，首先對(duì)html和css有所了解，通過(guò)javascript我們可以對(duì)html進(jìn)行操作，能動(dòng)態(tài)的改變html的css，可以任意操作網(wǎng)頁(yè)的元素，用戶(hù)輸入的數(shù)據(jù)，通過(guò)js能發(fā)送到服務(wù)

19、器，服務(wù)器再返回?cái)?shù)據(jù)給js，js對(duì)數(shù)據(jù)進(jìn)行處理呈現(xiàn)給用戶(hù)。js起到承上啟下的效果。很重要，必選學(xué)。重點(diǎn)講解對(duì)象的使用(小程序提供的api的屬性和方法)網(wǎng)絡(luò)在線(xiàn)手冊(cè)：http://www.w3school.com.cn/js 打開(kāi)參考學(xué)習(xí),JavaScript基礎(chǔ)課程,1、變量 var a; var b,c,d; var d=0;2、數(shù)據(jù)類(lèi)型 字符串，數(shù)字，布爾，數(shù)組，對(duì)象，Null，Undefined3、對(duì)象 JavaS

20、cript 中的所有事物都是對(duì)象：字符串、數(shù)字、數(shù)組、日期，等等。對(duì)象有屬性和方法屬性是與對(duì)象相關(guān)的值。方法是能夠在對(duì)象上執(zhí)行的動(dòng)作。舉例：汽車(chē)就是現(xiàn)實(shí)生活中的對(duì)象。汽車(chē)的屬性：car.name=Fiatcar.model=500car.weight=850kgcar.color=white 汽車(chē)的方法：car.start()car.drive()car.brake()汽車(chē)的屬性包括名稱(chēng)、型號(hào)、重量、顏色等。

21、,所有汽車(chē)都有這些屬性，但是每款車(chē)的屬性都不盡相同。汽車(chē)的方法可以是啟動(dòng)、駕駛、剎車(chē)等。所有汽車(chē)都擁有這些方法，但是它們被執(zhí)行的時(shí)間都不盡相同。創(chuàng)建 JavaScript 對(duì)象JavaScript 中的幾乎所有都是對(duì)象：字符串、數(shù)字、數(shù)組、日期、函數(shù)，等等。你也可以創(chuàng)建自己的對(duì)象。本例創(chuàng)建名為 "person" 的對(duì)象，并為其添加了四個(gè)屬性：實(shí)例person=new Object();person.

22、firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";4、函數(shù)JavaScript 函數(shù)語(yǔ)法函數(shù)就是包裹在花括號(hào)中的代碼塊，前面使用了關(guān)鍵詞 function：function functionname() 普通的函數(shù){這里是要執(zhí)行的代碼}fun

23、ction myFunction(a) 帶一個(gè)參數(shù)的函數(shù){return a;}function myFunction(a,b,c) 帶多個(gè)參數(shù)和返回結(jié)果的函數(shù){return a*b+c;},5、運(yùn)算符運(yùn)算符 = 用于賦值。運(yùn)算符 + 用于加值。var y=5;var z=2;var x;x=y+z; 在以上語(yǔ)句執(zhí)行后，x 的值是 7。+ - * / % ++ -- 問(wèn)題： 8/

24、3= 8%3=,,嘗試查看和執(zhí)行對(duì)象的屬性和方法重點(diǎn)講解對(duì)象的使用(小程序提供的api的屬性和方法)為下節(jié)課做鋪墊,微信小程序框架簡(jiǎn)易教程,1、什么是框架？？？詳細(xì)介紹百度百科，引導(dǎo)學(xué)生方法他本是建筑學(xué)的概念框架（framework）是一個(gè)基本概念上的結(jié)構(gòu)，用于去解決或者處理復(fù)雜的問(wèn)題。這個(gè)廣泛的定義使用的十分流行，尤其在軟件概念?？蚣芤材苡糜跈C(jī)械結(jié)構(gòu)。2、為什么要用框架？？？因?yàn)檐浖到y(tǒng)發(fā)展到今天已經(jīng)很

25、復(fù)雜了，特別是服務(wù)器端軟件，涉及到的知識(shí)，內(nèi)容，問(wèn)題太多。在某些方面使用別人成熟的框架，就相當(dāng)于讓別人幫你完成一些基礎(chǔ)工作，你只需要集中精力完成系統(tǒng)的業(yè)務(wù)邏輯設(shè)計(jì)。而且框架一般是成熟，穩(wěn)健的，他可以處理系統(tǒng)很多細(xì)節(jié)問(wèn)題，比如，事物處理，安全性，數(shù)據(jù)流控制等問(wèn)題。還有框架一般都經(jīng)過(guò)很多人使用，所以結(jié)構(gòu)很好，所以擴(kuò)展性也很好，而且它是不斷升級(jí)的，你可以直接享受別人升級(jí)代碼帶來(lái)的好處。軟件為什么要分層？ 為了實(shí)現(xiàn)“高內(nèi)聚、低耦合”。把問(wèn)題

26、劃分開(kāi)來(lái)各個(gè)解決，易于控制，易于延展，易于分配資源…總之好處很多啦?。?。感謝外星人提供錄頻軟件哦，么么噠~~~,用一張圖講解微信小程序框架構(gòu)成 結(jié)合微信官網(wǎng)、腦圖、打開(kāi)開(kāi)發(fā)工具演示。加深印象。地址https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/,框架的介紹結(jié)束，再介紹工具的各個(gè)功能區(qū)域下節(jié)課：小程序的組件介紹謝謝觀(guān)看?。?！,微信小程序視圖層簡(jiǎn)易教程,視圖

27、層分3塊內(nèi)容https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/1、wxml2、wxss3、組件框架的視圖層由 WXML 與 WXSS 編寫(xiě)，由組件來(lái)進(jìn)行展示。將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。WXML(WeiXin Markup language)用于描述頁(yè)面的結(jié)構(gòu)。類(lèi)似前面我們學(xué)到的HTMLWXSS(WeiXin

28、Style Sheet)用于描述頁(yè)面的樣式。類(lèi)似CSS,語(yǔ)法大同小異組件(Component)是視圖的基本組成單元。框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。,WXMLWXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。用以下一些簡(jiǎn)單的例子來(lái)看看 WXML 具有什么能力：,,,,,,,,,,,,,,,,基礎(chǔ)組件

29、框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。什么是組件： 組件是視圖層的基本組成單元。 組件自帶一些功能與微信風(fēng)格的樣式。 一個(gè)組件通常包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。 Content goes here ... 注意：所有組件與屬性都是小寫(xiě)，以連字符-連接 如：action-sheet打

30、開(kāi)https://mp.weixin.qq.com/debug/wxadoc/dev/component/結(jié)合html的知識(shí)，分別講解組件的作用通過(guò)工具演示的方式感謝大家觀(guān)看，謝謝?。。?微信小程序邏輯層基礎(chǔ)教程,邏輯層(App Service)小程序開(kāi)發(fā)框架的邏輯層是由JavaScript編寫(xiě)。邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。 在 JavaScript 的基礎(chǔ)上，微信團(tuán)隊(duì)做了一些修改，以方

31、便地開(kāi)發(fā)小程序。增加 App 和 Page 方法，進(jìn)行程序和頁(yè)面的注冊(cè)。提供豐富的 API，如掃一掃，支付等微信特有能力。每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化能力。由于框架并非運(yùn)行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無(wú)法使用，如 document，window 等。開(kāi)發(fā)者寫(xiě)的所有代碼最終將會(huì)打包成一份 JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷(xiāo)毀。類(lèi)似 ServiceWorker

32、，所以邏輯層也稱(chēng)之為 App Service。官方文檔https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/結(jié)合小程序框架圖片講解,邏輯層主要分4塊1、注冊(cè)程序App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。2、注冊(cè)頁(yè)面Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的

33、初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。3、模塊化在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數(shù)，不會(huì)互相影響。通過(guò)全局函數(shù) getApp() 可以獲取全局的應(yīng)用實(shí)例，如果需要全局的數(shù)據(jù)可以在 App() 中設(shè)置4、API（核心）小程序開(kāi)發(fā)框架提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶(hù)信息，本地存儲(chǔ)，支付功能等。重點(diǎn)講解頁(yè)面的生命周期

34、分別介紹每個(gè)api的功能,,,微信小程序?qū)崙?zhàn)篇,案例介紹：1、案例名稱(chēng)：微信淘寶2、采用的技術(shù)：wxml + wxss + javascript + php3、案例功能：主功能分4個(gè)區(qū)域3.1 首頁(yè)3.2 搜索3.3 設(shè)置3.4 我首頁(yè)頁(yè)，默認(rèn)展示商品列表，點(diǎn)擊導(dǎo)航的任一組件可以展示該關(guān)鍵字的商品列表，底部有上一頁(yè)下一頁(yè)分頁(yè)功能，導(dǎo)航的關(guān)鍵字學(xué)者可以自己定義，點(diǎn)擊任一列表進(jìn)入商品詳細(xì)頁(yè)，詳細(xì)頁(yè)有3個(gè)按鈕，對(duì)

35、應(yīng)了3個(gè)功能。搜索頁(yè)，通過(guò)輸入關(guān)鍵字，點(diǎn)擊搜索按鈕，展示結(jié)果列表設(shè)置頁(yè)，通過(guò)設(shè)置淘寶用戶(hù)名稱(chēng)，使分享的鏈接變成設(shè)定用戶(hù)的淘金鏈我頁(yè)，數(shù)據(jù)的展示功能本案例涉及的知識(shí)點(diǎn)比較多，學(xué)生們可以通過(guò)學(xué)習(xí)修改該案例提升自己的技能。本案例擴(kuò)展性強(qiáng)，每條代碼后面都有注釋代碼，讓初學(xué)者一目了然，讓大家明白小程序功能的制作流程和如何調(diào)試代碼。,案例截圖：,總結(jié),掌握學(xué)習(xí)技巧，確定學(xué)習(xí)的方向，多看視頻，書(shū)籍，多動(dòng)手嘗試敲代碼，多修改別人的代碼