第1章微信小程序入門

微信小程序開發全套可編輯PPT課件本課件是可編輯的正常PPT課件1.1什么是微信小程序微信小程序（WechatMiniProgram），是一種不需要下載安裝即可使用的應用，用戶掃一掃或搜一下即可打開應用。微型小程序應用的領域非常多，包括教育、媒體、交通、房地產、生活服務，旅游、電商、餐飲，民政民生，科技等多個領域。微信小程序以快捷、低成本優勢，為電商行業實現了更多的盈利，為消費者帶來更好的服務。本課件是可編輯的正常PPT課件1.2微信小程序開發流程1.微信小程序運行流程本課件是可編輯的正常PPT課件1.2微信小程序開發流程

2.微信小程序開發流程本課件是可編輯的正常PPT課件打開微信公眾平臺官網依次完成賬號信息、郵箱激活、信息登記選擇注冊的賬號類型：小程序1.3注冊微信小程序賬號1.注冊微信小程序賬號123本課件是可編輯的正常PPT課件

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

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

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

微信小程序開發本課件是可編輯的正常PPT課件2.1微信小程序代碼框架介紹1.微信小程序前端與網站前端網頁的相同點與區別本課件是可編輯的正常PPT課件

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

1.微信小程序前端的開發技術使用wxml、js、wxss三種開發語言組合使用，見表3-2所示。表3-2微信小程序前端的開發技術2.微信小程序前端的開發技術本課件是可編輯的正常PPT課件2.1微信小程序代碼框架介紹3.微信小程序的文件類型本課件是可編輯的正常PPT課件

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

4.小程序的目錄結構新建一個小程序項目本課件是可編輯的正常PPT課件

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

4.小程序的目錄結構本課件是可編輯的正常PPT課件

2.2微信小程序JSON文件

微信小程序開發本課件是可編輯的正常PPT課件2.2微信小程序JSON文件JSON是一種數據格式，不是編程語言。Json文件的語法格式：包含在一個大括號中，通過key：value鍵值對的方式來描述數據。key必須放在一對雙引號中。最后特別強調，JSON文件中不能使用注釋。本課件是可編輯的正常PPT課件2.2微信小程序JSON文件（1）全局配置文件在項目的根目錄有一個

app.json，它是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部tab等。本課件是可編輯的正常PPT課件2.2微信小程序JSON文件（2）頁面JSON文件在第2章新建項目目錄中，

pages/index和

pages/logs

目錄下的index.json和

logs.json文件，就是頁面JSON文件。在頁面JSON文件中可以設置頂部導航欄的背景顏色、文字。本課件是可編輯的正常PPT課件

2.3微信小程序代碼WXML微信小程序開發本課件是可編輯的正常PPT課件2.3.1WXML基本語法WXML是從HTML（超文本標簽語言）衍生而來的一種在小程序前端頁面使用的語言，WXML仍然是標簽語言，使用標記標簽來描述頁面的結構，頁面內容寫在標簽內部.本課件是可編輯的正常PPT課件2.3.1WXML基本語法雙標簽：成對出現的標簽。格式：<關鍵詞>內容</關鍵詞>例如：視圖容器<view></view>單標簽：不成對出現的標簽。格式：<關鍵詞/>例如：輸入框<input/>1.標簽：標簽由一對尖括號包圍關鍵詞。本課件是可編輯的正常PPT課件2.3.1WXML基本語法通用屬性大部分標簽都有的屬性。例如：class、id、style等專用屬性不同標簽有自己獨特屬性。例如：<inputpassword="true"/>password作用：輸入框中輸入內容以小圓點顯示2.標簽屬性:給組件設置參數用的。本課件是可編輯的正常PPT課件2.3.1WXML基本語法3.常用組件本課件是可編輯的正常PPT課件2.3.2制作第一個小程序"pages":["pages/test/test","pages/index/index","pages/logs/logs"],<view>第一個小程序</view>

<view>Hello

World</view>

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

2.“比較成績”頁面WXML代碼<view><text>請輸入語文成績</text><inputtype="number"/></view><view><text>請輸入數學成績</text><inputtype="number"/></view><button>比較成績</button><view><text>比較結果：</text></view>{

"pages":[

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

]}步驟一app.json步驟二bjcj.wxml本課件是可編輯的正常PPT課件

2.3.5數據綁定

1.數據綁定：就是通過雙重花括號{{變量名}}的語法格式，將一個變量綁定到頁面上。小程序上的大部分數據都是后端服務器返回給小程序的，也就是說這些數據是動態的，每次加載小程序都要先訪問服務器，服務器處理數據后，再返回小程序顯示數據綁定本課件是可編輯的正常PPT課件

2.3.5數據綁定

2.數據綁定的操作方法wxml文件js文件12在標簽內容或者屬性需要數據綁定的地方寫入{{變量名}}對該變量進行定義，把變量的值放在下面所示代碼data:{}中。本課件是可編輯的正常PPT課件

2.3.5數據綁定

3.數據綁定示例：<view>{{name}}</view>index.js代碼Page({/*頁面的初始數據*/data:{name:'貴州黃果樹'}})①index.wxml②index.js運行結果本課件是可編輯的正常PPT課件

2.3.5數據綁定

4.數據綁定{{}}的使用位置：wxml中數據綁定的位置除了放在內容中，還可以放在其它位置。本課件是可編輯的正常PPT課件

2.3.6列表渲染

列表渲染：在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。wx:for是標簽的一種特殊屬性，稱為控制屬性。默認數組的當前項的下標變量名默認為index，步驟一index.wxml默認數組當前項的變量名默認為item。步驟二index.js運行效果本課件是可編輯的正常PPT課件

2.3.7制作“輪播圖”

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

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

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

interval="1000"

circular="true">本課件是可編輯的正常PPT課件

2.3.7制作“輪播圖”

步驟1：App.json文件步驟2：在項目根目錄下創建images文件夾，粘貼4張圖片本課件是可編輯的正常PPT課件

2.3.7制作“輪播圖”

步驟3：lx.wxml文件本課件是可編輯的正常PPT課件

2.3.7制作“輪播圖”

使用列表渲染寫輪播組件注意：1.wx:for寫在需要循環的組件里2.item是數組里每一項3.注意在wxml中數組和變量一定要寫在{{}}里。步驟1：lx.wxml文件步驟2：lx.js文件本課件是可編輯的正常PPT課件2.3.8條件渲染在wxml中，使用wx:if=“{{條件

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

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

wx:elif="{{cj>60}}">及格</view>Page({/***頁面的初始數據*/data:{cj:70},步驟1：lx.wxml文件步驟2：lx.js文件本課件是可編輯的正常PPT課件

2.4微信小程序WXSS微信小程序開發本課件是可編輯的正常PPT課件

2.4

微信小程序wxss

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

對當前頁面樣式生效。例如index.wxss12

本課件是可編輯的正常PPT課件

選擇器{

樣式屬性名：屬性值；

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

2.4.1WXSS的基本語法

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

class="yw">語文成績</view><view>數學成績</view><view>英語成績</view>index.wxss文件index.wxml文件12

2.4.1WXSS的基本語法

本課件是可編輯的正常PPT課件

2.4.2WXSS選擇器

1.標簽選擇器格式：標簽名{樣式屬性名：屬性值;}2.類選擇器格式：.類名{樣式屬性名：屬性值;}3.id選擇器格式：#id名{樣式屬性名：屬性值;}本課件是可編輯的正常PPT課件

2.4.2WXSS選擇器

4.并集選擇器格式：選擇器1，選擇器2，...選擇器n{樣式屬性名：屬性值;}5.后代選擇器格式：祖先后代{樣式屬性名：屬性值;}本課件是可編輯的正常PPT課件

2.4.3WXSS常用樣式

1.字號設置font-size格式選擇器{font-size:合法的尺寸單位;}rpx（responsivepixel）單位:可以根據屏幕寬度進行自適應。rpx單位是wxml提出的一個新尺寸單位。2.字體加粗font-weight格式選擇器{font-weight:字體粗度值;}本課件是可編輯的正常PPT課件

2.4.3WXSS常用樣式

3.文本顏色color格式選擇器{color:顏色值;}4．行高line-height格式選擇器{line-height:值;}本課件是可編輯的正常PPT課件

2.4.3WXSS常用樣式

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

2.4.3WXSS常用樣式

7.元素的大小格式選擇器{width:數值;height:數值;}8.背景顏色background-color格式選擇器{background-color:顏色;}本課件是可編輯的正常PPT課件

2.4.4盒子模型盒子包括：外邊距(margin)+邊框(border)+內邊距(padding)+元素內容。內容上外邊距上內邊距下內邊距下外邊距右內邊距右外邊距左內邊距左外邊距右邊框線左邊框線下邊框線上邊框線本課件是可編輯的正常PPT課件

2.4.4盒子模型1.邊框本課件是可編輯的正常PPT課件

2.4.4盒子模型2.邊框圓角border-radius本課件是可編輯的正常PPT課件

2.4.4盒子模型3.padding內邊距本課件是可編輯的正常PPT課件

2.4.4盒子模型4.margin外邊距本課件是可編輯的正常PPT課件

2.4.4盒子模型5.box-shadow邊框陰影選擇器{box-shadow:h-shadowv-shadowblurspreadcolor;}本課件是可編輯的正常PPT課件

2.4.5彈性布局flex（flexiblebox）彈性布局盒模型。1.容器：使用display:flex樣式的元素，稱為flex容器。2.項目：它的所有子元素自動成為容器成員，稱為flex項目。3.兩根軸：容器默認存在主軸和交叉軸。它們是垂直關系。（1）容器屬性本課件是可編輯的正常PPT課件

2.4.5彈性布局(2)項目屬性本課件是可編輯的正常PPT課件

2.4.5彈性布局index.wxmlindex.jsindex.wxss運行效果本課件是可編輯的正常PPT課件

2.4.6制作“景區名片”樣式“景區名片”頁面框架大框<viewclass="card">大標題框<viewclass="big-title">圖片<image>內容框<viewclass="content">小標題框<viewclass="small-title">段落框<viewclass="dl">本課件是可編輯的正常PPT課件

2.4.6制作“景區名片”樣式“景區名片”頁面框架嵌套步驟一，大框對應的WXSS樣式代碼如下圖本課件是可編輯的正常PPT課件

2.4.6制作“景區名片”樣式“景區名片”頁面框架嵌套步驟二，加入大標題框、圖片、內容框后對應的WXSS代碼如下圖本課件是可編輯的正常PPT課件

2.4.6制作“景區名片”樣式“景區名片”頁面框架嵌套步驟三，加入小標題框和段落框后，對應的WXSS代碼如下圖本課件是可編輯的正常PPT課件

2.4.7制作“比較成績”樣式“比較成績”頁面框架嵌套本課件是可編輯的正常PPT課件

2.4.7制作“比較成績”樣式“比較成績”頁面框架嵌套步驟一，對應的WXSS樣式代碼本課件是可編輯的正常PPT課件

2.4.7制作“比較成績”樣式“比較成績”頁面框架嵌套步驟二，對應的WXSS樣式代碼本課件是可編輯的正常PPT課件

2.5微信小程序JS微信小程序開發本課件是可編輯的正常PPT課件

2.5.1.1JS變量、數據類型

1.變量JS是區分大小寫的,變量名,函數,關鍵字都要區分大小寫2.小程序變量定義var變量名=值在函數里面進行變量定義

data:{變量名:值,數組名:[]，對象名：{}}在data里定義變量本課件是可編輯的正常PPT課件數組數組

[,,,]數組就是存放一組數據。讀取數組第一個元素數組名[0]讀取數組第二個元素數組名[1]本課件是可編輯的正常PPT課件面向過程和面向對象的區別面向對象思想對象名.函數名()大象放冰箱：如果是用面向對象編程：冰箱對象.裝大象函數（）面向過程思想第1步做什么第2步做什么第3步做什么大象放冰箱：如果是用面向過程編程：第1步：把冰箱門打開，第2步：把大象推進去，第3步：把冰箱門上。本課件是可編輯的正常PPT課件對象書寫格式、對象獲取屬性、對象調用函數的格式對象要調用函數

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

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

格式對象名.屬性名()函數就是方法本課件是可編輯的正常PPT課件

2.5.1.1JS變量、數據類型

示例：新建一個小程序，創建xs頁面，打開xs.js文件中，在data中name初始化值”劉紅”，在onLoad函數中定義一個變量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里的數據打印輸出結果app.jsonxs.js本課件是可編輯的正常PPT課件2.數據類型stringnumberboolean數組對象

2.5.1.1JS變量、數據類型

數組名：[值，...值]對象名：{屬性名:值，屬性名:值}包括整數或小數""或''包圍的truefalse2個值數組里面存放了一組數據。數組的第一個元素下標為0.對象由一對花括號包含。訪問對象屬性有2種方法：方法1：對象名.屬性名;方法2：對象名[“屬性名”]本課件是可編輯的正常PPT課件JS函數書寫格式JS函數書寫有3種格式：1.標準格式

函數名：function(){

一段代碼}2.匿名函數3.箭頭函數本課件是可編輯的正常PPT課件

2.5.1.1JS變量、數據類型

示例：在xs.js文件data中初始化數組jzfp，并打印輸出Page({data:{jzfp:["劉紅","王小","李明"]},onLoad:function(options){console.log(this.data.jzfp)},xs.js本課件是可編輯的正常PPT課件

2.5.1.1JS變量、數據類型

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

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

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

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

屬性名：值,屬性名：值success函數fail函數complete函數

})success為接口調用成功的回調函數，fail為接口調用失敗的回調函數，complete為接口調用結束的回調函數，無論調用成功或者失敗，都會執行complete中的代碼。Success、fail、complete這三個回調函數調用時會傳入一個Object類型參數，包含以下字段，回調函數的參數見下表本課件是可編輯的正常PPT課件調用函數函數名（參數

）調用普通函數調用API函數wx.函數名（{}）示例wx.showModal({title:"",content:"",success(res){if(res.confirm){console.log("我要支付")}elseif(res.cancel){console.log("我不想買了")}})本課件是可編輯的正常PPT課件2.5.4微信小程序API

微信登錄的API，獲得與用戶身份有關的一些信息，如頭像、名稱等。wx.login({success(res){//api調用成功執行的代碼},fail(res){console.log(res.errMsg)//api調用失敗執行的代碼},complete(res){//api調用完畢執行的代碼})示例本課件是可編輯的正常PPT課件2.5.5常用API介紹1.顯示消息提示框格式：wx.showToast(Objectobject)wx.showToast中參數說明本課件是可編輯的正常PPT課件2.5.5常用API介紹示例

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

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

提示框格式：wx.showLoading(Objectobject)如果要關閉提示框，需主動調用wx.hideLoading才能關閉。可以設置定時器進行定時關閉。示例

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

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

}

})運行效果圖本課件是可編輯的正常PPT課件setTimeout倒計時setTimeout(函數（）,毫秒數)setTimeout(function（）{console.log(“去學校廣場集合”)},5000)本課件是可編輯的正常PPT課件2.5.5常用API介紹二、頁面路由API：就是小程序頁面之前的跳轉。1.wx.relaunch()功能是關閉所有頁面，打開到應用內的某個頁面。示例：wx.reLaunch({url:'../index/index'})url參數的值是字符串型，是必填選，標明需要跳轉的頁面路徑。2.wx.redirectTo()功能是關閉當前頁面，跳轉到應用內的某個頁面示例：wx.redirectTo({url:''../index/index'})url參數的值是字符串型，是必填選，標明需要跳轉的頁面路徑。本課件是可編輯的正常PPT課件2.5.5常用API介紹3.wx.navigateTo()功能是保留當前頁面，跳轉到應用內的某個頁面示例：wx.navigateTo({url:'../index/index'})url參數的值是字符串型，是必填選，標明需要跳轉的頁面路徑。本課件是可編輯的正常PPT課件

2.6制作“比較成績”js代碼微信小程序開發本課件是可編輯的正常PPT課件

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

1.bjcj.wxml文件中給輸入框添加bindchange事件、按鈕添加bindtap事件，給最后一個view組件內容數據綁定{{result}}。框框按鈕框文本輸入框文本輸入框文本2

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

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

<inputbindchange="sx"></input>

<view>比較結果{{result}}</view>34本課件是可編輯的正常PPT課件

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

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

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

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

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

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

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

優化代碼：1.把2個輸入框的綁定事件函數統一用fs2.分別給2個輸入框添加data-name框框按鈕框文本輸入框文本輸入框文本2

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

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

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

<view>比較結果{{result}}</view>34本課件是可編輯的正常PPT課件

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

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

<inputbindchange="fs"data-name="cj1"></input>刪除yw和sx函數本課件是可編輯的正常PPT課件第3章點餐小程序項目需求分析

微信小程序開發本課件是可編輯的正常PPT課件

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

項目需求分析原則

從用戶角度出發，與用戶進行溝通交流，充分挖掘用戶真實需求，分析并寫出需求文檔。本課件是可編輯的正常PPT課件

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

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

顯示每種商品的圖片、名稱、價格和購物車按鈕。③添加商品到購物車：點擊“加入購物車”按鈕，可以將商品添加到購物車。本項目點餐微信小程序主要實現點餐最基本的功能，包括菜單、購物車、確認訂單、訂單4個頁面。菜單、購物車、訂單3個頁面底部都有標簽導航，點擊標簽導航，可以相互切換這3個頁面，并顯示對應的頁面內容。本課件是可編輯的正常PPT課件

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

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

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

確認訂單頁面功能①顯示本次訂單中每種商品的圖片、標題、單價、數量，下面顯示總金額、“立即結算”按鈕。②點擊“立即結算”，彈出“確認提交訂單嗎”窗口。★點擊“確定”，顯示下單成功，并跳轉到訂單頁。本教程沒有實現支付功能。★點擊“取消”，彈出取消訂單。確認訂單本課件是可編輯的正常PPT課件

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

訂單訂單頁面功能顯示我的所有訂單：①每個訂單中會顯示訂單商品圖片、標題、數量、實付金額、下單時間。②每個訂單之間會有間隔顯示。本課件是可編輯的正常PPT課件3.2點餐小程序頁面框架分析1.菜單頁面菜單的最上面是輪播圖，中間是所有商品信息，底部導航欄在app.json文件里實現，菜單頁面框架分析如下圖本課件是可編輯的正常PPT課件3.2點餐小程序頁面框架分析2.購物車購物車的右上角顯示編輯/完成，可以相互切換，中間是購物車中商品信息，下面是結算。本課件是可編輯的正常PPT課件3.2點餐小程序頁面框架分析3.確認訂單確認訂單中上面顯示訂單中商品信息，下面顯示金額和立即結算。本課件是可編輯的正常PPT課件3.2點餐小程序頁面框架分析4.訂單訂單的上面是訂單商品信息，底部導航欄在app.json文件里實現。本課件是可編輯的正常PPT課件4.1創建點餐微信小程序

微信小程序開發本課件是可編輯的正常PPT課件

4.1創建點餐微信小程序

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

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

⑤app.wxss刪除該文件里所有內容⑥app.js只保留下面代碼App({})2.刪除logs文件夾項目目錄選擇D:\phpstudy_pro\www\shop\小程序。本課件是可編輯的正常PPT課件

4.1.1初始化app.json文件

1.在app.json文件中添加頁面路徑對應頁面依次為：菜單購物車確認訂單訂單本課件是可編輯的正常PPT課件

4.1.1初始化app.json文件

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

4.1.2初始化app.js文件

getApp().globalData.api1.定義全局數據2.其它頁面使用全局數據的方法全局數據api，存放后臺接口文件相同的部分。本課件是可編輯的正常PPT課件

4.1.3初始化util.js文件

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

4.1.3初始化util.js文件

調用全局數據getApp().globalData.api（2）封裝API請求代碼本課件是可編輯的正常PPT課件4.1.3初始化util.js文件utils._post(參數1,參數2,function(res){

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

});（1）在需要調用_get和_post模塊的js文件中，引入util.js文件。（2）調用_get模塊的代碼（3）調用_post模塊的代碼本課件是可編輯的正常PPT課件4.2制作“菜單”頁面

微信小程序開發本課件是可編輯的正常PPT課件

4.2.1“菜單”頁面wxml文件

“菜單”頁面包括輪播圖、商品信息列表本課件是可編輯的正常PPT課件

4.2.1“菜單”頁面wxml文件

輪播圖對應的wxml代碼如下序號名稱使用組件數據綁定說明①輪播列表swiper-itemwx:for="{{movies}}"列表渲染，movies為數組名。②圖片imagesrc="{{item.url}}"src屬性值綁定了movies數組中當前元素的url值輪播圖中數據綁定本課件是可編輯的正常PPT課件

4.2.1“菜單”頁面wxml文件

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

④商品價格text<textclass="list-price">￥{{item.price}}</text>text內容綁定了goods數組中當前元素的price值。

⑤加入購物車textbindtap="addCart"data-id="{{item.id}}"綁定了事件函數addCart自定義了一個屬性data-id，其值為goods數組中當前元素的id值。本課件是可編輯的正常PPT課件

4.2.2“菜單”頁面wxss文件

輪播圖效果和框架序號選擇器樣式內容①.head寬度、高度、頂上內邊距、背景圖片（創建一個線性漸變的"圖像"(從上到下)）②.swiper寬度、高度、水平位置居中、頂上外邊距③.swiperimage寬度、高度、設置圓角邊框輪播圖樣式代碼輪播圖樣式設置本課件是可編輯的正常PPT課件

4.2.2“菜單”頁面wxss文件

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

4.2.2“菜單”頁面wxss文件

2.每個商品信息效果和框架結構3.設置一行放2個商品.shop-list{float:left;}4.設置每個商品的外邊距,(100%-45%*2)/4=2.5%,因為還有邊框線的位置，所以外邊距為2%.shop-list{margin:2%}本課件是可編輯的正常PPT課件

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結構5.需要給每個商品信息加外邊框和圓角.shop-list{border:2rpxsolid#eee;border-radius:16rpx;}在index.wxml文件中，再復制一個商品信息6.圖片離2行文字太近，需要設置圖片下外邊距.list-img{margin-bottom:30rpx}本課件是可編輯的正常PPT課件

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結構在index.wxml文件中，再復制一個商品信息7.分別設置標題文字和第2行文字大小和行高.list-title{

font-size:

30rpx;

line-height:

40rpx;}.list-text{

font-size:

26rpx;

line-height:

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

display:flex;

justify-content:

space-between;}本課件是可編輯的正常PPT課件

4.2.3“菜單”頁面js文件

util.js文件1.封裝網絡請求wx.request，創建下面2個函數_get（url,data,success,error）_post(url,data,success,error)2.小程序頁面調用這2個函數的方法在需要調用_get和_post的文件中，引入util.js文件。constutils=require("../../utils/util.js);本課件是可編輯的正常PPT課件

4.2.3“菜單”頁面js文件

（1）單擊“編譯”時，會運行index.js文件中onLoad函數，并發送網絡請求給后臺goodsList接口，前后端數據交互如下圖。本課件是可編輯的正常PPT課件4.2.3“菜單”頁面js文件onLoad（）{}function(){}單擊“編譯”，會自動執行onLoad函數自定義函數調用自定義函數this.函數名()

函數名(){}普通函數匿名函數調用普通函數本課件是可編輯的正常PPT課件4.2.3“菜單”頁面js文件onLoad()函數1.把res.data.data的值賦值給result2.把result的賦值給data里的goodsgetList函數utils._get（'goods/goodsList',param||{},匿名函數）function(res){console.log(res)varresult=res.data.data;that.setData(){goods:result;}}res是從服務器返回來的數據本課件是可編輯的正常PPT課件4.2.3“菜單”頁面js文件getList函數功能顯示加載提示框wx.showLoadingvarthat=this使用util.js文件中_get函數（'goods/goodsList',param||{},函數）1.關閉加載提示框2.把res.data.data的值賦值給result3.把result的賦值給data里的goodsfunction(res){wx.hideLoading();varresult=res.data.data;that.setData(){goods:result;}}res是從服務器返回來的數據本課件是可編輯的正常PPT課件4.2.3“菜單”頁面js文件getList函數功能顯示加載提示框wx.showLoadingvarthat=this使用util.js文件中_get函數（'goods/goodsList',param||{},函數）function(res){wx.hideLoading();varresult=res.data.data;that.setData(){goods:result;}}1.關閉加載提示框2.把res.data.data的值賦值給result3.把result的賦值給data里的goods本課件是可編輯的正常PPT課件

4.2.3“菜單”頁面js文件

單擊調試器-->Network-->XHR，單擊goodsList接口，單擊Headers，可以查看接口地址和網絡請求方式RequestMethod的值。本課件是可編輯的正常PPT課件

4.2.3“菜單”頁面js文件

單擊Preview，可以查看goodsList接口返回給前端的數據本課件是可編輯的正常PPT課件

4.2.3“菜單”頁面js文件

（2）點擊“加入購物車”時，會運行index.js文件中addCart事件函數，并發送網絡請求給后臺add接口，前后端數據交互如下圖本課件是可編輯的正常PPT課件addCart事件函數addCart()函數判斷res.data.code的值是否為200，如果是彈出成功模態框，持續2秒獲取點擊加入購物車的商品id值utils._post（'cart/add',param,匿名函數）function(res){if(200==res.data.code){wx.showToast({title:res.data.msg||'操作成功',icon:'success',duration:2000}varparam={'goods_id':goods_id};vargoods_id=e.target.dataset.id;

res是從服務器返回來的數據本課件是可編輯的正常PPT課件

4.2.3“菜單”頁面js文件

在導入的點餐小程序項目中，在菜單頁中分別單擊思念絲娃娃和紅湯羊肉火鍋“加入購物車”，每單擊一次“加入購物車”，就會觸發一次事件，因此在調試器中會出現兩個add接口，單擊add接口，單擊Headers，可以查看接口地址和網絡請求方式RequestMethod的值，如左下圖。還可以查看add接口接收的前端數據，如右下圖。本課件是可編輯的正常PPT課件

4.2.3“菜單”頁面js文件

單擊Preview，可以查看add接口返回給前端的數據本課件是可編輯的正常PPT課件4.2.3“菜單”頁面js文件2.“菜單”index.js文件代碼模塊如下表序號模塊說明①constutils=require('../../utils/util.js');引入utils.js文件②Page

初始數據data初始數據：//輪播圖movies:[{url:'/static/banner1.jpg'},{url:'/static/banner2.jpg'},{url:'/static/banner3.jpg'},{url:'/static/banner4.jpg'}],//商品列表goods:[]

函數onLoad功能：調用getList。getList功能：調用utils._get函數，發送網絡請求給后臺接口goodsList，并返回商品信息數據到前端。

addCart功能：調用utils._post函數，發送網絡請求給后臺接口add。本課件是可編輯的正常PPT課件4.3制作“購物車”頁面

微信小程序開發本課件是可編輯的正常PPT課件

4.3.1“購物車”頁面wxml文件

購物車”頁面包括右上角編輯、中間的商品信息和下面的結算。本課件是可編輯的正常PPT課件

4.3.1“購物車”頁面wxml文件

1.“編輯/完成”框架②text組件內容為三元運算表達式，adminShow值為真時，顯示“完成”，adminShow值為假時，顯示