微信小程序-入門PPT課件.ppt

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

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

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

4、,/獲取頁面棧 var pages = getCurrentPages(); if(pages.length 1) /上一個頁面實例對象 var prePage = pagespages.length - 2; /關(guān)鍵在這里 prePage.changeData(hello); ,0,1,2,3,16,7,View,實現(xiàn)點擊效果,按鈕,.hover background-color: #aaa; ,WXML,WXSS,hover-class指定按下去的樣式類。 當 hover-class=none 時，沒有點擊態(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 空格（ 多個只會顯示一個空格） n 換行,你好！t七月流火??！n我在下一行,space 有效值：,24, 你好哈哈哈（空格根據(jù)字體設(shè)置） ,decode是否解碼,25,WXSS,26,1,尺寸單位,rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共

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

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

8、table會作為塊級表格來顯示（類似 ），表格前后帶有換行符 table-caption作為一個表格標題顯示（類似 ） table-cell作為一個表格單元格顯示（類似 和 ） table-column作為一個單元格列顯示（類似 ） table-column-group作為一個或多個列的分組來顯示（類似 ） table-row作為一個表格行顯示（類似 ） table-row-group作為一個或多個行的分組來顯示（類似 ） table-header-group作為一個或多個行的分組來顯示（類似 ） table-footer-group作為一個或多個行的分組來顯示（類似 ） inherit從父元

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

10、op, bottom, left, right 或者 z-index 聲明） inherit規(guī)定應(yīng)該從父元素繼承 position 屬性的值,32,6,wxss background(背景),background簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中 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 背景圖像填充框的相對位置,33,border-box背景圖像邊界框的相對位置 content-box背景圖像的相對位置的內(nèi)容框 background-clip指定背景圖像的繪畫區(qū)域 屬性值，同上 background-attachment設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。 scroll

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

13、設(shè)置寬度 border-top-width 上右下左邊框厚度 屬性值：thin medium thick length border-style設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。 border-top-width 上右下左邊框樣式 屬性值：solid,dashed,dotted,double等 border-color元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(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,計算器(布局),02,計算器(字體和背景),03,計算器(邏輯實現(xiàn)),41,邏輯實現(xiàn),輸入數(shù)字,輸入運算符號,輸入正負符號,輸入其他,42,邏輯實現(xiàn),輸入數(shù)字,是否編輯模式,輸入運算符號,是否編輯模式,是否為進行過計算,當前值是否是0,算式顯示,臨時結(jié)果計算,43,01,布局,02,定位,03,定時器,44,01,外部點實現(xiàn),02,內(nèi)部圖片布局,03,抽獎邏輯實現(xiàn),45,外部點實現(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,/圓點閃爍 setInterval(function () if (_this.data.colorCircleFirst = #FFDF2F) _this.setData( color

16、CircleFirst: #FE4D32, colorCircleSecond: #FFDF2F, ) else _this.setData( colorCircleFirst: #FFDF2F, colorCircleSecond: #FE4D32, ) , 500),/圓點設(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,外部點實現(xiàn), START ,48,.container-in width: 580rpx; height: 530rpx; background-color: #871a8e; border-radius: 40rpx; position: absolute; left: 0; right: 0;