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

1、微信小程序開發(fā)工具微信小程序開發(fā)工具1、翻開閱讀器輸入翻開頁(yè)面2、查看系統(tǒng)信息3、選擇下載對(duì)應(yīng)的工具4、安裝工具5、翻開工具需要微信掃描登錄6、嘗試運(yùn)行微信小程序?qū)W完你能做什么？怎么做？學(xué)完你能做什么？怎么做？1、你可以獨(dú)立的編寫自己的網(wǎng)頁(yè)，如個(gè)人簡(jiǎn)歷。2、微信運(yùn)營(yíng)人員完全可以拋開網(wǎng)絡(luò)上的微信編輯器，自己想做啥樣就啥樣，完全自己做主。3、你可以勝任初級(jí)web前端的崗位要求。4、你可以做自己想要的微信功能基于你強(qiáng)大的javascript編程才能5、除了以上，你可以開發(fā)網(wǎng)絡(luò)上任何一家提供api的接口，實(shí)現(xiàn)自己想要的應(yīng)用程序。如淘寶客，地圖導(dǎo)航，天氣預(yù)報(bào)等等。案例： 電腦翻開和手機(jī)閱讀器翻開是不同的

2、風(fēng)格,該案例用html + css + javascript + php + 淘寶客api開發(fā)怎么做？通過(guò)教學(xué)，學(xué)會(huì)根底的知識(shí)，親自動(dòng)手，不懂先百度，再不懂問網(wǎng)友。周而復(fù)始，鍛煉自己的一套學(xué)習(xí)方法和學(xué)習(xí)技巧。就像你一開場(chǎng)玩lol一樣，拿出那樣的游戲精神，大不了坑了隊(duì)友唄，坑一次兩次就夠了，關(guān)鍵要學(xué)會(huì)考慮，能做什么？先做什么？再做什么？不用一年，你一定會(huì)成為高手。網(wǎng)絡(luò)視頻的合理利用優(yōu)酷視頻：電腦翻開優(yōu)酷視頻，搜索關(guān)鍵字“html根底教程選擇合適自己的視頻觀看。學(xué)習(xí)小程序所需的技能學(xué)習(xí)小程序所需的技能1、軟件的使用代碼的輔助工具閱讀器：閱讀器很多，有谷歌閱讀器，火狐閱讀器，ie閱讀器，qq閱讀器等

3、，這里我們統(tǒng)一使用火狐閱讀器調(diào)試。沒有火狐沒關(guān)系，只要你有閱讀器就行。只不過(guò)火狐好一點(diǎn)，不影響開發(fā)編輯器：編輯器也有很多，有自帶的文編編輯器，dreamweaver，eclipse，android studio都行，這里我們統(tǒng)一使用Dreamweaver編寫代碼。沒有dreamweaver也沒關(guān)系，只要你的系統(tǒng)是windows，有記事本就ok不要糾結(jié)細(xì)節(jié)。掌握方法才是學(xué)習(xí)的目的2、HTML：超文本標(biāo)記語(yǔ)言與閱讀器溝通的一種方式，最根底3、CSS：層疊款式表就想人的衣服一樣，裝飾的，但很重要！4、JavaScript：2016最火的網(wǎng)絡(luò)腳本語(yǔ)言，往后幾年會(huì)一直火下去必須會(huì)！。在這里要感謝微信大神

4、：張小龍。html根底課程根底課程HTML：超文本標(biāo)記語(yǔ)言標(biāo)簽：閉合標(biāo)簽、自閉標(biāo)簽HTML很重要，重要，一定要學(xué)好。HTML標(biāo)簽的純熟使用如：等等。演示常用的標(biāo)簽，并在閱讀器翻開，查看效果html代碼分：塊級(jí)元素/行內(nèi)元素html為什么要學(xué)習(xí)為什么要學(xué)習(xí)css？怎么學(xué)？怎么學(xué)？在學(xué)習(xí)之前我們要明白學(xué)習(xí)在學(xué)習(xí)之前我們要明白學(xué)習(xí)css是為了什么？是為了什么？1、前面我們提到、前面我們提到css是一種是一種“裝飾語(yǔ)言。是人的衣服，是多彩的，是多樣化的，是靈裝飾語(yǔ)言。是人的衣服，是多彩的，是多樣化的，是靈敏的。敏的。2、學(xué)習(xí)、學(xué)習(xí)css我們可以把網(wǎng)頁(yè)或者小程序產(chǎn)品打扮漂亮，為了讓用戶看起來(lái)舒適，用我們

5、可以把網(wǎng)頁(yè)或者小程序產(chǎn)品打扮漂亮，為了讓用戶看起來(lái)舒適，用起來(lái)爽，專業(yè)點(diǎn)就叫用戶體驗(yàn)佳，起來(lái)爽，專業(yè)點(diǎn)就叫用戶體驗(yàn)佳，css就起到關(guān)鍵的作用。就起到關(guān)鍵的作用。怎么學(xué)？怎么學(xué)？1、學(xué)習(xí)、學(xué)習(xí)css之前之前html要純熟，沒有墻面要純熟，沒有墻面html的話，我們給墻面怎么刷漆的話，我們給墻面怎么刷漆css裝裝飾？對(duì)不對(duì)？飾？對(duì)不對(duì)？2、看視頻教程，看書籍，寫代碼，調(diào)試代碼，多考慮。、看視頻教程，看書籍，寫代碼，調(diào)試代碼，多考慮。3、堅(jiān)持下去，選擇他就要把他學(xué)好，不忘初心。、堅(jiān)持下去，選擇他就要把他學(xué)好，不忘初心。css根底課程根底課程css中文名稱：層疊款式表中文名稱：層疊款式表css語(yǔ)法：由

6、兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明語(yǔ)法：由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明選擇器：通常是指需要改變款式的選擇器：通常是指需要改變款式的html元素元素每條聲明：由一個(gè)屬性和一個(gè)值組成如每條聲明：由一個(gè)屬性和一個(gè)值組成如pcolor:red;p就是一個(gè)就是一個(gè)html元素標(biāo)簽一個(gè)屬性是元素標(biāo)簽一個(gè)屬性是color顏色，一個(gè)值是顏色，一個(gè)值是red，中間用英文冒，中間用英文冒號(hào)隔開號(hào)隔開 : 在值的后面用英文的在值的后面用英文的 分號(hào)完畢分號(hào)完畢 ;一條聲明：例如一條聲明：例如pcolor:red; p color : red ; 也可以也可以多條聲明：例如多條聲明：例如

7、pcolor:red; text-align:center;多條聲明用多條聲明用;隔開隔開,可以寫在一行可以寫在一行;注意：英文狀態(tài)下的注意：英文狀態(tài)下的分號(hào)分號(hào)pcolor:red; text-align:center;text-indent:24px;也可以這樣編寫，但是一定要注意結(jié)尾有英文的分號(hào).初學(xué)者建議采用上面的方式編寫css;css高級(jí)語(yǔ)法同時(shí)定義多個(gè)元素多組聲明的寫法，英文狀態(tài)下的逗號(hào)p,h1,h2,div,tablecolor:red;font-size:16px;4種css的加載方式1、行內(nèi)方式一段文本這里我們定義了段落的字體為紅色，字體大小為14像素，行高為30px2、內(nèi)嵌

8、方式pcolor:red; font-size:12px;text-indent:24px;3、連接方式最常用4、導(dǎo)入款式不常用import url(my.css)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列表：列表：list-style、list-s

9、tyle-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、line-height、letter-spacing、word-spacing滾動(dòng)條滾動(dòng)條:scrollbar-3dlight-color、scrollbar-shadow-color、s

10、crollbar-base-color、scrollbar-face-color、scrollbar-track-color以上包含以上包含css最常用到的屬性，特最常用到的屬性，特別是用顏色注明的一定要純熟掌握別是用顏色注明的一定要純熟掌握最常見的定寬居中顯示最常見的定寬居中顯示圖片在圖片在div中程度垂直居中中程度垂直居中3列排版列排版 left middel right你知道嗎你知道嗎?1、如何讓圖片居中顯示？2、如何讓文字顯示在圖片之上？3、如何給元素加上背景顏色，背景圖片？4、如何讓一個(gè)html元素顯示在固定的位置？什么是盒子模型？什么是盒子模型？網(wǎng)頁(yè)設(shè)計(jì)中常聽的屬性名：內(nèi)容網(wǎng)頁(yè)設(shè)計(jì)

11、中常聽的屬性名：內(nèi)容(content)、填充、填充(padding)、邊框、邊框(border)、邊界、邊界(margin)， CSS盒子形式都具備這些屬性。盒子形式都具備這些屬性。這些屬性我們可以用日常生活中的常見事物這些屬性我們可以用日常生活中的常見事物盒子作一個(gè)比喻來(lái)理解，所以叫它盒子盒子作一個(gè)比喻來(lái)理解，所以叫它盒子形式。形式。CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。技術(shù)所使用的一種思維模型。想象一個(gè)盒子，它有：外邊距想象一個(gè)盒子，它有：外邊距margin、邊框、邊框border、內(nèi)邊距、內(nèi)邊距padding、內(nèi)容內(nèi)容c

12、ontent四個(gè)屬性；四個(gè)屬性；讓我們俯視這個(gè)盒子，它有上下左右四條邊，所以每個(gè)屬性都包括四個(gè)部分：上下左右；讓我們俯視這個(gè)盒子，它有上下左右四條邊，所以每個(gè)屬性都包括四個(gè)部分：上下左右；這四部分可同時(shí)設(shè)置，也可分別設(shè)置；內(nèi)邊距可以理解為盒子里裝的東西和邊框的間這四部分可同時(shí)設(shè)置，也可分別設(shè)置；內(nèi)邊距可以理解為盒子里裝的東西和邊框的間隔隔 ，而邊框有厚薄和顏色之分，內(nèi)容就是盒子中間裝的東西，外邊距就是邊框外面自，而邊框有厚薄和顏色之分，內(nèi)容就是盒子中間裝的東西，外邊距就是邊框外面自動(dòng)留出的一段空白。動(dòng)留出的一段空白。為什么要學(xué)為什么要學(xué)javascript？怎么學(xué)？怎么學(xué)1、學(xué)習(xí)javascr

13、ipt之前得大概的知道他是什么？前面我們講他是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è)面后，可由所有的現(xiàn)代閱讀器執(zhí)行。JavaScript 很容易學(xué)習(xí)。javascript我們通常簡(jiǎn)稱 js文件的格式如：my.js 回憶 html的格式： demo001.html css的格式: my.css2、學(xué)習(xí)javascript之前，首先對(duì)html和css有

14、所理解，通過(guò)javascript我們可以對(duì)html進(jìn)展操作，能動(dòng)態(tài)的改變html的css，可以任意操作網(wǎng)頁(yè)的元素，用戶輸入的數(shù)據(jù)，通過(guò)js能發(fā)送到效勞器，效勞器再返回?cái)?shù)據(jù)給js，js對(duì)數(shù)據(jù)進(jìn)展處理呈現(xiàn)給用戶。js起到承上啟下的效果。很重要，必選學(xué)。重點(diǎn)講解對(duì)象的使用(小程序提供的api的屬性和方法)JavaScript根底課程根底課程1、變量 var a; var b,c,d; var d=0;2、數(shù)據(jù)類型 字符串，數(shù)字，布爾，數(shù)組，對(duì)象，Null，Undefined3、對(duì)象 JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)字、數(shù)組、日期，等等。對(duì)象有屬性和方法屬性是與對(duì)象相關(guān)的值。方法

15、是可以在對(duì)象上執(zhí)行的動(dòng)作。舉例：汽車就是現(xiàn)實(shí)生活中的對(duì)象。汽車的屬性：=Fiatcar.model=500car.weight=850kgcar.color=white 汽車的方法：car.start()car.drive()car.brake()汽車的屬性包括名稱、型號(hào)、重量、顏色等。所有汽車都有這些屬性，但是每款車的屬性都不盡一樣。汽車的方法可以是啟動(dòng)、駕駛、剎車等。所有汽車都擁有這些方法，但是它們被執(zhí)行的時(shí)間都不盡一樣。創(chuàng)立 JavaScript 對(duì)象JavaScript 中的幾乎所有都是對(duì)象：字符串、數(shù)字、數(shù)組、日期、函數(shù)，等等。你也可以創(chuàng)立自己的對(duì)象。本例創(chuàng)立名為 p

16、erson 的對(duì)象，并為其添加了四個(gè)屬性：實(shí)例person=new Object();person.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í)行的代碼function myFunction(a) 帶一個(gè)參數(shù)的函數(shù)return a;function myFunction(a,b,c) 帶多個(gè)參數(shù)和返回結(jié)果的函數(shù)return

17、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。+ - * / % + - 問題： 8/3= 8%3=嘗試查看和執(zhí)行對(duì)象的屬性和方法重點(diǎn)講解對(duì)象的使用重點(diǎn)講解對(duì)象的使用(小程序提供的小程序提供的api的屬性和方法的屬性和方法)為下節(jié)課做鋪墊微信小程序框架簡(jiǎn)易教程微信小程序框架簡(jiǎn)易教程1、什么是框架？詳細(xì)介紹百度百科，引導(dǎo)學(xué)生方法他本是建筑學(xué)的概念框架framework是一個(gè)根本概念上的構(gòu)造，用于去解決或者處理復(fù)雜的問題。這個(gè)廣泛的定義使用的非常流行，尤其在軟件概念。框架也能用于機(jī)械構(gòu)造

18、。2、為什么要用框架？因?yàn)檐浖到y(tǒng)開展到今天已經(jīng)很復(fù)雜了，特別是效勞器端軟件，涉及到的知識(shí)，內(nèi)容，問題太多。在某些方面使用別人成熟的框架，就相當(dāng)于讓別人幫你完成一些根底工作，你只需要集中精力完成系統(tǒng)的業(yè)務(wù)邏輯設(shè)計(jì)。而且框架一般是成熟，穩(wěn)健的，他可以處理系統(tǒng)很多細(xì)節(jié)問題，比方，事物處理，平安性，數(shù)據(jù)流控制等問題。還有框架一般都經(jīng)過(guò)很多人使用，所以構(gòu)造很好，所以擴(kuò)展性也很好，而且它是不斷晉級(jí)的，你可以直接享受別人晉級(jí)代碼帶來(lái)的好處。軟件為什么要分層？ 為了實(shí)現(xiàn)“高內(nèi)聚、低耦合。把問題劃分開來(lái)各個(gè)解決，易于控制，易于延展，易于分配資源總之好處很多啦！。感謝外星人提供錄頻軟件哦，么么噠用一張圖講解微信

19、小程序框架構(gòu)成 結(jié)合微信官網(wǎng)、腦圖、翻開開發(fā)工具演示。加深印象?？蚣艿慕榻B完畢，再介紹工具的各個(gè)功能區(qū)域下節(jié)課：小程序的組件介紹謝謝觀看！微信小程序視圖層簡(jiǎn)易教程微信小程序視圖層簡(jiǎn)易教程視圖層分3塊內(nèi)容1、wxml2、wxss3、組件框架的視圖層由 WXML 與 WXSS 編寫，由組件來(lái)進(jìn)展展示。將邏輯層的數(shù)據(jù)反響成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。WXML(WeiXin Markup language)用于描繪頁(yè)面的構(gòu)造。類似前面我們學(xué)到的HTMLWXSS(WeiXin Style Sheet)用于描繪頁(yè)面的款式。類似CSS,語(yǔ)法大同小異組件(Component)是視圖的根本組成單元。框

20、架為開發(fā)者提供了一系列根底組件，開發(fā)者可以通過(guò)組合這些根底組件進(jìn)展快速開發(fā)。WXMLWXMLWeiXin Markup Language是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合根底組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的構(gòu)造。用以下一些簡(jiǎn)單的例子來(lái)看看 WXML 具有什么才能： 根底組件根底組件框架為開發(fā)者提供了一系列根底組件，開發(fā)框架為開發(fā)者提供了一系列根底組件，開發(fā)者可以通過(guò)組合這些根底組件進(jìn)展快速開發(fā)。者可以通過(guò)組合這些根底組件進(jìn)展快速開發(fā)。什么是組件：什么是組件： 組件是視圖層的根本組成單元。組件是視圖層的根本組成單元。 組件自帶一些功能與微信風(fēng)格的款式。組件自帶一些功能與微信風(fēng)格的款式。 一個(gè)組件通常

21、包括開場(chǎng)標(biāo)簽和完畢標(biāo)簽，一個(gè)組件通常包括開場(chǎng)標(biāo)簽和完畢標(biāo)簽，屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。內(nèi)。 Content goes here . 注意：所有組件與屬性都是小寫，以連字注意：所有組件與屬性都是小寫，以連字符符-連接連接 如：如：action-sheet翻開翻開結(jié)合結(jié)合html的知識(shí)，分別講解組件的作用的知識(shí)，分別講解組件的作用通過(guò)工具演示的方式通過(guò)工具演示的方式感謝大家觀看，謝感謝大家觀看，謝謝！謝！微信小程序邏輯層根底教程微信小程序邏輯層根底教程邏輯層(App Service)小程序開發(fā)框架的邏輯層是由JavaScript編寫。邏輯層將數(shù)據(jù)進(jìn)展處理后發(fā)送給視圖層，同時(shí)承受視圖層的事件反響。 在 JavaScript 的根底上，微信團(tuán)隊(duì)做了一些修改，以方便地開發(fā)小程序。增加 App 和 Page 方法，進(jìn)展程序和頁(yè)面的注冊(cè)。提供豐富的 API，如掃一掃，支付等微信特有才能。每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化才能。由于框架并非運(yùn)行在閱讀器中，所以 JavaScript 在 web 中一些才能都無(wú)法使用，如 document，window 等。開發(fā)者寫的所有代碼最終將會(huì)打包成一份 JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷毀。類似 ServiceWorker，所