《PHP程序設(shè)計與微信小程序案例教程》 課件匯 譚麗君 1.微信小程序入門 -4.2 制作“菜單”頁面

第1章微信小程序入門微信小程序開發(fā)1.1什么是微信小程序微信小程序（WechatMiniProgram），是一種不需要下載安裝即可使用的應(yīng)用，用戶掃一掃或搜一下即可打開應(yīng)用。微型小程序應(yīng)用的領(lǐng)域非常多，包括教育、媒體、交通、房地產(chǎn)、生活服務(wù)，旅游、電商、餐飲，民政民生，科技等多個領(lǐng)域。微信小程序以快捷、低成本優(yōu)勢，為電商行業(yè)實現(xiàn)了更多的盈利，為消費者帶來更好的服務(wù)。1.2微信小程序開發(fā)流程1.微信小程序運行流程1.2微信小程序開發(fā)流程

2.微信小程序開發(fā)流程打開微信公眾平臺官網(wǎng)依次完成賬號信息、郵箱激活、信息登記選擇注冊的賬號類型：小程序1.3注冊微信小程序賬號1.注冊微信小程序賬號123

2.查找自己的小程序id和AppSecret登錄微信公眾平臺官網(wǎng)在左側(cè)菜單中單擊開發(fā)->開發(fā)管理，在中間窗口單擊開發(fā)設(shè)置。1.3注冊微信小程序賬號小程序id即小程序的身份證號，AppSecret即小程序的密鑰。1.4微信開發(fā)者工具1.下載微信開發(fā)者工具微信開發(fā)者工具是微信小程序?qū)Ｓ瞄_發(fā)集成環(huán)境。代碼寫在微信開發(fā)者工具中，可直接看到代碼運行的結(jié)果、直接進行調(diào)試、上傳。打開微信公眾平臺網(wǎng)站單擊“工具”-->“下載”單擊小程序開發(fā)文檔下載步驟1.5新建和導(dǎo)入項目1.新建項目打開微信開發(fā)者工具單擊管理-->單擊+號，創(chuàng)建新項目。單擊目錄（提前創(chuàng)建一個空目錄）-->粘貼自己的AppID-->單擊不使用云服務(wù)-->單擊新建。1.5微信開發(fā)者工具2.導(dǎo)入項目“單擊導(dǎo)入”選擇項目所在的文件夾單擊新建1.6微信開發(fā)者工具的使用3.微信開發(fā)者工具界面（1）菜單欄項目：用于新建項目、關(guān)閉項目、導(dǎo)入項目、查看所有項目。文件：用于新建、保存、關(guān)閉文件。編輯：用于查找替換編輯代碼、格式化代碼。工具：用于訪問一些輔助工具。界面：用于顯示和隱藏開發(fā)者界面的各個窗口。設(shè)置：用于設(shè)置外觀、快捷鍵、編輯器等。微信開發(fā)者工具：用于切換賬號、更換開發(fā)模式、調(diào)試等操作。1.6微信開發(fā)者工具（3）模擬器可以模擬手機環(huán)境，在模擬器的底部狀態(tài)欄會顯示當(dāng)前的頁面路徑。（4）編輯器編輯器包括左右兩部分。左側(cè)用于瀏覽項目目錄結(jié)構(gòu)，單擊某個文件，在右側(cè)對這個文件進行編寫代碼。（5）調(diào)試器：對小程序序進行調(diào)試。Console:“控制臺”面板，用于輸出代碼中console.log()的調(diào)試信息，也可以直接編寫代碼執(zhí)行。Sources:“源代碼”面板，可以查看或編輯源代碼，并支持代碼調(diào)試。Wxml:

Wxml面板，查看和調(diào)試WXML和WXSS。1.6微信開發(fā)者工具（2）工具欄個人中心：左側(cè)第一個按鈕，顯示當(dāng)前登錄用戶的頭像和用戶名。模擬器、編輯器和調(diào)試器按鈕：用于切換顯示或隱藏對應(yīng)的工具。編譯下拉菜單：默認(rèn)為普通編譯。可以添加其它編譯模式。編譯：編寫小程序代碼后，要單擊“編譯”按鈕，或者按下ctrl+s快捷鍵，才能在模擬器看到顯示效果，在調(diào)試器中進行調(diào)試。預(yù)覽：單擊該按鈕，會生成一個二維碼，用手機微信掃一掃，可在手機微信中預(yù)覽小程序的實際運行效果。真機調(diào)試：通過網(wǎng)絡(luò)連接對手機上運行的小程序進行調(diào)試，可以在手機上更好地定位和查找出現(xiàn)的問題。切后臺：模擬在手機中小程序切換后臺的效果。清緩存：清除數(shù)據(jù)緩存或文件緩存。上傳：當(dāng)小程序代碼調(diào)試成功后，單擊上傳按鈕，可以將代碼上傳到小程序管理后臺，做為體驗版本。2.常用操作1.6微信開發(fā)者工具（1）搜索：打開一個代碼文件，按下快捷鍵CTRL+F，彈出搜索框，輸入需要查找的內(nèi)容。搜索結(jié)果會以特殊顏色標(biāo)識出來。如下圖2-19所示。（2）替換：在搜索框中，單擊查找框左邊箭頭，會顯示替換框，在替換中輸入替換的內(nèi)容，進行替換，2.常用操作1.6微信開發(fā)者工具2.常用操作1.6微信開發(fā)者工具（3）撤消：可以用CTRL+Z撤銷最近的操作。（4）格式化代碼：對代碼進行格式調(diào)整，查看代碼更直觀，不會有格式混亂?？旖萱I是ALT+SHIFT+F。（5）清除緩存啟動小程序時，會保存一些登錄信息，如果后面需要重新修改這些登錄信息并調(diào)試，就需要清除緩存。（6）小程序的調(diào)試方法Console:編寫完代碼，單擊工具欄中編譯，或者ctrl+s,在調(diào)試區(qū)的Console中可以看到打印輸出的信息。2.常用操作1.6微信開發(fā)者工具console調(diào)試窗口2.常用操作1.6微信開發(fā)者工具（7）小程序開發(fā)者文檔是微信小程序的開發(fā)教程。

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

主講人：譚麗君微信小程序開發(fā)2.1微信小程序代碼框架介紹1.微信小程序前端與網(wǎng)站前端網(wǎng)頁的相同點與區(qū)別

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

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

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

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

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

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

2.2微信小程序JSON文件

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

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

pages/index和

pages/logs

目錄下的index.json和

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

<view>Hello

World</view>

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

2.“比較成績”頁面WXML代碼<view><text>請輸入語文成績</text><inputtype="number"/></view><view><text>請輸入數(shù)學(xué)成績</text><inputtype="number"/></view><button>比較成績</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ù)綁定：就是通過雙重花括號{{變量名}}的語法格式，將一個變量綁定到頁面上。小程序上的大部分?jǐn)?shù)據(jù)都是后端服務(wù)器返回給小程序的，也就是說這些數(shù)據(jù)是動態(tài)的，每次加載小程序都要先訪問服務(wù)器，服務(wù)器處理數(shù)據(jù)后，再返回小程序顯示數(shù)據(jù)綁定

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

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

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

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

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

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

2.3.6列表渲染

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

2.3.7制作“輪播圖”

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

<swiper-item>...</swiper-item>父級兒子級<swiper

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

interval="1000"

circular="true">

2.3.7制作“輪播圖”

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

2.3.7制作“輪播圖”

步驟3：lx.wxml文件

2.3.7制作“輪播圖”

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

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

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

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

2.4

微信小程序wxss

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

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

選擇器{

樣式屬性名：屬性值；

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

2.4.1WXSS的基本語法

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

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

2.4.1WXSS的基本語法

2.4.2WXSS選擇器

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

2.4.2WXSS選擇器

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

2.4.3WXSS常用樣式

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

2.4.3WXSS常用樣式

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

2.4.3WXSS常用樣式

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

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.項目：它的所有子元素自動成為容器成員，稱為flex項目。3.兩根軸：容器默認(rèn)存在主軸和交叉軸。它們是垂直關(guān)系。（1）容器屬性

2.4.5彈性布局(2)項目屬性

2.4.5彈性布局index.wxmlindex.jsindex.wxss運行效果

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

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

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

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

2.4.7制作“比較成績”樣式“比較成績”頁面框架嵌套

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

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

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

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

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

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

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

{屬性名：值，屬性名：值，屬性名：值}對象獲取屬性

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

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

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

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

數(shù)組名：[值，...值]對象名：{屬性名:值，屬性名:值}包括整數(shù)或小數(shù)""或''包圍的truefalse2個值數(shù)組里面存放了一組數(shù)據(jù)。數(shù)組的第一個元素下標(biāo)為0.對象由一對花括號包含。訪問對象屬性有2種方法：方法1：對象名.屬性名;方法2：對象名[“屬性名”]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中初始化對象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文件是項目的入口文件。整個小程序必須有，并且只有一個App()，否則會出現(xiàn)錯誤。頁面邏輯JS文件:文件名.js全局邏輯app.js對于小程序中的每個頁面，都需要在頁面對應(yīng)的js文件中進行注冊，指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。2.5.2微信小程序JS文件頁面邏輯JS文件2.5.2微信小程序JS文件頁面邏輯JS文件1.Page方法：生成一個頁面,必須有,否則會出錯。2.Page中data對象，主要存放該頁面的數(shù)據(jù)，Page({data:{

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

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

)}運行結(jié)果2.5.3微信小程序JS中的數(shù)據(jù)處理3.不同頁面之間的數(shù)據(jù)傳遞（2）全局?jǐn)?shù)據(jù)在不同頁面之前傳遞（1）參數(shù)傳遞2種方法頁面跳轉(zhuǎn)過程中進行傳遞參數(shù)，參數(shù)傳遞在后面的章節(jié)中講解首先把數(shù)據(jù)在全局?jǐn)?shù)據(jù)中進行保存，然后每個頁面從全局?jǐn)?shù)據(jù)中讀取。步驟2：在頁面js文件中讀取全局?jǐn)?shù)據(jù)，格式如下getApp().globalData.變量名步驟1：在app.js文件中保存全局?jǐn)?shù)據(jù)，格式如下App({globalData:{userInfo:null//把全局?jǐn)?shù)據(jù)放在globalData對象里。}})2.5.4微信小程序API1.API的定義API的全稱是ApplicationProgrammingInterface，即應(yīng)用程序編程接口。API是一些預(yù)先定義的函數(shù)或功能模塊。例如：微信小程序提供的獲取用戶信息、本地存儲、支付功能、打開微信掃一掃。開發(fā)人員可以直接使用這些功能模塊API，不需要知道里面代碼是怎么實現(xiàn)的。API有同步和異步2種，用的多是異步，因此，本教材重點講異步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ù)，無論調(diào)用成功或者失敗，都會執(zhí)行complete中的代碼。Success、fail、complete這三個回調(diào)函數(shù)調(diào)用時會傳入一個Object類型參數(shù)，包含以下字段，回調(diào)函數(shù)的參數(shù)見下表調(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ù)說明2.5.5常用API介紹示例

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

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

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

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

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

}

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

2.6制作“比較成績”js代碼

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

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

<buttontype="primary"bindtap="bj">比較成績</button>

<inputbindchange="sx"></input>

<view>比較結(jié)果{{result}}</view>34

2.6制作“比較成績”js代碼

Page({data:{cj1:0,cj2:0,result:'',},步驟1：在bjcj.js文件的Page中的data里給頁面變量賦初值步驟2：在bjcj.js文件的Page中編寫yw事件處理函數(shù)，yw:function(e){this.setData({cj1:Number(e.detail.value)})},e是觸發(fā)事件的組件e.detail.value是獲取用戶輸入的值this.setData是把e.detail.value的值賦值給cj1

2.6制作“比較成績”js代碼

步驟3：在bjcj.js文件的Page中編寫sx事件處理函數(shù)，sx:function(e){this.setData({cj2:Number(e.detail.value)})},e是觸發(fā)事件的組件e.detail.value是獲取用戶輸入的值this.setData是把e.detail.value的值賦值給cj1

2.6制作“比較成績”js代碼

步驟4：在bjcj.js文件的Page中編寫bj事件處理函數(shù)，bj:function(){varstr="成績相等"if(this.data.cj1>this.data.cj2){str="語文成績高"}if(this.data.cj1<this.data.cj2){str="數(shù)學(xué)成績高"}this.setData({result:str})},如果cj1>cj2str的值為語文成績高如果cj1<cj2str的值為數(shù)學(xué)成績高用this.setData函數(shù)把str的值賦值給result給str變量賦值

2.6制作“比較成績”js代碼

優(yōu)化代碼：1.把2個輸入框的綁定事件函數(shù)統(tǒng)一用fs2.分別給2個輸入框添加data-name框框按鈕框文本輸入框文本輸入框文本2

<inputbindchange="fs"data-name="cj1"></input>13

<buttontype="primary"bindtap="bj">比較成績</button>

<inputbindchange="fs"data-name="cj2"></input>

<view>比較結(jié)果{{result}}</view>34

2.6制作“比較成績”js代碼

優(yōu)化代碼：在bjcj.js文件的Page中編寫fs事件處理函數(shù)：fs:function(e){console.log(e)this.data[]=Number(e.detail.value)},

<inputbindchange="fs"data-name="cj1"></input>刪除yw和sx函數(shù)第3章點餐小程序項目需求分析主講人：譚麗君微信小程序開發(fā)

3.1點餐小程序項目需求分析

項目需求分析原則

從用戶角度出發(fā)，與用戶進行溝通交流，充分挖掘用戶真實需求，分析并寫出需求文檔。

3.1點餐小程序項目需求分析

菜單菜單頁面功能①輪播圖②顯示商品：

顯示每種商品的圖片、名稱、價格和購物車按鈕。③添加商品到購物車：點擊“加入購物車”按鈕，可以將商品添加到購物車。本項目點餐微信小程序主要實現(xiàn)點餐最基本的功能，包括菜單、購物車、確認(rèn)訂單、訂單4個頁面。菜單、購物車、訂單3個頁面底部都有標(biāo)簽導(dǎo)航，點擊標(biāo)簽導(dǎo)航，可以相互切換這3個頁面，并顯示對應(yīng)的頁面內(nèi)容。

3.1點餐小程序項目需求分析

購物車購物車頁面功能①顯示購物車中每件商品:包括每件商品的圖片、名稱、價格數(shù)量，最下面顯示全選、合計、結(jié)算\刪除，右上角顯示編輯/完成。②修改商品數(shù)量：單擊+或者-,可以增加或者減少商品數(shù)量。③刪除商品：點擊右上角“編輯”按鈕，才能進行以下刪除操作?！稂c擊商品前面選框-->點擊右下角“刪除”按鈕，可以刪除選中的商品。★點擊左下角“全選”-->點擊右下角“刪除”按鈕，可以刪除所有商品。④結(jié)算：點擊右上角“完成”按鈕，切換為“編輯”按鈕，才能進行下面的結(jié)算操作。★點擊商品前面選框，下方顯示合計金額-->點擊右下角“結(jié)算”按鈕，可以結(jié)算選中的商品?！稂c擊左下角“全選”，下方顯示合計金額-->點擊右下角“結(jié)算”按鈕，可以結(jié)算所有商品。

3.1點餐小程序項目需求分析

確認(rèn)訂單頁面功能①顯示本次訂單中每種商品的圖片、標(biāo)題、單價、數(shù)量，下面顯示總金額、“立即結(jié)算”按鈕。②點擊“立即結(jié)算”，彈出“確認(rèn)提交訂單嗎”窗口?！稂c擊“確定”，顯示下單成功，并跳轉(zhuǎn)到訂單頁。本教程沒有實現(xiàn)支付功能。★點擊“取消”，彈出取消訂單。確認(rèn)訂單

3.1點餐小程序項目需求分析

訂單訂單頁面功能顯示我的所有訂單：①每個訂單中會顯示訂單商品圖片、標(biāo)題、數(shù)量、實付金額、下單時間。②每個訂單之間會有間隔顯示。3.2點餐小程序頁面框架分析1.菜單頁面菜單的最上面是輪播圖，中間是所有商品信息，底部導(dǎo)航欄在app.json文件里實現(xiàn)，菜單頁面框架分析如下圖3.2點餐小程序頁面框架分析2.購物車購物車的右上角顯示編輯/完成，可以相互切換，中間是購物車中商品信息，下面是結(jié)算。3.2點餐小程序頁面框架分析3.確認(rèn)訂單確認(rèn)訂單中上面顯示訂單中商品信息，下面顯示金額和立即結(jié)算。3.2點餐小程序頁面框架分析4.訂單訂單的上面是訂單商品信息，底部導(dǎo)航欄在app.json文件里實現(xiàn)。4.1創(chuàng)建點餐微信小程序主講人：譚麗君微信小程序開發(fā)

4.1創(chuàng)建點餐微信小程序

1.創(chuàng)建微信小程序項目3.打開以下文件，刪除部分代碼4.拷貝圖片文件序號文件名修改內(nèi)容①index.js只保留下面代碼

Page({})②index.wxml刪除該文件里所有內(nèi)容③index.wxss刪除該文件里所有內(nèi)容④app.json{"pages":["pages/index/index"]，

⑤app.wxss刪除該文件里所有內(nèi)容⑥app.js只保留下面代碼App({})2.刪除logs文件夾項目目錄選擇D:\phpstudy_pro\www\shop\小程序。

4.1.1初始化app.json文件

1.在app.json文件中添加頁面路徑對應(yīng)頁面依次為：菜單購物車確認(rèn)訂單訂單

4.1.1初始化app.json文件

2.在app.json文件中設(shè)置底部導(dǎo)航欄屬性描述color底部導(dǎo)航欄上的文字默認(rèn)顏色selectedColor底部導(dǎo)航欄上的文字選中時的顏色，listlist是數(shù)組①pagePath屬性：頁面路徑②text屬性：底部導(dǎo)航欄上按鈕文字③iconPath屬性：圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px。④selectedIconPath屬性：選中時的圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px。list是數(shù)組，該數(shù)組中最少2個、最多5個tab元素。tab按數(shù)組的順序排序，每個項都是一個對象。運行效果代碼頁面底部導(dǎo)航欄tabBar屬性及值

4.1.2初始化app.js文件

getApp().globalData.api1.定義全局?jǐn)?shù)據(jù)2.其它頁面使用全局?jǐn)?shù)據(jù)的方法全局?jǐn)?shù)據(jù)api，存放后臺接口文件相同的部分。

4.1.3初始化util.js文件

1.封裝網(wǎng)絡(luò)請求：在點餐小程序每個頁面的js文件中，都需要使用wx.request發(fā)起網(wǎng)絡(luò)請求，獲取后臺數(shù)據(jù)。為了減少重復(fù)寫代碼，在util.js文件中以_get和_post方法對wx.request進行封裝。_get和_post使用箭頭函數(shù)的定義格式函數(shù)名：（參數(shù)列表）=>{函數(shù)體}★url:服務(wù)器接口地址★data：發(fā)送到服務(wù)器的數(shù)據(jù)★success:網(wǎng)絡(luò)請求成功回調(diào)函數(shù)★error:網(wǎng)絡(luò)請求失敗回調(diào)函數(shù)（1）通過module.exports對外暴露接口，其它的js文件中才可以使用_get和_post函數(shù)。

4.1.3初始化util.js文件

調(diào)用全局?jǐn)?shù)據(jù)getApp().globalData.api（2）封裝API請求代碼4.1.3初始化util.js文件utils._post(參數(shù)1,參數(shù)2,function(res){

});2.小程序頁面調(diào)用模塊的方法constutils=require('../../utils/util.js');utils._get(參數(shù)1,參數(shù)2,function(res){

});（1）在需要調(diào)用_get和_post模塊的js文件中，引入util.js文件。（2）調(diào)用_get模塊的代碼（3）調(diào)用_post模塊的代碼4.2制作“菜單”頁面主講人：譚麗君微信小程序開發(fā)

4.2.1“菜單”頁面wxml文件

“菜單”頁面包括輪播圖、商品信息列表

4.2.1“菜單”頁面wxml文件

輪播圖對應(yīng)的wxml代碼如下序號名稱使用組件數(shù)據(jù)綁定說明①輪播列表swiper-itemwx:for="{{movies}}"列表渲染，movies為數(shù)組名。②圖片imagesrc="{{item.url}}"src屬性值綁定了movies數(shù)組中當(dāng)前元素的url值輪播圖中數(shù)據(jù)綁定

4.2.1“菜單”頁面wxml文件

每個商品信息對應(yīng)的wxml代碼每個商品信息中數(shù)據(jù)綁定序號名稱使用組件組件部分屬性、內(nèi)容說明①商品列表viewwx:for="{{goods}}"列表渲染，goods為數(shù)組名②商品圖片imagesrc="{{item.cover}}"src屬性值綁定了goods數(shù)組中當(dāng)前元素的cover值③商品名稱view<viewclass="list-title">{{item.title}}</view>view內(nèi)容綁定了goods數(shù)組中當(dāng)前元素的title值。

④商品價格text<textclass="list-price">￥{{item.price}}</text>text內(nèi)容綁定了goods數(shù)組中當(dāng)前元素的price值。

⑤加入購物車textbindtap="addCart"data-id="{{item.id}}"綁定了事件函數(shù)addCart自定義了一個屬性data-id，其值為goods數(shù)組中當(dāng)前元素的id值。

4.2.2“菜單”頁面wxss文件

輪播圖效果和框架序號選擇器樣式內(nèi)容①.head寬度、高度、頂上內(nèi)邊距、背景圖片（創(chuàng)建一個線性漸變的"圖像"(從上到下)）②.swiper寬度、高度、水平位置居中、頂上外邊距③.swiperimage寬度、高度、設(shè)置圓角邊框輪播圖樣式代碼輪播圖樣式設(shè)置

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結(jié)構(gòu)1.一行寬度100%，一行要放2個商品，每個商品各占父親的一半50%，但每個商品外面有外邊距，因此每個商品寬度設(shè)置45%,高度為460rpx..shop-list{width:45%;height:460rpx;}2.圖片寬度超出手機屏幕的45%，所以要設(shè)置圖片寬度(和父親shop-list一樣寬)100%,圖片高度460-2行文字的高度-行間距=300rpximage{width:100%;height:300rpx;}在index.wxml文件中，再復(fù)制一個商品信息

4.2.2“菜單”頁面wxss文件

2.每個商品信息效果和框架結(jié)構(gòu)3.設(shè)置一行放2個商品.shop-list{float:left;}4.設(shè)置每個商品的外邊距,(100%-45%*2)/4=2.5%,因為還有邊框線的位置，所以外邊距為2%.shop-list{margin:2%}

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結(jié)構(gòu)5.需要給每個商品信息加外邊框和圓角.shop-list{border:2rpxsolid#eee;border-radius:16rpx;}在index.wxml文件中，再復(fù)制一個商品信息6.圖片離2行文字太近，需要設(shè)置圖片下外邊距.list-img{margin-bottom:30rpx}

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結(jié)構(gòu)在index.wxml文件中，再復(fù)制一個商品信息7.分別設(shè)置標(biāo)題文字和第2行文字大小和行高.list-title{

font-size:

30rpx;

line-height:

40rpx;}.list-text{

font-size:

26rpx;

line-height:

40rpx;}8..list-text設(shè)置彈性布局，“價格”和“加入購物車”兩端對齊.list-text{

display:flex;

justify-content:

space-between;}

4.2.3“菜單”頁面js文件

util.js文件1.封裝網(wǎng)絡(luò)請求wx.request，創(chuàng)建下面2個函數(shù)_get（url,data,success,error）_post(url,data,success,error)2.小程序頁面調(diào)用這2個函數(shù)的方法在需要調(diào)用_get和_post的文件中，引入util.js文件。constutils=require("../../utils/util.js);

4.2.3“菜單”頁面js文件

（1）單擊“編譯”時，會運行index.js文件中onLoad函數(shù)，并發(fā)送網(wǎng)絡(luò)請求給后臺goodsList接口，前后端數(shù)據(jù)交互如下圖。4.2.3“菜單”頁面js文件onLoad（）{}function(){}單擊