《PHP程序設(shè)計(jì)與微信小程序案例教程》 課件2.5微信小程序JS

主講人：譚麗君2.5微信小程序JS微信小程序開發(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步：把冰箱門打開，第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è)面，打開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ā)芽>開花>結(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)聽頁(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)聽頁(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ǔ)、支付功能、打開微信掃一掃。開發(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ù)見下表調(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)聽頁(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)閉。可以設(shè)置定時(shí)器進(jìn)行定時(shí)關(guān)閉。示例

在xs.js文件中輸入以下代碼，顯示加載中