《PHP程序設(shè)計(jì)與微信小程序案例教程》 課件 第2章 微信小程序前端開(kāi)發(fā)知識(shí)準(zhǔn)備

2.1微信小程序代碼框架介紹

微信小程序開(kāi)發(fā)2.1微信小程序代碼框架介紹1.微信小程序前端與網(wǎng)站前端網(wǎng)頁(yè)的相同點(diǎn)與區(qū)別

2.1微信小程序代碼框架介紹

1.微信小程序前端的開(kāi)發(fā)技術(shù)使用wxml、js、wxss三種開(kāi)發(fā)語(yǔ)言組合使用，見(jiàn)表3-2所示。表3-2微信小程序前端的開(kāi)發(fā)技術(shù)2.微信小程序前端的開(kāi)發(fā)技術(shù)2.1微信小程序代碼框架介紹3.微信小程序的文件類型

2.1微信小程序代碼框架介紹

4.小程序的目錄結(jié)構(gòu)新建一個(gè)小程序項(xiàng)目

2.1微信小程序代碼框架介紹

4.小程序的目錄結(jié)構(gòu)

2.2微信小程序JSON文件

主講人：譚麗君微信小程序開(kāi)發(fā)2.2微信小程序JSON文件JSON是一種數(shù)據(jù)格式，不是編程語(yǔ)言。Json文件的語(yǔ)法格式：包含在一個(gè)大括號(hào)中，通過(guò)key：value鍵值對(duì)的方式來(lái)描述數(shù)據(jù)。key必須放在一對(duì)雙引號(hào)中。最后特別強(qiáng)調(diào)，JSON文件中不能使用注釋。2.2微信小程序JSON文件（1）全局配置文件在項(xiàng)目的根目錄有一個(gè)

app.json，它是當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部tab等。2.2微信小程序JSON文件（2）頁(yè)面JSON文件在第2章新建項(xiàng)目目錄中，

pages/index和

pages/logs

目錄下的index.json和

logs.json文件，就是頁(yè)面JSON文件。在頁(yè)面JSON文件中可以設(shè)置頂部導(dǎo)航欄的背景顏色、文字。主講人：譚麗君2.3微信小程序代碼WXML微信小程序開(kāi)發(fā)2.3.1WXML基本語(yǔ)法WXML是從HTML（超文本標(biāo)簽語(yǔ)言）衍生而來(lái)的一種在小程序前端頁(yè)面使用的語(yǔ)言，WXML仍然是標(biāo)簽語(yǔ)言，使用標(biāo)記標(biāo)簽來(lái)描述頁(yè)面的結(jié)構(gòu)，頁(yè)面內(nèi)容寫在標(biāo)簽內(nèi)部.2.3.1WXML基本語(yǔ)法雙標(biāo)簽：成對(duì)出現(xiàn)的標(biāo)簽。格式：<關(guān)鍵詞>內(nèi)容</關(guān)鍵詞>例如：視圖容器<view></view>單標(biāo)簽：不成對(duì)出現(xiàn)的標(biāo)簽。格式：<關(guān)鍵詞/>例如：輸入框<input/>1.標(biāo)簽：標(biāo)簽由一對(duì)尖括號(hào)包圍關(guān)鍵詞。2.3.1WXML基本語(yǔ)法通用屬性大部分標(biāo)簽都有的屬性。例如：class、id、style等專用屬性不同標(biāo)簽有自己獨(dú)特屬性。例如：<inputpassword="true"/>password作用：輸入框中輸入內(nèi)容以小圓點(diǎn)顯示2.標(biāo)簽屬性:給組件設(shè)置參數(shù)用的。2.3.1WXML基本語(yǔ)法3.常用組件2.3.2制作第一個(gè)小程序"pages":["pages/test/test","pages/index/index","pages/logs/logs"],<view>第一個(gè)小程序</view>

<view>Hello

World</view>

<inputplaceholder="請(qǐng)輸入姓名"/>新建一個(gè)微信小程序運(yùn)行效果步驟一app.json文件步驟二test.wxml文件2.3.3制作“景區(qū)名片”頁(yè)面1.“景區(qū)名片”頁(yè)面框架大框<viewclass="card">大標(biāo)題框<viewclass="big-title">圖片<image>內(nèi)容框<viewclass="content">小標(biāo)題框<viewclass="small-title">段落框<viewclass="dl">2.3.3制作“景區(qū)名片”頁(yè)面1.“景區(qū)名片”頁(yè)面代碼"pages":["pages/jqmp//jqmp","pages/index/index","pages/logs/logs"],<viewclass="card"> <viewclass="big-title">荔波小七孔</view> <imagesrc="../../images/lb.jpg"></image> <viewclass="content"> <viewclass="small-title">簡(jiǎn)介</view> <viewclass="dl">小七孔風(fēng)景區(qū)位于貴州省荔波縣城南部30余公里的群峰之中，景區(qū)全長(zhǎng)7公里，面積約10平方公里，有百多個(gè)游覽景點(diǎn)。是集山、水、林、洞、湖、瀑為一體的原始奇景。1988年被列為國(guó)家級(jí)自然保護(hù)區(qū)。</view> </view> </view>步驟一app.json文件步驟二jqmp.wxml文件2.3.4制作“比較成績(jī)”頁(yè)面1.“比較成績(jī)”頁(yè)面框架框框按鈕框框框按鈕框文本輸入框文本輸入框文本2.3.4制作“比較成績(jī)”頁(yè)面

2.“比較成績(jī)”頁(yè)面WXML代碼<view><text>請(qǐng)輸入語(yǔ)文成績(jī)</text><inputtype="number"/></view><view><text>請(qǐng)輸入數(shù)學(xué)成績(jī)</text><inputtype="number"/></view><button>比較成績(jī)</button><view><text>比較結(jié)果：</text></view>{

"pages":[

"pages/bjcj/bjcj","pages/index/index","pages/logs/logs"

]}步驟一app.json步驟二bjcj.wxml

2.3.5數(shù)據(jù)綁定

1.數(shù)據(jù)綁定：就是通過(guò)雙重花括號(hào){{變量名}}的語(yǔ)法格式，將一個(gè)變量綁定到頁(yè)面上。小程序上的大部分?jǐn)?shù)據(jù)都是后端服務(wù)器返回給小程序的，也就是說(shuō)這些數(shù)據(jù)是動(dòng)態(tài)的，每次加載小程序都要先訪問(wèn)服務(wù)器，服務(wù)器處理數(shù)據(jù)后，再返回小程序顯示數(shù)據(jù)綁定

2.3.5數(shù)據(jù)綁定

2.數(shù)據(jù)綁定的操作方法wxml文件js文件12在標(biāo)簽內(nèi)容或者屬性需要數(shù)據(jù)綁定的地方寫入{{變量名}}對(duì)該變量進(jìn)行定義，把變量的值放在下面所示代碼data:{}中。

2.3.5數(shù)據(jù)綁定

3.數(shù)據(jù)綁定示例：<view>{{name}}</view>index.js代碼Page({/*頁(yè)面的初始數(shù)據(jù)*/data:{name:'貴州黃果樹(shù)'}})①index.wxml②index.js運(yùn)行結(jié)果

2.3.5數(shù)據(jù)綁定

4.數(shù)據(jù)綁定{{}}的使用位置：wxml中數(shù)據(jù)綁定的位置除了放在內(nèi)容中，還可以放在其它位置。

2.3.6列表渲染

列表渲染：在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。wx:for是標(biāo)簽的一種特殊屬性，稱為控制屬性。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，步驟一index.wxml默認(rèn)數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item。步驟二index.js運(yùn)行效果

2.3.7制作“輪播圖”

一、輪播組件二、swiper常用屬性<swiper></swiper><swiper-item>...</swiper-item>

<swiper-item>...</swiper-item>父級(jí)兒子級(jí)<swiper

indicator-dots="true“autoplay="true"

interval="1000"

circular="true">

2.3.7制作“輪播圖”

步驟1：App.json文件步驟2：在項(xiàng)目根目錄下創(chuàng)建images文件夾，粘貼4張圖片

2.3.7制作“輪播圖”

步驟3：lx.wxml文件

2.3.7制作“輪播圖”

使用列表渲染寫輪播組件注意：1.wx:for寫在需要循環(huán)的組件里2.item是數(shù)組里每一項(xiàng)3.注意在wxml中數(shù)組和變量一定要寫在{{}}里。步驟1：lx.wxml文件步驟2：lx.js文件2.3.8條件渲染在wxml中，使用wx:if=“{{條件

}}"來(lái)判斷是否需要渲染該組件。示例：成績(jī)大于80，顯示良好，否則大于60，顯示及格<view

wx:if="{{cj>80}}">良好</view><view

wx:elif="{{cj>60}}">及格</view>Page({/***頁(yè)面的初始數(shù)據(jù)*/data:{cj:70},步驟1：lx.wxml文件步驟2：lx.js文件主講人：譚麗君2.4微信小程序WXSS微信小程序開(kāi)發(fā)

2.4

微信小程序wxss

全局樣式app.wxss對(duì)當(dāng)前小程序的所有頁(yè)面樣式生效。頁(yè)面樣式:文件名.wxss

對(duì)當(dāng)前頁(yè)面樣式生效。例如index.wxss12

選擇器{

樣式屬性名：屬性值；

樣式屬性名：屬性值；...}

2.4.1WXSS的基本語(yǔ)法

WXSS是樣式語(yǔ)言，用于描述WXML的組件樣式.WXSS的語(yǔ)法格式選擇器就是要設(shè)置樣式的元素。.yw{width:300rpx;height:100rpx;background:red;}示例：給class類名為yw的組件，設(shè)置樣式:寬度300rpx、高度100rpx、背景色為紅色。<view

class="yw">語(yǔ)文成績(jī)</view><view>數(shù)學(xué)成績(jī)</view><view>英語(yǔ)成績(jī)</view>index.wxss文件index.wxml文件12

2.4.1WXSS的基本語(yǔ)法

2.4.2WXSS選擇器

1.標(biāo)簽選擇器格式：標(biāo)簽名{樣式屬性名：屬性值;}2.類選擇器格式：.類名{樣式屬性名：屬性值;}3.id選擇器格式：#id名{樣式屬性名：屬性值;}

2.4.2WXSS選擇器

4.并集選擇器格式：選擇器1，選擇器2，...選擇器n{樣式屬性名：屬性值;}5.后代選擇器格式：祖先后代{樣式屬性名：屬性值;}

2.4.3WXSS常用樣式

1.字號(hào)設(shè)置font-size格式選擇器{font-size:合法的尺寸單位;}rpx（responsivepixel）單位:可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。rpx單位是wxml提出的一個(gè)新尺寸單位。2.字體加粗font-weight格式選擇器{font-weight:字體粗度值;}

2.4.3WXSS常用樣式

3.文本顏色color格式選擇器{color:顏色值;}4．行高line-height格式選擇器{line-height:值;}

2.4.3WXSS常用樣式

5．首行縮進(jìn)text-indent格式：選擇器{text-indent:尺寸單位;}6.水平對(duì)齊方式text-align格式：選擇器{text-align:left|right|center|justif}使用em作為首行縮進(jìn)的尺寸單位，1em就表示一個(gè)漢字的長(zhǎng)度。

2.4.3WXSS常用樣式

7.元素的大小格式選擇器{width:數(shù)值;height:數(shù)值;}8.背景顏色background-color格式選擇器{background-color:顏色;}

2.4.4盒子模型盒子包括：外邊距(margin)+邊框(border)+內(nèi)邊距(padding)+元素內(nèi)容。內(nèi)容上外邊距上內(nèi)邊距下內(nèi)邊距下外邊距右內(nèi)邊距右外邊距左內(nèi)邊距左外邊距右邊框線左邊框線下邊框線上邊框線

2.4.4盒子模型1.邊框

2.4.4盒子模型2.邊框圓角border-radius

2.4.4盒子模型3.padding內(nèi)邊距

2.4.4盒子模型4.margin外邊距

2.4.4盒子模型5.box-shadow邊框陰影選擇器{box-shadow:h-shadowv-shadowblurspreadcolor;}

2.4.5彈性布局flex（flexiblebox）彈性布局盒模型。1.容器：使用display:flex樣式的元素，稱為flex容器。2.項(xiàng)目：它的所有子元素自動(dòng)成為容器成員，稱為flex項(xiàng)目。3.兩根軸：容器默認(rèn)存在主軸和交叉軸。它們是垂直關(guān)系。（1）容器屬性

2.4.5彈性布局(2)項(xiàng)目屬性

2.4.5彈性布局index.wxmlindex.jsindex.wxss運(yùn)行效果

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁(yè)面框架大框<viewclass="card">大標(biāo)題框<viewclass="big-title">圖片<image>內(nèi)容框<viewclass="content">小標(biāo)題框<viewclass="small-title">段落框<viewclass="dl">

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁(yè)面框架嵌套步驟一，大框?qū)?yīng)的WXSS樣式代碼如下圖

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁(yè)面框架嵌套步驟二，加入大標(biāo)題框、圖片、內(nèi)容框后對(duì)應(yīng)的WXSS代碼如下圖

2.4.6制作“景區(qū)名片”樣式“景區(qū)名片”頁(yè)面框架嵌套步驟三，加入小標(biāo)題框和段落框后，對(duì)應(yīng)的WXSS代碼如下圖

2.4.7制作“比較成績(jī)”樣式“比較成績(jī)”頁(yè)面框架嵌套

2.4.7制作“比較成績(jī)”樣式“比較成績(jī)”頁(yè)面框架嵌套步驟一，對(duì)應(yīng)的WXSS樣式代碼

2.4.7制作“比較成績(jī)”樣式“比較成績(jī)”頁(yè)面框架嵌套步驟二，對(duì)應(yīng)的WXSS樣式代碼主講人：譚麗君2.5微信小程序JS微信小程序開(kāi)發(fā)

2.5.1.1JS變量、數(shù)據(jù)類型

1.變量JS是區(qū)分大小寫的,變量名,函數(shù),關(guān)鍵字都要區(qū)分大小寫2.小程序變量定義var變量名=值在函數(shù)里面進(jìn)行變量定義

data:{變量名:值,數(shù)組名:[]，對(duì)象名：{}}在data里定義變量數(shù)組數(shù)組

[,,,]數(shù)組就是存放一組數(shù)據(jù)。讀取數(shù)組第一個(gè)元素?cái)?shù)組名[0]讀取數(shù)組第二個(gè)元素?cái)?shù)組名[1]面向過(guò)程和面向?qū)ο蟮膮^(qū)別面向?qū)ο笏枷雽?duì)象名.函數(shù)名()大象放冰箱：如果是用面向?qū)ο缶幊蹋罕鋵?duì)象.裝大象函數(shù)（）面向過(guò)程思想第1步做什么第2步做什么第3步做什么大象放冰箱：如果是用面向過(guò)程編程：第1步：把冰箱門打開(kāi)，第2步：把大象推進(jìn)去，第3步：把冰箱門上。對(duì)象書寫格式、對(duì)象獲取屬性、對(duì)象調(diào)用函數(shù)的格式對(duì)象要調(diào)用函數(shù)

格式對(duì)象名.函數(shù)名()對(duì)象書寫格式對(duì)象

{屬性名：值，屬性名：值，屬性名：值}對(duì)象獲取屬性

格式對(duì)象名.屬性名()函數(shù)就是方法

2.5.1.1JS變量、數(shù)據(jù)類型

示例：新建一個(gè)小程序，創(chuàng)建xs頁(yè)面，打開(kāi)xs.js文件中，在data中name初始化值”劉紅”，在onLoad函數(shù)中定義一個(gè)變量age=18，并打印輸出這2個(gè)變量。"pages":["pages/xs/xs","pages/index/index","pages/logs/logs"],Page({data:{name:"劉紅"},onLoad:function(options){varage=18console.log()console.log(age)},打印輸出用this.data來(lái)訪問(wèn)Page頁(yè)面中data里的數(shù)據(jù)打印輸出結(jié)果app.jsonxs.js2.數(shù)據(jù)類型stringnumberboolean數(shù)組對(duì)象

2.5.1.1JS變量、數(shù)據(jù)類型

數(shù)組名：[值，...值]對(duì)象名：{屬性名:值，屬性名:值}包括整數(shù)或小數(shù)""或''包圍的truefalse2個(gè)值數(shù)組里面存放了一組數(shù)據(jù)。數(shù)組的第一個(gè)元素下標(biāo)為0.對(duì)象由一對(duì)花括號(hào)包含。訪問(wèn)對(duì)象屬性有2種方法：方法1：對(duì)象名.屬性名;方法2：對(duì)象名[“屬性名”]JS函數(shù)書寫格式JS函數(shù)書寫有3種格式：1.標(biāo)準(zhǔn)格式

函數(shù)名：function(){

一段代碼}2.匿名函數(shù)3.箭頭函數(shù)

2.5.1.1JS變量、數(shù)據(jù)類型

示例：在xs.js文件data中初始化數(shù)組jzfp，并打印輸出Page({data:{jzfp:["劉紅","王小","李明"]},onLoad:function(options){console.log(this.data.jzfp)},xs.js

2.5.1.1JS變量、數(shù)據(jù)類型

1示例：在xs.js中,在data中初始化對(duì)象xs，并打印輸出Page({data:{xs:{name:"小明",sex:"男",age:12,height:180}},onLoad:function(options){console.log(this.data.xs)}xs.js2.5.2微信小程序JS文件app.js文件是項(xiàng)目的入口文件。整個(gè)小程序必須有，并且只有一個(gè)App()，否則會(huì)出現(xiàn)錯(cuò)誤。頁(yè)面邏輯JS文件:文件名.js全局邏輯app.js對(duì)于小程序中的每個(gè)頁(yè)面，都需要在頁(yè)面對(duì)應(yīng)的js文件中進(jìn)行注冊(cè)，指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。2.5.2微信小程序JS文件頁(yè)面邏輯JS文件2.5.2微信小程序JS文件頁(yè)面邏輯JS文件1.Page方法：生成一個(gè)頁(yè)面,必須有,否則會(huì)出錯(cuò)。2.Page中data對(duì)象，主要存放該頁(yè)面的數(shù)據(jù)，Page({data:{

}})2.5.2微信小程序JS文件頁(yè)面邏輯JS文件3.Page中函數(shù)（1）Page中小程序的生命周期函數(shù)在小程序中每個(gè)頁(yè)面都存在著一條生命時(shí)間線，包括代碼加載>頁(yè)面渲染>顯示到頁(yè)面上(不同頁(yè)面之前切換時(shí)，就會(huì)產(chǎn)生隱藏)-->頁(yè)面的銷毀（關(guān)閉小程序），這樣一個(gè)流程叫做生命周期。就像花的生命周期一樣，從種子發(fā)芽>開(kāi)花>結(jié)果實(shí)>凋謝。頁(yè)面生命周期函數(shù)及功能2.5.2微信小程序JS文件頁(yè)面邏輯JS文件3.Page中函數(shù)（2）Page中自定義函數(shù)函數(shù)名:function(參數(shù)){//函數(shù)內(nèi)容}2.5.2微信小程序JS文件4.事件事件綁定在組件上，當(dāng)觸發(fā)事件時(shí)，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。事件對(duì)象可以攜帶額外信息，如id,dataset。事件響應(yīng)的操作步驟步驟:1在wxml文件中，給組件綁定一個(gè)事件處理函數(shù)。<標(biāo)簽事件名=“函數(shù)名”>步驟2:在對(duì)應(yīng)的js文件中，寫上相應(yīng)的事件處理函數(shù)，注意函數(shù)名要和wxml中綁定的函數(shù)名相同。

Page({函數(shù)名:function(參數(shù)){//函數(shù)內(nèi)容}})2.5.2微信小程序JS文件4.事件示例在xs.wxml文件中view組件上綁定一個(gè)單擊事件tj，觸發(fā)tj事件后，在控制臺(tái)輸出view組件傳過(guò)來(lái)的數(shù)據(jù)。步驟1:xs.wxml<viewid="box"data-km="Python"bindtap="tj">點(diǎn)擊</view>步驟2:xs.jsPage({tj:function(e){console.log(e)

console.log(e.target.id)console.log(e.target.dataset.km)}})e：觸發(fā)當(dāng)前事件的組件。自定義數(shù)據(jù)屬性data-名字打印觸發(fā)當(dāng)前事件的組件的屬性。打印觸發(fā)當(dāng)前事件的組件id值。打印觸發(fā)當(dāng)前事件的組件中自定義數(shù)據(jù)km值。2.5.2微信小程序JS文件console.log(e)打印出來(lái)的內(nèi)容如下圖所示：2.5.3微信小程序JS中的數(shù)據(jù)處理1.如何訪問(wèn)Page中data里的數(shù)據(jù)和Page中函數(shù)（1）在函數(shù)中，可以直接使用this來(lái)訪問(wèn)Page頁(yè)面中data里的數(shù)據(jù)和Page里的函數(shù)。在小程序中，this表示當(dāng)前對(duì)象的一個(gè)引用，此時(shí)this所指向的對(duì)象為全局對(duì)象，也就是這個(gè)頁(yè)面。this.data.變量名this.函數(shù)名格式如下2.5.3微信小程序JS中的數(shù)據(jù)處理（2）在API中，訪問(wèn)Page中data里的數(shù)據(jù)和Page里函數(shù)的操作步驟如下，什么是API？我們?cè)?.5.4中進(jìn)行詳細(xì)講解。varthat=this步驟2：在API里面用that來(lái)調(diào)用Page中data里的數(shù)據(jù)和Page里函數(shù)。步驟1：在API的外面，要先保存當(dāng)前頁(yè)面的this。that.data.變量名that.函數(shù)名2.5.3微信小程序JS中的數(shù)據(jù)處理示例：JS中數(shù)據(jù)處理在index.js中輸入以下代碼（1）在Page中data里定義了name、sex、age變量的值。（2）在Page中定義一個(gè)函數(shù)new，打印輸出“新函數(shù)”3個(gè)字。（3）在onLoad函數(shù)中，直接用this調(diào)用data數(shù)組中變量。（4）在onLoad函數(shù)中，直接用this調(diào)用new函數(shù)。Page({/***頁(yè)面的初始數(shù)據(jù)*/data:{name:"劉紅",sex:"女",age:18},new:function(){console.log("新函數(shù)")},/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad:function(options){console.log(this.data)console.log()console.log(this.data.sex)console.log(this.data.age)console.log(this.new)}})index.js運(yùn)行結(jié)果2.5.3微信小程序JS中的數(shù)據(jù)處理2.如何更新Page中data里的數(shù)據(jù)用this.setData()方法，修改的值才會(huì)在頁(yè)面中顯示，否則頁(yè)面顯示的是更改之前的值。this.setData({變量名:新的值})語(yǔ)法格式如下2.5.3微信小程序JS中的數(shù)據(jù)處理步驟1：在xs.wxml中輸入如下代碼<view>{{name}}</view>示例步驟2：在xs.js中輸入如下代碼Page({data:{name:""},new:function(){="王小"},/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad:function(options){this.setData({name:"李藝"})this.new()}

)}運(yùn)行結(jié)果2.5.3微信小程序JS中的數(shù)據(jù)處理3.不同頁(yè)面之間的數(shù)據(jù)傳遞（2）全局?jǐn)?shù)據(jù)在不同頁(yè)面之前傳遞（1）參數(shù)傳遞2種方法頁(yè)面跳轉(zhuǎn)過(guò)程中進(jìn)行傳遞參數(shù)，參數(shù)傳遞在后面的章節(jié)中講解首先把數(shù)據(jù)在全局?jǐn)?shù)據(jù)中進(jìn)行保存，然后每個(gè)頁(yè)面從全局?jǐn)?shù)據(jù)中讀取。步驟2：在頁(yè)面js文件中讀取全局?jǐn)?shù)據(jù)，格式如下getApp().globalData.變量名步驟1：在app.js文件中保存全局?jǐn)?shù)據(jù)，格式如下App({globalData:{userInfo:null//把全局?jǐn)?shù)據(jù)放在globalData對(duì)象里。}})2.5.4微信小程序API1.API的定義API的全稱是ApplicationProgrammingInterface，即應(yīng)用程序編程接口。API是一些預(yù)先定義的函數(shù)或功能模塊。例如：微信小程序提供的獲取用戶信息、本地存儲(chǔ)、支付功能、打開(kāi)微信掃一掃。開(kāi)發(fā)人員可以直接使用這些功能模塊API，不需要知道里面代碼是怎么實(shí)現(xiàn)的。API有同步和異步2種，用的多是異步，因此，本教材重點(diǎn)講異步API。2.5.4微信小程序API2.調(diào)用異步API格式如下wx.API名稱({

屬性名：值,屬性名：值success函數(shù)fail函數(shù)complete函數(shù)

})success為接口調(diào)用成功的回調(diào)函數(shù)，fail為接口調(diào)用失敗的回調(diào)函數(shù)，complete為接口調(diào)用結(jié)束的回調(diào)函數(shù)，無(wú)論調(diào)用成功或者失敗，都會(huì)執(zhí)行complete中的代碼。Success、fail、complete這三個(gè)回調(diào)函數(shù)調(diào)用時(shí)會(huì)傳入一個(gè)Object類型參數(shù)，包含以下字段，回調(diào)函數(shù)的參數(shù)見(jiàn)下表調(diào)用函數(shù)函數(shù)名（參數(shù)

）調(diào)用普通函數(shù)調(diào)用API函數(shù)wx.函數(shù)名（{}）示例wx.showModal({title:"",content:"",success(res){if(res.confirm){console.log("我要支付")}elseif(res.cancel){console.log("我不想買了")}})2.5.4微信小程序API

微信登錄的API，獲得與用戶身份有關(guān)的一些信息，如頭像、名稱等。wx.login({success(res){//api調(diào)用成功執(zhí)行的代碼},fail(res){console.log(res.errMsg)//api調(diào)用失敗執(zhí)行的代碼},complete(res){//api調(diào)用完畢執(zhí)行的代碼})示例2.5.5常用API介紹1.顯示消息提示框格式：wx.showToast(Objectobject)wx.showToast中參數(shù)說(shuō)明2.5.5常用API介紹示例

在xs.js文件中輸入以下代碼//pages/index/index.jsPage({/***頁(yè)面的初始數(shù)據(jù)*/data:{

},/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad:function(options){wx.showToast({title:'成功',icon:'success',duration:9000})}})運(yùn)行效果2.5.5常用API介紹2.顯示模態(tài)對(duì)話框格式：wx.showModal(Objectobject)顯示模態(tài)對(duì)話框參數(shù)屬性類型說(shuō)明titlestring提示的標(biāo)題contentstring提示的內(nèi)容object.success回調(diào)函數(shù)中參數(shù)說(shuō)明示例在xs.js中輸入以下代碼Page({onLoad:function(options){wx.showModal({title:'提示',content:'這是一個(gè)模態(tài)彈窗',success(res){if(res.confirm){console.log('用戶點(diǎn)擊確定')}elseif(res.cancel){console.log('用戶點(diǎn)擊取消')}}})}})代碼運(yùn)行效果2.5.5常用API介紹3.顯示加載

提示框格式：wx.showLoading(Objectobject)如果要關(guān)閉提示框，需主動(dòng)調(diào)用wx.hideLoading才能關(guān)閉?？梢栽O(shè)置定時(shí)器進(jìn)行定時(shí)關(guān)閉。示例

在xs.js文件中輸入以下代碼，顯示加載中提示框，3秒后自動(dòng)關(guān)閉加載中提示框Page({onLoad:function(options){wx.showLoading({title:'加載中',})

setTimeout(function(){wx.hideLoading()},3000)

}

})運(yùn)行效果圖setTimeout倒計(jì)時(shí)setTimeout(函數(shù)（）,毫秒數(shù))setTimeout(function（）{console.log(“去學(xué)校廣場(chǎng)集合”)},5000)2.5.5常用API介紹二、頁(yè)面路由API：就是小程序頁(yè)面之前的跳轉(zhuǎn)。1.wx.relaunch()功能是關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。示例：wx.reLaunch({url:'../index/index'})url參數(shù)的值是字符串型，是必填選，標(biāo)明需要跳轉(zhuǎn)的頁(yè)面路徑。2.wx.redirectTo()功能是關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面示例：wx.redirectTo({url:''../index/index'})url參數(shù)的值是字符串型，是必填選，標(biāo)明需要跳轉(zhuǎn)的頁(yè)面路徑。2.5.5常用API介紹3.wx.navigateTo()功能是保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面示例：wx.navigateTo({url:'../index/index'})url參數(shù)的值是字符串型，是必填選，標(biāo)明需要跳轉(zhuǎn)的頁(yè)面路徑。主講人：譚麗君2.6制作“比較成績(jī)”js代碼微信小程序開(kāi)發(fā)

2.6制作“比較成績(jī)”js代碼

1.bjcj.wxml文件中給輸入框添加bindchange事件、按鈕添加bindtap事件，給最后一個(gè)view組件內(nèi)容數(shù)據(jù)綁定{{result}}?？蚩虬粹o框文本輸入框文本輸入框文本2

<inputbindchange="yw"></input>13

<b