微信小程序-入門(mén)PPT課件.ppt

1、微信小程序入門(mén),主講：劉志敏 博客： 微信視頻： QQ群：785071190,1,CONTENTS,課程內(nèi)容,2,認(rèn)識(shí)小程序,3,1,小程序開(kāi)發(fā)工具的下載與安裝,下載地址：,4,2,小程序代碼構(gòu)成,5,app.json,官網(wǎng)地址：,6,3,頁(yè)面生命周期,7,8,4,頁(yè)面棧,9,4,小程序生命周期與運(yùn)行機(jī)制,小程序需必須在app.js中使用App()函數(shù)進(jìn)行小程序的注冊(cè)，并且不能注冊(cè)多個(gè)。小程序第一打開(kāi)時(shí)將會(huì)下載整個(gè)小程序代碼包，緊接著通過(guò)app.json配置初始化App，頁(yè)面線(xiàn)程開(kāi)始渲染首頁(yè)，初始化完成后應(yīng)用服務(wù)線(xiàn)程執(zhí)行App中onLauch()函數(shù)和onShow()函數(shù)，然后才執(zhí)行頁(yè)面中的o

2、nLoad()函數(shù)和onShow()函數(shù)，每次進(jìn)入后臺(tái)（當(dāng)用戶(hù)點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開(kāi)微信）都會(huì)先執(zhí)行頁(yè)面中的onHide()函數(shù)再執(zhí)行app.js中的onHide()函數(shù)，每次進(jìn)入前臺(tái)都會(huì)先執(zhí)行app.js中onShow()函數(shù)再執(zhí)行頁(yè)面中的onShow()函數(shù)。,10,11,運(yùn)行機(jī)制 小程序啟動(dòng)會(huì)有兩種情況，一種是冷啟動(dòng)，一種是熱啟動(dòng)。 假如用戶(hù)已經(jīng)打開(kāi)過(guò)某小程序，然后在一定時(shí)間內(nèi)再次打開(kāi)該小程序，此時(shí)無(wú)需重新啟動(dòng)，只需將后臺(tái)態(tài)的小程序切換到前臺(tái)，這個(gè)過(guò)程就是熱啟動(dòng)；冷啟動(dòng)指的是用戶(hù)首次打開(kāi)或小程序被微信主動(dòng)銷(xiāo)毀后再次打開(kāi)的情況，此時(shí)小程序需要重新加載啟動(dòng)。,更新機(jī)制

3、 小程序冷啟動(dòng)時(shí)如果發(fā)現(xiàn)有新版本，將會(huì)異步下載新版本的代碼包，并同時(shí)用客戶(hù)端本地的包進(jìn)行啟動(dòng)，即新版本的小程序需要等下一次冷啟動(dòng)才會(huì)應(yīng)用上。 如果需要馬上應(yīng)用最新版本，可以使用wx.getUpdateManagerAPI 進(jìn)行處理,運(yùn)行機(jī)制 小程序沒(méi)有重啟的概念 當(dāng)小程序進(jìn)入后臺(tái)，客戶(hù)端會(huì)維持一段時(shí)間的運(yùn)行狀態(tài)，超過(guò)一定時(shí)間后（目前是5分鐘）會(huì)被微信主動(dòng)銷(xiāo)毀 當(dāng)短時(shí)間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警，會(huì)進(jìn)行小程序的銷(xiāo)毀,12,5,頁(yè)面跳轉(zhuǎn),navigator標(biāo)簽跳轉(zhuǎn),跳轉(zhuǎn)到新頁(yè)面 在當(dāng)前頁(yè)打開(kāi) 打開(kāi)綁定的小程序,13,通過(guò)路由函數(shù)進(jìn)行跳轉(zhuǎn),14,6,頁(yè)面參數(shù)傳遞,15,6,頁(yè)面返回值

4、,/獲取頁(yè)面棧 var pages = getCurrentPages(); if(pages.length 1) /上一個(gè)頁(yè)面實(shí)例對(duì)象 var prePage = pagespages.length - 2; /關(guān)鍵在這里 prePage.changeData(hello); ,0,1,2,3,16,7,View,實(shí)現(xiàn)點(diǎn)擊效果,按鈕,.hover background-color: #aaa; ,WXML,WXSS,hover-class指定按下去的樣式類(lèi)。 當(dāng) hover-class=none 時(shí)，沒(méi)有點(diǎn)擊態(tài)效果,17,8,scroll-view, ,18, ,19,9,swiper, ,

5、20,9,movable-area, ,21,9,cover-view, 地圖 ,22,9,icon,23,9,text, 你好 啊 哈哈哈（空格是中文字符一半大?。?你好 啊 哈哈哈（空格是中文字符大小） 你好 啊 哈哈哈（空格根據(jù)字體設(shè)置） ,t 空格（ 多個(gè)只會(huì)顯示一個(gè)空格） n 換行,你好！t七月流火啊！n我在下一行,space 有效值：,24, 你好哈哈哈（空格根據(jù)字體設(shè)置） ,decode是否解碼,25,WXSS,26,1,尺寸單位,rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共

6、有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。,27,2,樣式導(dǎo)入,使用import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。,28,3,內(nèi)聯(lián)樣式,框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式。 style：靜態(tài)的樣式統(tǒng)一寫(xiě)到 class 中。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫(xiě)進(jìn) style 中，以免影響渲染速度。 class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類(lèi)選擇器名(樣式類(lèi)名)的集合，樣式類(lèi)名不需要帶上.，樣式類(lèi)

7、名之間用空格分隔。 ,29,樣式內(nèi)容,顯示 定位 背景 邊框 文本屬性 font margin padding,30,4,wxss display(顯示display),屬性說(shuō)明 flex多欄多列布局flex-direction:row/column inline-block行內(nèi)塊元素 inline此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符 inline-table作為內(nèi)聯(lián)表格來(lái)顯示（類(lèi)似 ），表格前后沒(méi)有換行符 inline-flex將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示 none此元素不會(huì)被顯示 block此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符 list-item此元素會(huì)作為列表顯示

8、table會(huì)作為塊級(jí)表格來(lái)顯示（類(lèi)似 ），表格前后帶有換行符 table-caption作為一個(gè)表格標(biāo)題顯示（類(lèi)似 ） table-cell作為一個(gè)表格單元格顯示（類(lèi)似 和 ） table-column作為一個(gè)單元格列顯示（類(lèi)似 ） table-column-group作為一個(gè)或多個(gè)列的分組來(lái)顯示（類(lèi)似 ） table-row作為一個(gè)表格行顯示（類(lèi)似 ） table-row-group作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 ） table-header-group作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 ） table-footer-group作為一個(gè)或多個(gè)行的分組來(lái)顯示（類(lèi)似 ） inherit從父元

9、素繼承 display 屬性的值,31,5,wxss position(定位),屬性說(shuō)明 absolute生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定。 relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。 因此，left:20 會(huì)向元素的 LEFT 位置添加 20 像素。 fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定。 static默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 t

10、op, bottom, left, right 或者 z-index 聲明） inherit規(guī)定應(yīng)該從父元素繼承 position 屬性的值,32,6,wxss background(背景),background簡(jiǎn)寫(xiě)屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中 background: color position size repeat origin clip attachment image; background-color指定要使用的背景顏色 background-position指定背景圖像的位置 background-position:center background-size 指定背景

11、圖片的大小 background-size:80px 60px;寬度 高度 background-repeat指定如何重復(fù)背景圖像 repeat,repeat-x,repeat-y,no-repeat,inherit background-origin指定背景圖像的定位區(qū)域 padding-box 背景圖像填充框的相對(duì)位置,33,border-box背景圖像邊界框的相對(duì)位置 content-box背景圖像的相對(duì)位置的內(nèi)容框 background-clip指定背景圖像的繪畫(huà)區(qū)域 屬性值，同上 background-attachment設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。 scroll

12、 背景圖片隨頁(yè)面的其余部分滾動(dòng)。這是默認(rèn) fixed 背景圖像是固定的 inherit 指定background-attachment的設(shè)置應(yīng)該從父元素繼承 local 背景圖片隨滾動(dòng)元素滾動(dòng) background-image指定要使用的一個(gè)或多個(gè)背景圖像url(URL) 圖像的URL none無(wú)圖像背景會(huì)顯示。這是默認(rèn) inherit 指定背景圖像應(yīng)該從父元素繼承,34,7,wxss border(邊框),屬性說(shuō)明 border簡(jiǎn)寫(xiě)屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明 border:5px solid red; border-width用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框

13、設(shè)置寬度 border-top-width 上右下左邊框厚度 屬性值：thin medium thick length border-style設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。 border-top-width 上右下左邊框樣式 屬性值：solid,dashed,dotted,double等 border-color元素的所有邊框中可見(jiàn)部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色 border-top-width 上右下左邊框顏色,35,7,wxss 文本屬性（text）,36,37,8,wxss 字體屬性（font）,38,9,wxss margin(外邊距)（margin）

14、,39,10,wxss padding(填充)（padding）,40,CONTENTS,01,計(jì)算器(布局),02,計(jì)算器(字體和背景),03,計(jì)算器(邏輯實(shí)現(xiàn)),41,邏輯實(shí)現(xiàn),輸入數(shù)字,輸入運(yùn)算符號(hào),輸入正負(fù)符號(hào),輸入其他,42,邏輯實(shí)現(xiàn),輸入數(shù)字,是否編輯模式,輸入運(yùn)算符號(hào),是否編輯模式,是否為進(jìn)行過(guò)計(jì)算,當(dāng)前值是否是0,算式顯示,臨時(shí)結(jié)果計(jì)算,43,01,布局,02,定位,03,定時(shí)器,44,01,外部點(diǎn)實(shí)現(xiàn),02,內(nèi)部圖片布局,03,抽獎(jiǎng)邏輯實(shí)現(xiàn),45,外部點(diǎn)實(shí)現(xiàn), ,.container-out height: 600rpx; width: 650rpx; background-

15、color: #b136b9; margin: 100rpx auto; border-radius: 40rpx; box-shadow: 0 10px 0 #871a8e; position: relative; ,.circle position: absolute; display: block; border-radius: 50%; height: 20rpx; width: 20rpx; ,46,/圓點(diǎn)閃爍 setInterval(function () if (_this.data.colorCircleFirst = #FFDF2F) _this.setData( color

16、CircleFirst: #FE4D32, colorCircleSecond: #FFDF2F, ) else _this.setData( colorCircleFirst: #FFDF2F, colorCircleSecond: #FE4D32, ) , 500),/圓點(diǎn)設(shè)置 var leftCircle = 7.5; var topCircle = 7.5; var circleList = ; for (var i = 0; i 24; i+) if (i = 0) topCircle = 15; leftCircle = 15; else if (i 6) topCircle =

17、7.5; leftCircle = leftCircle + 102.5; else if (i = 6) topCircle = 15 leftCircle = 620; else if (i 12) topCircle = topCircle + 94; leftCircle = 620; else if (i = 12) topCircle = 565; leftCircle = 620; else if (i 18) topCircle = 570; leftCircle = leftCircle - 102.5; else if (i = 18) topCircle = 565; l

18、eftCircle = 15; else if (i 24) topCircle = topCircle - 94; leftCircle = 7.5; else return circleList.push( topCircle: topCircle, leftCircle: leftCircle ); ,47,外部點(diǎn)實(shí)現(xiàn), START ,48,.container-in width: 580rpx; height: 530rpx; background-color: #871a8e; border-radius: 40rpx; position: absolute; left: 0; right: 0;