小程序開發(fā)從入門到實踐

知識點心理測試小程序小程序開發(fā)事件是視圖層到邏輯層的通訊方式。

事件可以將用戶的行為反饋到邏輯層進行處理。事件可以綁定在組件上，當達到觸發(fā)事件，就會執(zhí)行邏輯層中對應的事件處理函數(shù)。1.Bindtap事件綁定小程序開發(fā)心理測試小程序中總共有4個事件，其事件處理函數(shù)對應的事件觸發(fā)結果如表所示。事件處理函數(shù)所處頁面事件觸發(fā)結果beginAnswerindex跳轉至test頁面answerClickAtest顯示下一題，并判斷A對應的是題庫中哪個選擇，給對應選項的值+1，滿足index=20時，跳至result頁面answerClickBtest顯示下一題，并判斷B對應的是題庫中哪個選擇，給對應選項的值+1，滿足index=20時，跳至result頁面answerClickCtest顯示下一題，并判斷B對應的是題庫中哪個選擇，給對應選項的值+1，滿足index=20時，跳至result頁面小程序開發(fā)2.路由小程序API中的路由共有5種路由路由規(guī)則wx.switchTab跳轉到tabBar頁面，并關閉其他所有非tabBar頁面wx.reLaunch關閉所有頁面，打開到應用內的某個頁面wx.redirectTo關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到tabbar頁面wx.navigateTo保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層wx.navigateBack關閉當前頁面，返回上一頁面或多級頁面?？赏ㄟ^getCurrentPages獲取當前的頁面棧，決定需要返回幾層。小程序開發(fā)其中心理測試小程序中用到了wx.navigateTo和wx.redirectTo，這邊通過修改index.js中的路由來看一下兩個路由之間的區(qū)別，一開始index.js文件的事件處理函數(shù)beginAnswer中使用的是wx.navigateTo，此時test與result頁面如圖所示，進入test和result頁面均可單擊“<”按鈕回到index頁面。test初始頁面小程序開發(fā)其中心理測試小程序中用到了wx.navigateTo和wx.redirectTo，這邊通過修改index.js中的路由來看一下兩個路由之間的區(qū)別，一開始index.js文件的事件處理函數(shù)beginAnswer中使用的是wx.navigateTo，此時test與result頁面如圖所示，進入test和result頁面均可單擊“<”按鈕回到index頁面。result初始頁面小程序開發(fā)如果將wx.navigateTo改為wx.redirectTo，會發(fā)現(xiàn)頁面左上角的“<”不見了，無法回到index頁面test修改后頁面小程序開發(fā)如果將wx.navigateTo改為wx.redirectTo，會發(fā)現(xiàn)頁面左上角的“<”不見了，無法回到index頁面result修改后頁面小程序開發(fā)聲明變量在js中，未在data數(shù)組中定義的變量，可以通過var語句來進行變量聲明，在聲明變量的同時也可以向變量賦值，如test.js文件中的一段代碼：3.聲明變量與變量賦值小程序開發(fā)2.變量賦值在js文件的函數(shù)中給變量賦值的方法有兩種，這里舉一個簡單的例子，首先將index.wxml文件中button的“開始測試”改為“{{msg}}”，使button中的文字變成一個變量，然后在index.js文件的data數(shù)組中添加變量msg，并賦予初值“開始測試”，最后將事件處理函數(shù)beginAnswer進行修改，代碼如左圖所示。小程序開發(fā)如果將this.setData({})改為使用this.data.msg=‘測試結束’來改變msg變量的值，會發(fā)現(xiàn)雖然可以改變msg的值，但是頁面不會更新小程序開發(fā)this.setData是用來更新界面的，this.data是用來獲取頁面data對象的，它們都可以用于給變量賦值，如果需要查看賦值后變量的值，需要在this.setData({})語句外使用console.log()打印查看變量的值。小程序開發(fā)2.相對路徑在index.js文件中，事件處理函數(shù)beginAnswer的wx.navigateTo路由的url使用的就是相對路徑，其中“../”指的是當前文件所在的上一級目錄，即index文件夾所在的目錄，“../test/test”指的就是index所在目錄中test文件夾中的test文件。另外“./”指的是當前目錄，“../../”指的是當前文件所在的上上級目錄，以此類推。絕對路徑“/pages/test/test”即為test文件所在的絕對路徑，若將url改為絕對路徑“/pages/test/test”也能實現(xiàn)頁面的跳轉。4.絕對路徑與相對路徑小程序開發(fā)帶參跳轉在test.js文件中，answerClickA的一段代碼實現(xiàn)了當index=20時，從test頁面跳轉至result頁面，跳轉時攜帶參數(shù)A、B和C的值，代碼如下：小程序開發(fā)在result頁面的頁面參數(shù)中可以看到帶參跳轉時的參數(shù)，如圖所示。小程序開發(fā)如果想用使用頁面參數(shù)，可以在result頁面的js文件中使用生命周期函數(shù)來獲取頁面參數(shù)，給生命周期函數(shù)function（）中定義一個值，這邊定義為options，即可使用option.A獲取A的值，并賦值給result頁面的變量A，B、C也一樣。開發(fā)者可以嘗試用console.log（options）打印看一下options中的值小程序開發(fā)變量賦值在js文件的函數(shù)中給變量賦值的方法有兩種，這里舉一個簡單的例子，首先將index.w