微信小程序-入門課件

微信小程序入門主講：劉志敏博客：/belvine微信視頻：/course/detail/8456QQ群：785071190微信小程序入門主講：劉志敏CONTENTS課程內(nèi)容CONTENTS課程內(nèi)容認(rèn)識(shí)小程序認(rèn)識(shí)小程序1小程序開發(fā)工具的下載與安裝下載地址：/miniprogram/dev/devtools/download.html1小程序開發(fā)工具的下載與安裝下載地址：https://dev2小程序代碼構(gòu)成2小程序代碼構(gòu)成app.json官網(wǎng)地址：/miniprogram/dev/framework/config.htmlapp.json官網(wǎng)地址：https://developer3頁面生命周期3頁面生命周期微信小程序-入門ppt課件4頁面棧4頁面棧4小程序生命周期與運(yùn)行機(jī)制小程序需必須在app.js中使用App()函數(shù)進(jìn)行小程序的注冊(cè)，并且不能注冊(cè)多個(gè)。小程序第一打開時(shí)將會(huì)下載整個(gè)小程序代碼包，緊接著通過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ù)。4小程序生命周期與運(yùn)行機(jī)制小程序需必須在app.js中使用A微信小程序-入門ppt課件運(yùn)行機(jī)制小程序啟動(dòng)會(huì)有兩種情況，一種是「冷啟動(dòng)」，一種是「熱啟動(dòng)」。假如用戶已經(jīng)打開過某小程序，然后在一定時(shí)間內(nèi)再次打開該小程序，此時(shí)無需重新啟動(dòng)，只需將后臺(tái)態(tài)的小程序切換到前臺(tái)，這個(gè)過程就是熱啟動(dòng)；冷啟動(dòng)指的是用戶首次打開或小程序被微信主動(dòng)銷毀后再次打開的情況，此時(shí)小程序需要重新加載啟動(dòng)。更新機(jī)制小程序冷啟動(dòng)時(shí)如果發(fā)現(xiàn)有新版本，將會(huì)異步下載新版本的代碼包，并同時(shí)用客戶端本地的包進(jìn)行啟動(dòng)，即新版本的小程序需要等下一次冷啟動(dòng)才會(huì)應(yīng)用上。如果需要馬上應(yīng)用最新版本，可以使用

wx.getUpdateManager

API進(jìn)行處理運(yùn)行機(jī)制小程序沒有重啟的概念當(dāng)小程序進(jìn)入后臺(tái)，客戶端會(huì)維持一段時(shí)間的運(yùn)行狀態(tài)，超過一定時(shí)間后（目前是5分鐘）會(huì)被微信主動(dòng)銷毀當(dāng)短時(shí)間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警，會(huì)進(jìn)行小程序的銷毀運(yùn)行機(jī)制更新機(jī)制運(yùn)行機(jī)制5頁面跳轉(zhuǎn)navigator標(biāo)簽跳轉(zhuǎn)<navigatorurl="/page/navigate/navigate?title=navigate"hover-class="navigator-hover">跳轉(zhuǎn)到新頁面</navigator>

<navigatorurl="../../redirect/redirect/redirect?title=redirect"open-type="redirect"hover-class="other-navigator-hover">在當(dāng)前頁打開</navigator>

<navigatortarget="miniProgram"open-type="navigate"app-id=""path=""extra-data=""version="release">打開綁定的小程序</navigator>5頁面跳轉(zhuǎn)navigator標(biāo)簽跳轉(zhuǎn)<navigatoru通過路由函數(shù)進(jìn)行跳轉(zhuǎn)通過路由函數(shù)進(jìn)行跳轉(zhuǎn)6頁面參數(shù)傳遞6頁面參數(shù)傳遞6頁面返回值//獲取頁面棧varpages=getCurrentPages();if(pages.length>1){

//上一個(gè)頁面實(shí)例對(duì)象

varprePage=pages[pages.length-2];

//關(guān)鍵在這里

prePage.changeData(‘hello’);}01236頁面返回值//獲取頁面棧01237View實(shí)現(xiàn)點(diǎn)擊效果<view

hover-class='hover'>按鈕</view>.hover{ background-color:

#aaa;}WXMLWXSShover-class指定按下去的樣式類。當(dāng)hover-class="none"時(shí)，沒有點(diǎn)擊態(tài)效果7View實(shí)現(xiàn)點(diǎn)擊效果<viewhover-class='8scroll-view<!--垂直滾動(dòng)，這里必須設(shè)置高度--><scroll-viewscroll-y="true"style="height:200px"><viewstyle="background:red;width:100px;height:100px"></view><viewstyle="background:green;width:100px;height:100px"></view><viewstyle="background:blue;width:100px;height:100px"></view><viewstyle="background:yellow;width:100px;height:100px"></view></scroll-view>8scroll-view<!--垂直滾動(dòng)，這里必須設(shè)置高度-<!--水平滾動(dòng)--><scroll-viewscroll-x="true"style="white-space:nowrap;display:flex"><!--display:inline-block--><viewstyle="background:red;width:200px;height:100px;display:inline-block"></view><viewstyle="background:green;width:200px;height:100px;display:inline-block"></view><viewstyle="background:blue;width:200px;height:100px;display:inline-block"></view><viewstyle="background:yellow;width:200px;height:100px;display:inline-block"></view></scroll-view><!--white-spacenormal:正常無變化(默認(rèn)處理方式.文本自動(dòng)處理換行.假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行)pre:保持HTML源代碼的空格與換行,等同與pre標(biāo)簽nowrap:強(qiáng)制文本在一行,除非遇到br換行標(biāo)簽pre-wrap:同pre屬性,但是遇到超出容器范圍的時(shí)候會(huì)自動(dòng)換行pre-line:同pre屬性,但是遇到連續(xù)空格會(huì)被看作一個(gè)空格inherit:繼承--><!--white-space9swiper<swiperindicator-dots='true'><swiper-item>

<imagesrc='...'></image></swiper-item><swiper-item>

<imagesrc='...'></image></swiper-item></swiper>9swiper<swiperindicator-dots=9movable-area<movable-areastyle="width:200px;height:200px;background-color:black;"><movable-viewstyle='background-color:red;width:50px;height:50px;'direction='all'></movable-view></movable-area>9movable-area<movable-areasty9cover-view<map><cover-view>地圖<cover-imagesrc='/images/1.jpg'style='width:50px;heigth:50px;'></cover-image></cover-view></map>9cover-view<map>9icon<icontype="success"/>9icon<icontype="success"/>9text<view><textspace="ensp">你好啊哈哈哈（空格是中文字符一半大?。?lt;/text></view><view><textspace="emsp">你好啊哈哈哈（空格是中文字符大?。?lt;/text></view><view><textspace="nbsp">你好啊哈哈哈（空格根據(jù)字體設(shè)置）</text></view>\t空格（多個(gè)只會(huì)顯示一個(gè)空格）\n換行<text>你好！\t七月流火啊！\n我在下一行</text>space有效值：9text<view>\t空格（多個(gè)只會(huì)顯示一個(gè)空格）<view><textdecode="{{true}}">你好 啊   哈哈哈（空格是中文字符一半大?。?lt;/text></view><view><textdecode="{{true}}">你好 啊   哈哈哈（空格是中文字符大小）</text></view><view><textdecode="{{true}}">你好 啊   哈哈哈（空格根據(jù)字體設(shè)置）</text></view>decode是否解碼<view>decode是否解碼WXSSWXSS1尺寸單位rpx（responsivepixel）:可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。1尺寸單位rpx（responsivepixel）:可以2樣式導(dǎo)入使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語句結(jié)束。2樣式導(dǎo)入使用@import語句可以導(dǎo)入外聯(lián)樣式表，@imp3內(nèi)聯(lián)樣式框架組件上支持使用style、class屬性來控制組件的樣式。style：靜態(tài)的樣式統(tǒng)一寫到class中。style接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn)style中，以免影響渲染速度。<viewstyle="color:{{color}};"/>class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。<viewclass="normal_view"/>3內(nèi)聯(lián)樣式框架組件上支持使用style、class屬性來樣式內(nèi)容顯示定位背景邊框文本屬性fontmarginpadding樣式內(nèi)容顯示4wxssdisplay(顯示display)屬性 說明flex 多欄多列布局 flex-direction:row/columninline-block 行內(nèi)塊元素inline 此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符inline-table 作為內(nèi)聯(lián)表格來顯示（類似<table>），表格前后沒有換行符inline-flex 將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示none 此元素不會(huì)被顯示block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符list-item 此元素會(huì)作為列表顯示table 會(huì)作為塊級(jí)表格來顯示（類似<table>），表格前后帶有換行符table-caption 作為一個(gè)表格標(biāo)題顯示（類似<caption>）table-cell 作為一個(gè)表格單元格顯示（類似<td>和<th>）table-column 作為一個(gè)單元格列顯示（類似<col>）table-column-group 作為一個(gè)或多個(gè)列的分組來顯示（類似<colgroup>）table-row 作為一個(gè)表格行顯示（類似<tr>）table-row-group 作為一個(gè)或多個(gè)行的分組來顯示（類似<tbody>）table-header-group 作為一個(gè)或多個(gè)行的分組來顯示（類似<thead>）table-footer-group 作為一個(gè)或多個(gè)行的分組來顯示（類似<tfoot>）inherit 從父元素繼承display屬性的值4wxssdisplay(顯示display)屬性 說明5wxssposition(定位)屬性 說明absolute 生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20"會(huì)向元素的LEFT位置添加20像素。fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）inherit 規(guī)定應(yīng)該從父元素繼承position屬性的值5wxssposition(定位)屬性 說明6wxssbackground(背景)background

簡(jiǎn)寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中

background:colorpositionsizerepeatoriginclipattachmentimage;background-color 指定要使用的背景顏色background-position 指定背景圖像的位置

background-position:centerbackground-size 指定背景圖片的大小

background-size:80px60px;寬度高度background-repeat 指定如何重復(fù)背景圖像

repeat,repeat-x,repeat-y,no-repeat,inheritbackground-origin 指定背景圖像的定位區(qū)域

padding-box背景圖像填充框的相對(duì)位置6wxssbackground(背景)backgroundborder-box

背景圖像邊界框的相對(duì)位置content-box

背景圖像的相對(duì)位置的內(nèi)容框background-clip

指定背景圖像的繪畫區(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)該從父元素繼承border-box 背景圖像邊界框的相對(duì)位置7wxssborder(邊框)屬性

說明

border

簡(jiǎn)寫屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明

border:5pxsolidred;border-width 用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度

border-top-width上右下左邊框厚度屬性值：thinmediumthicklengthborder-style 設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。

border-top-width上右下左邊框樣式屬性值：solid,dashed,dotted,double等border-color 元素的所有邊框中可見部分的顏色，或?yàn)?個(gè)邊分別設(shè)置顏色

border-top-width上右下左邊框顏色7wxssborder(邊框)屬性 說明 7wxss文本屬性（text）7wxss文本屬性（text）微信小程序-入門ppt課件8wxss字體屬性（font）8wxss字體屬性（font）9wxssmargin(外邊距)（margin）9wxssmargin(外邊距)（margin）10wxsspadding(填充)（padding）10wxsspadding(填充)（padding）CONTENTS01計(jì)算器(布局)02計(jì)算器(字體和背景)03計(jì)算器(邏輯實(shí)現(xiàn))CONTENTS01計(jì)算器(布局)02計(jì)算器(字體和背景)0邏輯實(shí)現(xiàn)輸入數(shù)字輸入運(yùn)算符號(hào)輸入正負(fù)符號(hào)輸入其他邏輯實(shí)現(xiàn)輸入數(shù)字輸入運(yùn)算符號(hào)輸入正負(fù)符號(hào)輸入其他邏輯實(shí)現(xiàn)輸入數(shù)字是否編輯模式輸入運(yùn)算符號(hào)是否編輯模式是否為進(jìn)行過計(jì)算當(dāng)前值是否是0算式顯示臨時(shí)結(jié)果計(jì)算邏輯實(shí)現(xiàn)輸入數(shù)字是否編輯模式輸入運(yùn)算符號(hào)是否編輯模式是否為進(jìn)01布局02定位03定時(shí)器01布局02定位03定時(shí)器01外部點(diǎn)實(shí)現(xiàn)02內(nèi)部圖片布局03抽獎(jiǎng)邏輯實(shí)現(xiàn)01外部點(diǎn)實(shí)現(xiàn)02內(nèi)部圖片布局03抽獎(jiǎng)邏輯實(shí)現(xiàn)外部點(diǎn)實(shí)現(xiàn)<viewclass="container-out"><viewclass="circle"wx:for="{{circleList}}"style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color:{{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view></view>.container-out{height:600rpx;width:650rpx;background-color:#b136b9;margin:100rpxauto;border-radius:40rpx;box-shadow:010px0#871a8e;position:relative;}.circle{position:absolute;display:block;border-radius:50%;height:20rpx;width:20rpx;}外部點(diǎn)實(shí)現(xiàn)<viewclass="container-ou//圓點(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è)置varleftCircle=7.5;vartopCircle=7.5;varcircleList=[];for(vari=0;i<24;i++){if(i==0){topCircle=15;leftCircle=15;}elseif(i<6){topCircle=7.5;leftCircle=leftCircle+102.5;}elseif(i==6){topCircle=15leftCircle=620;}elseif(i<12){topCircle=topCircle+94;leftCircle=620;}elseif(i==12){topCircle=565;leftCircle=620;}elseif(i<18){topCircle=570;leftCircle=leftCircle-102.5;}elseif(i==18){topCircle=565;leftCircle=15;}elseif(i<24){topCircle=topCircle-94;leftCircle=7.5;}else{return}circleList.push({topCircle:topCircle,leftCircle:leftCircle});}//圓點(diǎn)閃爍//圓點(diǎn)設(shè)置外部點(diǎn)實(shí)現(xiàn)<viewclass="container-in"><viewclass="content-out"wx:for="{{awardList}}"style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color:{{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"><i