微信小程序培訓課完整版_圖文

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

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

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

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

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

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

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

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

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

10、定義多個元素多組聲明的寫法，英文狀態(tài)下的逗號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、導入樣式（不常用）@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補白：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滾動條:scrollbar-3dlight-color、scrollbar-shadow-color、scrollbar-base-color、scrollbar-face-color、scrollbar-track-color 以上包含css最常用到的屬性，特別是用顏色注明的一定要熟練掌握最常見的定寬居中顯示圖片在div中水平垂直居中3列排版 l

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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