1、CONTENTS課程內(nèi)容認識小程序1小程序開發(fā)工具的下載與安裝2小程序代碼構(gòu)成app.json官網(wǎng)地址：3頁面生命周期4頁面棧4小程序生命周期與運行機制小程序需必須在app.js中使用App()函數(shù)進行小程序的注冊，并且不能注冊多個。小程序第一翻開時將會下載整個小程序代碼包，緊接著通過app.json配置初始化App，頁面線程開始渲染首頁，初始化完成后應(yīng)用效勞線程執(zhí)行App中onLauch()函數(shù)和onShow()函數(shù)，然后才執(zhí)行頁面中的onLoad()函數(shù)和onShow()函數(shù)，每次進入后臺當用戶點擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信都會先執(zhí)行頁面中的onHide()函數(shù)再執(zhí)行a

2、pp.js中的onHide()函數(shù)，每次進入前臺都會先執(zhí)行app.js中onShow()函數(shù)再執(zhí)行頁面中的onShow()函數(shù)。運行機制小程序啟動會有兩種情況，一種是冷啟動，一種是熱啟動。 假設(shè)用戶已經(jīng)翻開過某小程序，然后在一定時間內(nèi)再次翻開該小程序，此時無需重新啟動，只需將后臺態(tài)的小程序切換到前臺，這個過程就是熱啟動；冷啟動指的是用戶首次翻開或小程序被微信主動銷毀后再次翻開的情況，此時小程序需要重新加載啟動。更新機制小程序冷啟動時如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進行啟動，即新版本的小程序需要等下一次冷啟動才會應(yīng)用上。 如果需要馬上應(yīng)用最新版本，可以使用wx

3、.getUpdateManagerAPI 進行處理運行機制小程序沒有重啟的概念當小程序進入后臺，客戶端會維持一段時間的運行狀態(tài)，超過一定時間后目前是5分鐘會被微信主動銷毀當短時間內(nèi)5s連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警，會進行小程序的銷毀5頁面跳轉(zhuǎn)navigator標簽跳轉(zhuǎn)跳轉(zhuǎn)到新頁面 在當前頁翻開 翻開綁定的小程序通過路由函數(shù)進行跳轉(zhuǎn)6頁面參數(shù)傳遞6頁面返回值/獲取頁面棧 var pages = getCurrentPages(); if(pages.length 1) /上一個頁面實例對象 var prePage = pagespages.length - 2; /關(guān)鍵在這里 prePage

4、.changeData(hello); 01237View實現(xiàn)點擊效果按鈕.hoverbackground-color: #aaa;WXMLWXSShover-class指定按下去的樣式類。當 hover-class=none 時，沒有點擊態(tài)效果8scroll-view 9swiper9movable-area9cover-view地圖9icon9text 你好 啊 哈哈哈空格是中文字符一半大小 你好 啊 哈哈哈空格是中文字符大小 你好 啊 哈哈哈空格根據(jù)字體設(shè)置t 空格 多個只會顯示一個空格 n 換行你好！t七月流火啊！n我在下一行space 有效值： 你好啊哈哈哈空格是中文字符一半大小 你

5、好啊哈哈哈空格是中文字符大小 你好啊哈哈哈空格根據(jù)字體設(shè)置decode是否解碼WXSS1尺寸單位rpxresponsive pixel: 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，那么750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。2樣式導(dǎo)入使用import語句可以導(dǎo)入外聯(lián)樣式表，import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。3內(nèi)聯(lián)樣式框架組件上支持使用 style、class 屬性來控制組件的樣式。style：靜態(tài)的樣式統(tǒng)一寫到 class 中。s

6、tyle 接收動態(tài)的樣式，在運行時會進行解析，請盡量防止將靜態(tài)的樣式寫進 style 中，以免影響渲染速度。class：用于指定樣式規(guī)那么，其屬性值是樣式規(guī)那么中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。樣式內(nèi)容顯示定位背景邊框文本屬性fontmarginpadding4wxss display(顯示display)屬性說明flex多欄多列布局flex-direction:row/columninline-block行內(nèi)塊元素inline此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符inline-table作為內(nèi)聯(lián)表格來顯示類似 ，表格前后沒有換行符inline

7、-flex將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示none此元素不會被顯示block此元素將顯示為塊級元素，此元素前后會帶有換行符list-item此元素會作為列表顯示table會作為塊級表格來顯示類似 ，表格前后帶有換行符table-caption作為一個表格標題顯示類似 table-cell作為一個表格單元格顯示類似 和 table-column作為一個單元格列顯示類似 table-column-group作為一個或多個列的分組來顯示類似 table-row作為一個表格行顯示類似 table-row-group作為一個或多個行的分組來顯示類似 table-header-group作為一個或多個行的

8、分組來顯示類似 table-footer-group作為一個或多個行的分組來顯示類似 inherit從父元素繼承 display 屬性的值5wxss position(定位)屬性說明absolute生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定。relative生成相對定位的元素，相對于其正常位置進行定位。因此，left:20 會向元素的 LEFT 位置添加 20 像素。fixed生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bo

9、ttom 屬性進行規(guī)定。static默認值。沒有定位，元素出現(xiàn)在正常的流中忽略 top, bottom, left, right 或者 z-index 聲明inherit規(guī)定應(yīng)該從父元素繼承 position 屬性的值6wxss background(背景)background簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中background: color position size repeat origin clip attachment image;background-color指定要使用的背景顏色background-position指定背景圖像的位置background-positio

10、n:centerbackground-size 指定背景圖片的大小background-size:80px 60px;寬度 高度background-repeat指定如何重復(fù)背景圖像repeat,repeat-x,repeat-y,no-repeat,inheritbackground-origin指定背景圖像的定位區(qū)域padding-box 背景圖像填充框的相對位置border-box背景圖像邊界框的相對位置content-box背景圖像的相對位置的內(nèi)容框background-clip指定背景圖像的繪畫區(qū)域?qū)傩灾?，同上background-attachment設(shè)置背景圖像是否固定或者隨著頁面

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

12、置寬度border-top-width 上右下左邊框厚度 屬性值：thin medium thick lengthborder-style設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。border-top-width 上右下左邊框樣式 屬性值：solid,dashed,dotted,double等border-color元素的所有邊框中可見局部的顏色，或為 4 個邊分別設(shè)置顏色border-top-width 上右下左邊框顏色7wxss 文本屬性text8wxss 字體屬性font9wxss margin(外邊距)margin10wxss padding(填充)paddingCONTE

13、NTS01計算器(布局)02計算器(字體和背景)03計算器(邏輯實現(xiàn))邏輯實現(xiàn)輸入數(shù)字輸入運算符號輸入正負符號輸入其他邏輯實現(xiàn)輸入數(shù)字是否編輯模式輸入運算符號是否編輯模式是否為進行過計算當前值是否是0算式顯示臨時結(jié)果計算01布局02定位03定時器01外部點實現(xiàn)02內(nèi)部圖片布局03抽獎邏輯實現(xiàn)外部點實現(xiàn) .container-out height: 600rpx; width: 650rpx; background-color: #b136b9; margin: 100rpx auto; border-radius: 40rpx; box-shadow: 0 10px 0 #871a8e; po

14、sition: relative;.circle position: absolute; display: block; border-radius: 50%; height: 20rpx; width: 20rpx;/圓點閃爍 setInterval(function () if (_this.data.colorCircleFirst = #FFDF2F) _this.setData( colorCircleFirst: #FE4D32, colorCircleSecond: #FFDF2F, ) else _this.setData( colorCircleFirst: #FFDF2F,

15、 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 = 7.5; leftCircle = leftCircle + 102.5; else if (i = 6) topCircle = 15 leftCircle = 620; else if (i

16、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; leftCircle = 15; else if (i 24) topCircle = topCircle - 94; leftCircle = 7.5; else return circleList.push( topCircle: topCircle, leftCircle: leftCircle ); 外部點實現(xiàn) START .container-in width: 580rpx; height: 530rpx; backgrou