微信小程序入門

演示文(Wen)稿微信小程序入門第一頁，共四十九頁。（優(yōu)選）微信小程(Cheng)序入門第二頁，共四十九頁。CONTENTS課程內(nèi)(Nei)容第三頁，共四十九頁。認(rèn)識(Shi)小程序第四頁，共四十九頁。1小程序開發(fā)工(Gong)具的下載與安裝下載地址：/miniprogram/dev/devtools/download.html第五頁，共四十九頁。2小程序代碼(Ma)構(gòu)成第六頁，共四十九頁。app.json官(Guan)網(wǎng)地址：/miniprogram/dev/framework/config.html第七頁，共四十九頁。3頁面生命(Ming)周期第八頁，共四十九頁。第九頁，共四十九頁。4頁(Ye)面棧第十頁，共四十九頁。4小程序生命周期與運(yùn)行機(jī)(Ji)制小程序需必須在app.js中使用App()函數(shù)進(jìn)行小程序的注冊，并且不能注冊多個(gè)。小程序第一打開時(shí)將會下載整個(gè)小程序代碼包，緊接著通過app.json配置初始化App，頁面線程開始渲染首頁，初始化完成后應(yīng)用服務(wù)線程執(zhí)行App中onLauch()函數(shù)和onShow()函數(shù)，然后才執(zhí)行頁面中的onLoad()函數(shù)和onShow()函數(shù)，每次進(jìn)入后臺（當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備Home鍵離開微信）都會先執(zhí)行頁面中的onHide()函數(shù)再執(zhí)行app.js中的onHide()函數(shù)，每次進(jìn)入前臺都會先執(zhí)行app.js中onShow()函數(shù)再執(zhí)行頁面中的onShow()函數(shù)。第十一頁，共四十九頁。第十二頁，共四十九頁。運(yùn)行機(jī)制小程序啟動會有兩種情況，一種是「冷啟動」，一種是「熱啟動」。假如用戶已經(jīng)打開過某小程序，然后在一定時(shí)間內(nèi)再次打開該小程序，此(Ci)時(shí)無需重新啟動，只需將后臺態(tài)的小程序切換到前臺，這個(gè)過程就是熱啟動；冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此(Ci)時(shí)小程序需要重新加載啟動。更新機(jī)制小程序冷啟動時(shí)如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包，并同時(shí)用客戶端本地的包進(jìn)行啟動，即新版本的小程序需要等下一次冷啟動才會應(yīng)用上。如果需要馬上應(yīng)用最新版本，可以使用

wx.getUpdateManager

API進(jìn)行處理運(yùn)行機(jī)制小程序沒有重啟的概念當(dāng)小程序進(jìn)入后臺，客戶端會維持一段時(shí)間的運(yùn)行狀態(tài)，超過一定時(shí)間后（目前是5分鐘）會被微信主動銷毀當(dāng)短時(shí)間內(nèi)（5s）連續(xù)收到兩次以上收到系統(tǒng)內(nèi)存告警，會進(jìn)行小程序的銷毀第十三頁，共四十九頁。5頁(Ye)面跳轉(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>第十四頁，共四十九頁。通過路由(You)函數(shù)進(jìn)行跳轉(zhuǎn)第十五頁，共四十九頁。6頁面參數(shù)傳(Chuan)遞第十六頁，共四十九頁。6頁面返回(Hui)值//獲取頁面棧varpages=getCurrentPages();if(pages.length>1){//上一個(gè)頁面實(shí)例對象varprePage=pages[pages.length-2];//關(guān)鍵在這里prePage.changeData(‘hello’);}0123第十七頁，共四十九頁。7View實(shí)現(xiàn)點(diǎn)(Dian)擊效果<view

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

#aaa;}WXMLWXSShover-class指定按下去的樣式類。當(dāng)hover-class="none"時(shí)，沒有點(diǎn)擊態(tài)效果第十八頁，共四十九頁。8scroll-view<!--垂直滾動，這(Zhe)里必須設(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>第十九頁，共四十九頁。<!--水(Shui)平滾動--><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á)容器邊界內(nèi)容會轉(zhuǎn)到下一行)pre:保持HTML源代碼的空格與換行,等同與pre標(biāo)簽nowrap:強(qiáng)制文本在一行,除非遇到br換行標(biāo)簽pre-wrap:同pre屬性,但是遇到超出容器范圍的時(shí)候會自動換行pre-line:同pre屬性,但是遇到連續(xù)空格會被看作一個(gè)空格inherit:繼承-->第二十頁，共四十九頁。9swiper<swiperindicator-dots='true'><swiper-item>

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

<imagesrc='...'></image></swiper-item></swiper>第二十一頁，共四十九頁。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>第二十二頁，共四十九頁。9cover-view<map><cover-view>地(Di)圖<cover-imagesrc='/images/1.jpg'style='width:50px;heigth:50px;'></cover-image></cover-view></map>第二十三頁，共四十九頁。9icon<icontype="success"/>第二十四頁，共四十九頁。9text<view><textspace="ensp">你好啊哈哈哈（空(Kong)格是中文字符一半大?。?lt;/text></view><view><textspace="emsp">你好啊哈哈哈（空格是中文字符大小）</text></view><view><textspace="nbsp">你好啊哈哈哈（空格根據(jù)字體設(shè)置）</text></view>\t空格（多個(gè)只會顯示一個(gè)空格）\n換行<text>你好！\t七月流火?。n我在下一行</text>space有效值：第二十五頁，共四十九頁。<view><textdecode="{{true}}">你好 啊   哈哈哈（空格是中文字符一半大?。?lt;/text></view><view><textdecode="{{true}}">你好 啊   哈哈哈（空格是中文字符大?。?lt;/text></view><view><textdecode="{{true}}">你好 啊   哈哈哈（空格根(Gen)據(jù)字體設(shè)置）</text></view>decode是否解碼第二十六頁，共四十九頁。WXSS第二十七頁，共四十九頁。1尺寸(Cun)單位設(shè)備rpx換算px(屏幕寬度/750)px換算rpx(750/屏幕寬度)屏幕寬度iPhone51rpx=0.42px1px=2.34rpx320iPhone61rpx=0.5px1px=2rpx375iPhone6Plus1rpx=0.552px1px=1.81rpx414rpx（responsivepixel）:可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。第二十八頁，共四十九頁。2樣(Yang)式導(dǎo)入使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。第二十九頁，共四十九頁。3內(nèi)(Nei)聯(lián)樣式框架組件上支持使用style、class屬性來控制組件的樣式。style：靜態(tài)的樣式統(tǒng)一寫到class中。style接收動態(tài)的樣式，在運(yùn)行時(shí)會進(jìn)行解析，請盡量避免將靜態(tài)的樣式寫進(jìn)style中，以免影響渲染速度。<viewstyle="color:{{color}};"/>class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。<viewclass="normal_view"/>第三十頁，共四十九頁。樣(Yang)式內(nèi)容顯示定位背景邊框文本屬性fontmarginpadding第三十一頁，共四十九頁。4wxssdisplay(顯(Xian)示display)屬性 說明flex 多欄多列布局 flex-direction:row/columninline-block 行內(nèi)塊元素inline 此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符inline-table 作為內(nèi)聯(lián)表格來顯示（類似<table>），表格前后沒有換行符inline-flex 將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示none 此元素不會被顯示block 此元素將顯示為塊級元素，此元素前后會帶有換行符list-item 此元素會作為列表顯示table 會作為塊級表格來顯示（類似<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屬性的值第三十二頁，共四十九頁。5wxssposition(定(Ding)位)屬性 說明absolute 生成絕對定位的元素，相對于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20"會向元素的LEFT位置添加20像素。fixed 生成絕對定位的元素，相對于瀏覽器窗口進(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屬性的值第三十三頁，共四十九頁。6wxssbackground(背(Bei)景)background

簡寫屬性，作用是將背景屬性設(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背景圖像填充框的相對位置第三十四頁，共四十九頁。border-box

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

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

指定背景圖像的繪畫區(qū)域

屬性值，同上background-attachment

設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。

scroll背景圖片隨頁面的其余部分滾動。這是默認(rèn)fixed

背景圖像是固定的inherit

指定background-attachment的設(shè)置應(yīng)該從父元素繼承l(wèi)ocal

背景圖片隨滾動元素滾動background-image

指定要使用的一個(gè)或多個(gè)背景圖像 url('URL')圖像的URLnone

無圖像背景會顯示。這是默認(rèn)inherit

指定背景圖像應(yīng)該從父元素繼承第三十五頁，共四十九頁。7wxssborder(邊(Bian)框)屬性

說明

border

簡寫屬性，用于把針對四個(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上右下左邊框顏色第三十六頁，共四十九頁。7wxss文本(Ben)屬性（text）屬性說明語法(屬性值)color設(shè)置文本顏色direction設(shè)置文本方向。ltr:文本方向從左到右;rtl:文本方向從右到左letter-spacing設(shè)置字符間距l(xiāng)ine-height設(shè)置行高text-align對齊元素中的文本left：把文本排列到左邊。默認(rèn)值，由瀏覽器決定。right：把文本排列到右邊。center：把文本排列到中間。justify：實(shí)現(xiàn)兩端對齊文本效果。inherit:規(guī)定應(yīng)該從父元素繼承

text-align屬性的值。第三十七頁，共四十九頁。text-decoration向文本添加修飾underline定義文本下的一條線。overline定義文本上的一條線。line-through定義穿過文本下的一條線。blink定義閃爍的文本。text-indent縮進(jìn)元素中文本的首行text-shadow設(shè)置文本陰影text-shadow:h-shadowv-shadowblurcolor;h-shadow:水平陰影的位置,允許負(fù)值;v-shadow:垂直陰影的位置,允許負(fù)值;blur:模糊的距離;color:陰影的顏色text-transform控制元素中的字母capitalize文本中的每個(gè)單詞以大寫字母開頭。uppercase定義僅有大寫字母。lowercase定義無大寫字母，僅有小寫字母。unicode-bidi設(shè)置或返回文本是否被重寫

vertical-align設(shè)置元素的垂直對齊white-space設(shè)置元素中空白的處理方式word-spacing設(shè)置字間距第三十八頁，共四十九頁。8wxss字體屬(Shu)性（font）屬性說明語法(屬性值)font在一個(gè)聲明中設(shè)置所有字體屬性font:font-stylefont-variantfont-weightfont-size/line-heightfont-family(按順序)font-style指定文本的字體樣式normal默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。italic瀏覽器會顯示一個(gè)斜體的字體樣式。oblique瀏覽器會顯示一個(gè)傾斜的字體樣式。inherit規(guī)定應(yīng)該從父元素繼承字體樣式。font-variant以小型大寫字體或者正常字體顯示文本normal默認(rèn)值。瀏覽器會顯示一個(gè)標(biāo)準(zhǔn)的字體。small-caps瀏覽器會顯示小型大寫字母的字體。inherit規(guī)定應(yīng)該從父元素繼承

font-variant屬性的值。font-weight指定字體的粗細(xì)normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細(xì)的字符。inherit規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。font-size指定文本的字體大小smaller把

font-size設(shè)置為比父元素更小的尺寸。larger把

font-size設(shè)置為比父元素更大的尺寸。length把

font-size設(shè)置為一個(gè)固定的值。%把

font-size設(shè)置為基于父元素的一個(gè)百分比值。font-family指定文本的字體系列第三十九頁，共四十九頁。9wxssmargin(外(Wai)邊距)（margin）屬性說明語法(屬性值)margin在一個(gè)聲明中設(shè)置所有外邊距屬性。margin:10px5px15px20px;(上邊距，右邊距，下邊距，左邊距)margin-top設(shè)置元素的上外邊距。margin-right設(shè)置元素的右外邊距。margin-bottom設(shè)置元素的下外邊距。margin-left設(shè)置元素的左外邊距第四十頁，共四十九頁。10wxsspadding(填(Tian)充)（padding）屬性說明語法(屬性值)padding使用縮寫屬性設(shè)置在一個(gè)聲明中的所有填充屬性padding:10px5px15px20px;(上填充，右填充，下填充，左填充)padding-top設(shè)置元素的頂部填充。padding-right設(shè)置元素的右部填充padding-bottom設(shè)置元素的底部填充padding-left設(shè)置元素的左部填充第四十一頁，共四十九頁。CONTENTS01計(jì)算(Suan)器(布局)02計(jì)算器(字體和背景)03計(jì)算器(邏輯實(shí)現(xiàn))第四十二頁，共四十九頁。邏(Luo)輯實(shí)現(xiàn)輸入數(shù)字輸入運(yùn)算符號輸入正負(fù)符號輸入其他第四十三頁，共四十九頁。邏輯實(shí)(Shi)現(xiàn)輸入數(shù)字是否編輯模式輸入運(yùn)算符號是否編輯模式是否為進(jìn)行過計(jì)算當(dāng)前值是否是0算式顯示臨時(shí)結(jié)果計(jì)算第四十四頁，共四十九頁。01布(Bu)局02定位03定時(shí)器第四十五頁，共四十九頁。01外部點(diǎn)(Dian)實(shí)現(xiàn)02內(nèi)部圖片布局03抽獎(jiǎng)邏輯實(shí)現(xiàn)第四十六頁，共四十九頁。外部點(diǎn)實(shí)(Shi)現(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;}第四十七頁，共四十九頁。//圓(Yuan)點(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;leftCircl