微信小程序開發(fā)邊做邊學(xué) 課件 知識(shí)點(diǎn)篇-微信小程序第4章 MyInfo 頁面調(diào)整

小程序開發(fā)從入門到實(shí)踐知識(shí)點(diǎn)修改我的信息模塊開發(fā)MyInfo頁面調(diào)整知識(shí)點(diǎn)小程序開發(fā)1.性別信息顯示調(diào)整仔細(xì)看我的頁面，發(fā)現(xiàn)“性別”這一欄顯示的是2，而不是男或女由于性別是微信從用戶所注冊(cè)的微信中獲取的，并且以數(shù)字方式保存在數(shù)據(jù)庫中，所以需要在myinfo.js的data{}中設(shè)一個(gè)數(shù)組來顯示用戶的性別信息，其中0對(duì)應(yīng)“保密”、1對(duì)

應(yīng)“男”、2對(duì)應(yīng)“女”小程序開發(fā)修改：myinfo,wxml中“性別”一欄對(duì)應(yīng)的變量從{{userinfo.sex}}變?yōu)閧{sex_array[userinfo.sex]}}，這樣我的頁面就可以正常顯示性別了

如左圖所示小程序開發(fā)2.增加頁面跳轉(zhuǎn)

在點(diǎn)擊需要修改的信息時(shí)，進(jìn)入修改我的信息頁面。其中我的頁面的樣式選擇的是帶說明、跳轉(zhuǎn)的列項(xiàng)表

因此用到了navigator組件。navigator跳轉(zhuǎn)分為兩個(gè)狀態(tài)，一種是關(guān)閉當(dāng)前頁面，一種是不關(guān)閉當(dāng)前頁面。屬性類型默認(rèn)值說明urlstring

應(yīng)用內(nèi)的跳轉(zhuǎn)鏈接；open-typestringnavigator跳轉(zhuǎn)方式；hover-classstringnavigator-hover指定點(diǎn)擊時(shí)的樣式類，當(dāng)hover-class=”none”時(shí)，點(diǎn)擊效果；值說明navigate對(duì)應(yīng)wx.navigateTo或wx.navigateToMiniProgram的功能redirect對(duì)應(yīng)wx.redirectTo的功能switchTab對(duì)應(yīng)wx.switchTab的功能reLaunch對(duì)應(yīng)wx.reLaunch的功能navigateBack對(duì)應(yīng)wx.navigateBack的功能exit退出小程序，target="miniProgram"時(shí)生效

open-type的合法值navigator組件屬性小程序開發(fā)2.增加頁面跳轉(zhuǎn)因此要完成頁面跳轉(zhuǎn)，只需要給navigator組件的url屬性添加跳轉(zhuǎn)鏈接，使得點(diǎn)擊需要修改的信息時(shí)，跳轉(zhuǎn)至change頁面，以“姓名”為例。其中跳轉(zhuǎn)路徑中帶了changWhat參數(shù)，且changWhat=name，實(shí)現(xiàn)帶參跳轉(zhuǎn)，以便后續(xù)識(shí)別修改的是什么信息。另外手機(jī)號(hào)、性別、學(xué)校、學(xué)號(hào)和入學(xué)年份的跳轉(zhuǎn)路徑中的changeWhat參數(shù)的值分別為tel、sex、school、num和enter_year。小程序開發(fā)2.增加頁面跳轉(zhuǎn)關(guān)于頭像信息的修改，豆豆云助教中暫不支持修改頭像的功能，因此“頭像”的navigator組件中的url屬性就不需要了，另外給它添加一個(gè)bindtap的事件處理函數(shù)，使得點(diǎn)擊頭像時(shí)，提示“頭像暫不支持修改”，但是刪了url屬性之后，單擊“頭像”按鈕時(shí)，會(huì)報(bào)錯(cuò)，如圖所示。這是由于navigator組件中open-type屬性默認(rèn)值為“navigate”，對(duì)應(yīng)的是wx.navigateTo的功能，使用navigateTo是需要有“url”屬性。navigator組件報(bào)錯(cuò)小程序開發(fā)2.增加頁面跳轉(zhuǎn)因此將navigator組件改為view組件，具體代碼如下。myinfo.wxml文件：小程序開發(fā)2.增加頁面跳轉(zhuǎn)因此將navigator組件改為view組件，具體代碼如下。小程序開發(fā)其中myinfo.js文件中涉及到了兩個(gè)知識(shí)點(diǎn)，分別是wx.showToast()和方法調(diào)用。wx.showToast()wx.showMaodel()一樣是界面交互中的一種消息提示框，其屬性詳見左邊所示表格。屬性類型默認(rèn)值必填說明titlestring

是提示內(nèi)容iconstring‘success’否圖標(biāo)imagestring

否自定義圖標(biāo)的本地路徑，image的優(yōu)先級(jí)高于icondurationnumber1500否提示的延遲時(shí)間maskbooleanfalse否是否顯示透明蒙層，防止觸摸穿透successfunction

否接口調(diào)用成功的回調(diào)函數(shù)failfunction

否接口調(diào)用失敗的回調(diào)函數(shù)completefunction

否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）wx.showToast()屬性小程序開發(fā)其中icon的合法值詳見左邊表格值說明success顯示成功圖標(biāo)，此時(shí)title文本最多顯示7個(gè)漢字長度loading顯示加載圖標(biāo)，此時(shí)title文本最多顯示7個(gè)漢字長度none不顯示圖標(biāo)，此時(shí)title文本最多可顯示兩行，1.9.0及以上版本支持小程序開發(fā)當(dāng)icon取值不同時(shí)，消息提示框提示顯示圖標(biāo)不同，開發(fā)者可以根據(jù)自己的需求選擇不同的icon值，如圖所示。圖icon值為none圖icon值為success圖icon值為loading小程序開發(fā)2.方法調(diào)用在myinfo.js文件中openAlert為自定義的一個(gè)方法，該方法中含有一個(gè)參數(shù)e，用于顯示消息提示框的標(biāo)題即title，且該方法實(shí)現(xiàn)的是顯示消息提示框的功能。方法定義后，調(diào)用該方法時(shí)，需要使用“this.方法名”即this.openAlert調(diào)用方法，myinfo.js中的事件處理函數(shù)choseImage中，調(diào)用openAlert方法，實(shí)現(xiàn)點(diǎn)擊頭像時(shí)，觸發(fā)choseImage函數(shù)，彈出消息提示框。其中“頭像暫不支持修改”為openAlert方法中參數(shù)e的值。change頁面實(shí)現(xiàn)知識(shí)點(diǎn)小程序開發(fā)Change頁面布局change頁面的也相對(duì)簡單，只要一個(gè)簡單的文本框即可，頁面最終效果，如圖所示。change頁面最終效果圖

WeUI樣式庫中相似樣式小程序開發(fā)Change頁面布局將這兩個(gè)表單輸入的樣式對(duì)應(yīng)的wxml文件代碼，拷貝至doudouyun項(xiàng)目中，具體代碼如下。小程序開發(fā)Change頁面邏輯為了用戶的使用友好性，需要對(duì)change頁面的輸入框的placeholder與導(dǎo)航欄標(biāo)題文字進(jìn)行處理，使得用戶進(jìn)入修改頁面時(shí)，可以從placeholder與導(dǎo)航標(biāo)題中了解自己需要修改的是什么信息。另外在輸入框中顯示用戶原本的信息，以便用戶在修改信息時(shí)可以看到原本的信息，在原有信息基礎(chǔ)上進(jìn)行修改，具體效果如圖所示。小程序開發(fā)Change頁面邏輯對(duì)change頁面的頁面參數(shù)進(jìn)行處理，實(shí)現(xiàn)placeholder與title值的顯示。另外由于頁面參數(shù)中changeWhat的值均為英文，因此需要在data數(shù)組中增加一個(gè)infoArray數(shù)組，實(shí)現(xiàn)中英轉(zhuǎn)換。由于性別信息的特殊性，需要增加一個(gè)sex_array數(shù)組，部分代碼如左圖所示。小程序開發(fā)添加事件處理函數(shù)change頁面中需要添加兩個(gè)事件處理函數(shù)，分別添加在input組件和“保存”所在的view組件中，如圖4–8所示。小程序開發(fā)添加事件處理函數(shù)valuechange函數(shù)valuechange函數(shù)的主要作用是保存用戶修改信息時(shí)修改后的信息，因此需要在data數(shù)組中添加一個(gè)臨時(shí)變量tmp，初始值為空，用于存儲(chǔ)修改后的信息，具體代碼如下小程序開發(fā)2.submit函數(shù)submit函數(shù)的主要作用是向后臺(tái)提交修改后的信息，并更新數(shù)據(jù)庫，因此這里需要使用wx.request()向后臺(tái)發(fā)起請(qǐng)求，需要向后臺(tái)發(fā)送的數(shù)據(jù)有openid、change和value。添加事件處理函數(shù)配置文件的使用知識(shí)點(diǎn)