微信小程序入門

1、微信小程序入門主講：劉志敏博客：/belvine微信視頻：/course/detail/8456QQ群：785071190微信小程序入門第1頁CONTENTS課程內(nèi)容微信小程序入門第2頁認(rèn)識(shí)小程序微信小程序入門第3頁1小程序開發(fā)工具下載與安裝下載地址：/miniprogram/dev/devtools/download.html微信小程序入門第4頁2小程序代碼組成微信小程序入門第5頁app.json官網(wǎng)地址：/miniprogram/dev/framework/config.html微信小程序入門第6頁3頁面生命周期微信小程序入門第7頁微信小程序入門第8頁4頁面棧微信小程序入門第9頁4小程序生

2、命周期與運(yùn)行機(jī)制小程序需必須在app.js中使用App()函數(shù)進(jìn)行小程序注冊(cè)，而且不能注冊(cè)多個(gè)。小程序第一打開時(shí)將會(huì)下載整個(gè)小程序代碼包，緊接著經(jīng)過app.json配置初始化App，頁面線程開始渲染首頁，初始化完成后應(yīng)用服務(wù)線程執(zhí)行App中onLauch()函數(shù)和onShow()函數(shù)，然后才執(zhí)行頁面中onLoad()函數(shù)和onShow()函數(shù)，每次進(jìn)入后臺(tái)（當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信）都會(huì)先執(zhí)行頁面中onHide()函數(shù)再執(zhí)行app.js中onHide()函數(shù)，每次進(jìn)入前臺(tái)都會(huì)先執(zhí)行app.js中onShow()函數(shù)再執(zhí)行頁面中onShow()函數(shù)。微信小程序入門

3、第10頁微信小程序入門第11頁運(yùn)行機(jī)制小程序開啟會(huì)有兩種情況，一個(gè)是冷開啟，一個(gè)是熱開啟。 假如用戶已經(jīng)打開過某小程序，然后在一定時(shí)間內(nèi)再次打開該小程序，此時(shí)無需重新開啟，只需將后臺(tái)態(tài)小程序切換到前臺(tái)，這個(gè)過程就是熱開啟；冷開啟指是用戶首次打開或小程序被微信主動(dòng)銷毀后再次打開情況，此時(shí)小程序需要重新加載開啟。更新機(jī)制小程序冷開啟時(shí)假如發(fā)覺有新版本，將會(huì)異步下載新版本代碼包，并同時(shí)用客戶端當(dāng)?shù)匕M(jìn)行開啟，即新版本小程序需要等下一次冷開啟才會(huì)應(yīng)用上。 假如需要馬上應(yīng)用最新版本，能夠使用wx.getUpdateManagerAPI 進(jìn)行處理運(yùn)行機(jī)制小程序沒有重啟概念當(dāng)小程序進(jìn)入后臺(tái)，客戶端會(huì)維持一段

4、時(shí)間運(yùn)行狀態(tài)，超出一定時(shí)間后（當(dāng)前是5分鐘）會(huì)被微信主動(dòng)銷毀當(dāng)短時(shí)間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警，會(huì)進(jìn)行小程序銷毀微信小程序入門第12頁5頁面跳轉(zhuǎn)navigator標(biāo)簽跳轉(zhuǎn)跳轉(zhuǎn)到新頁面 在當(dāng)前頁打開 打開綁定小程序微信小程序入門第13頁經(jīng)過路由函數(shù)進(jìn)行跳轉(zhuǎn)微信小程序入門第14頁6頁面參數(shù)傳遞微信小程序入門第15頁6頁面返回值/獲取頁面棧 var pages = getCurrentPages(); if(pages.length 1) /上一個(gè)頁面實(shí)例對(duì)象 var prePage = pagespages.length - 2; /關(guān)鍵在這里 prePage.changeData

5、(hello); 0123微信小程序入門第16頁7View實(shí)現(xiàn)點(diǎn)擊效果按鈕.hoverbackground-color: #aaa;WXMLWXSShover-class指定按下去樣式類。當(dāng) hover-class=none 時(shí)，沒有點(diǎn)擊態(tài)效果微信小程序入門第17頁8scroll-view 微信小程序入門第18頁 微信小程序入門第19頁9swiper微信小程序入門第20頁9movable-area微信小程序入門第21頁9cover-view地圖微信小程序入門第22頁9icon微信小程序入門第23頁9text 你好 啊 哈哈哈（空格是漢字字符二分之一大?。?你好 啊 哈哈哈（空格是漢字字符大?。?/p>

6、 你好 啊 哈哈哈（空格依據(jù)字體設(shè)置）t 空格（ 多個(gè)只會(huì)顯示一個(gè)空格） n 換行你好！t七月流火?。我在下一行space 有效值：微信小程序入門第24頁 你好啊哈哈哈（空格是漢字字符二分之一大?。?你好啊哈哈哈（空格是漢字字符大小） 你好啊哈哈哈（空格依據(jù)字體設(shè)置）decode是否解碼微信小程序入門第25頁WXSS微信小程序入門第26頁1尺寸單位設(shè)備rpx換算px (屏幕寬度/750)px換算rpx (750/屏幕寬度)屏幕寬度iPhone51rpx = 0.42px1px = 2.34rpx320iPhone61rpx = 0.5px1px = 2rpx375iPhone6 Plus1r

7、px = 0.552px1px = 1.81rpx414rpx（responsive pixel）: 能夠依據(jù)屏幕寬度進(jìn)行自適應(yīng)。要求屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。微信小程序入門第27頁2樣式導(dǎo)入使用import語句能夠?qū)胪饴?lián)樣式表，import后跟需要導(dǎo)入外聯(lián)樣式表相對(duì)路徑，用;表示語句結(jié)束。微信小程序入門第28頁3內(nèi)聯(lián)樣式框架組件上支持使用 style、class 屬性來控制組件樣式。style：靜態(tài)樣式統(tǒng)一寫到 class 中。st

8、yle 接收動(dòng)態(tài)樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡可能防止將靜態(tài)樣式寫進(jìn) style 中，以免影響渲染速度。class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。微信小程序入門第29頁樣式內(nèi)容顯示定位背景邊框文本屬性fontmarginpadding微信小程序入門第30頁4wxss display(顯示display)屬性說明flex多欄多列布局flex-direction:row/columninline-block行內(nèi)塊元素inline此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符inline-table作為內(nèi)聯(lián)表格來顯示（類

9、似 ），表格前后沒有換行符inline-flex將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示none此元素不會(huì)被顯示block此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符list-item此元素會(huì)作為列表顯示table會(huì)作為塊級(jí)表格來顯示（類似 ），表格前后帶有換行符table-caption作為一個(gè)表格標(biāo)題顯示（類似 ）table-cell作為一個(gè)表格單元格顯示（類似 和 ）table-column作為一個(gè)單元格列顯示（類似 ）table-column-group作為一個(gè)或多個(gè)列分組來顯示（類似 ）table-row作為一個(gè)表格行顯示（類似 ）table-row-group作為一個(gè)或多個(gè)行分組來顯示（

10、類似 ）table-header-group作為一個(gè)或多個(gè)行分組來顯示（類似 ）table-footer-group作為一個(gè)或多個(gè)行分組來顯示（類似 ）inherit從父元素繼承 display 屬性值微信小程序入門第31頁5wxss position(定位)屬性說明absolute生成絕對(duì)定位元素，相對(duì)于 static 定位以外第一個(gè)父元素進(jìn)行定位。元素位置經(jīng)過 left, top, right 以及 bottom 屬性進(jìn)行要求。relative生成相對(duì)定位元素，相對(duì)于其正常位置進(jìn)行定位。所以，left:20 會(huì)向元素 LEFT 位置添加 20 像素。fixed生成絕對(duì)定位元素，相對(duì)于瀏覽器

11、窗口進(jìn)行定位。元素位置經(jīng)過 left, top, right 以及 bottom 屬性進(jìn)行要求。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常流中（忽略 top, bottom, left, right 或者 z-index 申明）inherit要求應(yīng)該從父元素繼承 position 屬性值微信小程序入門第32頁6wxss background(背景)background簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)申明中background: color position size repeat origin clip attachment image;background-color指定要使用背景顏色

12、background-position指定背景圖像位置background-position:centerbackground-size 指定背景圖片大小background-size:80px 60px;寬度 高度background-repeat指定怎樣重復(fù)背景圖像repeat,repeat-x,repeat-y,no-repeat,inheritbackground-origin指定背景圖像定位區(qū)域padding-box 背景圖像填充框相對(duì)位置微信小程序入門第33頁border-box背景圖像邊界框相對(duì)位置content-box背景圖像相對(duì)位置內(nèi)容框background-clip指定背景

13、圖像繪畫區(qū)域?qū)傩灾?，同上background-attachment設(shè)置背景圖像是否固定或者伴隨頁面其余部分滾動(dòng)。scroll 背景圖片隨頁面其余部分滾動(dòng)。這是默認(rèn)fixed 背景圖像是固定inherit 指定background-attachment設(shè)置應(yīng)該從父元素繼承l(wèi)ocal 背景圖片隨滾動(dòng)元素滾動(dòng)background-image指定要使用一個(gè)或多個(gè)背景圖像url(URL) 圖像URLnone無圖像背景會(huì)顯示。這是默認(rèn)inherit 指定背景圖像應(yīng)該從父元素繼承微信小程序入門第34頁7wxss border(邊框)屬性說明border簡寫屬性，用于把針對(duì)四個(gè)邊屬性設(shè)置在一個(gè)申明border

14、:5px solid red;border-width用于為元素全部邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度border-top-width 上右下左邊框厚度 屬性值：thin medium thick lengthborder-style設(shè)置元素全部邊框樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。border-top-width 上右下左邊框樣式 屬性值：solid,dashed,dotted,double等border-color元素全部邊框中可見部分顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色border-top-width 上右下左邊框顏色微信小程序入門第35頁7wxss 文本屬性（text）屬性說明語

15、法(屬性值)color設(shè)置文本顏色direction設(shè)置文本方向。ltr:文本方向從左到右;rtl:文本方向從右到左letter-spacing設(shè)置字符間距l(xiāng)ine-height設(shè)置行高text-align對(duì)齊元素中文本left：把文本排列到左邊。默認(rèn)值，由瀏覽器決定。right：把文本排列到右邊。center：把文本排列到中間。justify：實(shí)現(xiàn)兩端對(duì)齊文本效果。inherit: 要求應(yīng)該從父元素繼承 text-align 屬性值。微信小程序入門第36頁text-decoration向文本添加修飾underline 定義文本下一條線。overline 定義文本上一條線。line-throu

16、gh 定義穿過文本下一條線。blink 定義閃爍文本。text-indent縮進(jìn)元素漢字本首行text-shadow設(shè)置文本陰影text-shadow: h-shadow v-shadow blur color;h-shadow:水平陰影位置,允許負(fù)值;v-shadow:垂直陰影位置,允許負(fù)值;blur:含糊距離;color:陰影顏色text-transform控制元素中字母capitalize 文本中每個(gè)單詞以大寫字母開頭。uppercase 定義僅有大寫字母。lowercase 定義無大寫字母，僅有小寫字母。unicode-bidi設(shè)置或返回文本是否被重寫 vertical-align設(shè)置

17、元素垂直對(duì)齊white-space設(shè)置元素中空白處理方式word-spacing設(shè)置字間距微信小程序入門第37頁8wxss 字體屬性（font）屬性說明語法(屬性值)font在一個(gè)申明中設(shè)置全部字體屬性font:font-style font-variant font-weight font-size/line-height font-family(按次序)font-style指定文本字體樣式normal 默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)字體樣式。italic 瀏覽器會(huì)顯示一個(gè)斜體字體樣式。oblique 瀏覽器會(huì)顯示一個(gè)傾斜字體樣式。inherit 要求應(yīng)該從父元素繼承字體樣式。font-vari

18、ant以小型大寫字體或者正常字體顯示文本normal 默認(rèn)值。瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)字體。small-caps 瀏覽器會(huì)顯示小型大寫字母字體。inherit 要求應(yīng)該從父元素繼承 font-variant 屬性值。font-weight指定字體粗細(xì)normal 默認(rèn)值。定義標(biāo)準(zhǔn)字符。bold 定義粗體字符。bolder 定義更粗字符。lighter 定義更細(xì)字符。inherit 要求應(yīng)該從父元素繼承字體粗細(xì)。font-size指定文本字體大小smaller 把 font-size 設(shè)置為比父元素更小尺寸。larger 把 font-size 設(shè)置為比父元素更大尺寸。length 把 font-s

19、ize 設(shè)置為一個(gè)固定值。% 把 font-size 設(shè)置為基于父元素一個(gè)百分比值。font-family指定文本字體系列微信小程序入門第38頁9wxss margin(外邊距)（margin）屬性說明語法(屬性值)margin在一個(gè)申明中設(shè)置全部外邊距屬性。margin:10px 5px 15px 20px;(上邊距，右邊距，下邊距，左邊距)margin-top設(shè)置元素上外邊距。margin-right設(shè)置元素右外邊距。margin-bottom設(shè)置元素下外邊距。margin-left設(shè)置元素左外邊距微信小程序入門第39頁10wxss padding(填充)（padding）屬性說明語法(屬

20、性值)padding使用縮寫屬性設(shè)置在一個(gè)申明中全部填充屬性padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充)padding-top設(shè)置元素頂部填充。padding-right設(shè)置元素右部填充padding-bottom設(shè)置元素底部填充padding-left設(shè)置元素左部填充微信小程序入門第40頁CONTENTS01計(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)行過計(jì)算當(dāng)前值是否是0算式顯示暫

21、時(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-color: #b136b9; margin: 100rpx auto; border-radius: 40rpx; box-shadow: 0 10px 0 #871a8e; position: relative;.circle position: absolute; display: block; border-radi

22、us: 50%; height: 20rpx; width: 20rpx;微信小程序入門第46頁/圓點(diǎn)閃爍 setInterval(function () if (_this.data.colorCircleFirst = #FFDF2F) _this.setData( colorCircleFirst: #FE4D32, colorCircleSecond: #FFDF2F, ) else _this.setData( colorCircleFirst: #FFDF2F, colorCircleSecond: #FE4D32, ) , 500) /圓點(diǎn)設(shè)置 var leftCircle =

23、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 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, left