微信小程序開發(fā)邊做邊學(xué) 課件 操作篇-微信小程序 第3、4章 我的頁面模塊開發(fā)、修改我的信息模塊開發(fā)

第三章：我的頁面模塊開發(fā)ontents目錄授權(quán)登錄頁面01我的頁面02C注冊頁面03課前討論杭州建德大量個人信息泄露2023年1月，杭州建德網(wǎng)警在工作中發(fā)現(xiàn)，建德市轄區(qū)大量人口居住、拆遷安置等公民個人信息被泄露。

建德網(wǎng)警立即圍繞信息特征進(jìn)行循線追蹤，成功挖掘一個涉及小區(qū)物業(yè)、房地產(chǎn)商、裝修公司、建材家居、廣告公司等多行業(yè)的侵犯公民個人信息犯罪團(tuán)伙。該團(tuán)伙成員以營利為目的，長期在微信、QQ等平臺通過購銷、交換等方式非法處置公民個人信息，形成一份信息為多人共同持有使用的局面。團(tuán)伙內(nèi)小區(qū)物業(yè)、房地產(chǎn)商等從業(yè)人員主要負(fù)責(zé)收集、兜售、提供公民個人信息；裝修公司、建材家居、廣告公司等主要負(fù)責(zé)購買、接收、使用公民個人信息，同時部分繼續(xù)兜售，形成流通共享。2023年2月9日，杭州市公安局網(wǎng)警分局會同建德警方聯(lián)動開展集中收網(wǎng)。行動查獲涉案單位10家，抓獲犯罪嫌疑人15人（采取刑事強(qiáng)制措施13人），查扣電子設(shè)備16件、紙質(zhì)公民個人信息名單1000余張，提取電子名單100余份，涉及公民個人信息30余萬條。美國對西工大網(wǎng)絡(luò)攻擊2022年9月5日，國家計(jì)算機(jī)病毒應(yīng)急處理中心和360公司分別發(fā)布了關(guān)于西北工業(yè)大學(xué)遭受境外網(wǎng)絡(luò)攻擊的調(diào)查報告。調(diào)查發(fā)現(xiàn)，美國國家安全局（NSA）下屬的特定入侵行動辦公室（TAO）使用了40余種不同的專屬網(wǎng)絡(luò)攻擊武器，持續(xù)對西北工業(yè)大學(xué)開展攻擊竊密，竊取該校關(guān)鍵網(wǎng)絡(luò)設(shè)備配置、網(wǎng)管數(shù)據(jù)、運(yùn)維數(shù)據(jù)等核心技術(shù)數(shù)據(jù)。NSA的手不止一次！

調(diào)查報告發(fā)布當(dāng)天，外交部發(fā)言人毛寧在例行記者會上回答相關(guān)提問時，明確表示調(diào)查報告揭露了美國政府對中國進(jìn)行網(wǎng)絡(luò)攻擊的又一實(shí)例，美方行徑嚴(yán)重危害中國國家安全和公民個人信息安全。

她同時指出，美方還長期對中國的手機(jī)用戶進(jìn)行無差別語音監(jiān)聽，非法竊取手機(jī)用戶的短信內(nèi)容，并對其進(jìn)行無線定位。敲響警鐘：網(wǎng)絡(luò)安全應(yīng)被更加看重

“國家網(wǎng)絡(luò)安全工作要堅(jiān)持網(wǎng)絡(luò)安全為人民、網(wǎng)絡(luò)安全靠人民，保障個人信息安全，維護(hù)公民在網(wǎng)絡(luò)空間的合法權(quán)益。”習(xí)近平總書記始終高度重視網(wǎng)絡(luò)安全和信息化工作，提出了一系列新思想新觀點(diǎn)新論斷。自2014年以來，我國多部門共同連續(xù)舉辦國家網(wǎng)絡(luò)安全宣傳周，讓“網(wǎng)絡(luò)安全為人民，網(wǎng)絡(luò)安全靠人民”的理念深入人心，不斷提升全民網(wǎng)絡(luò)安全意識和防護(hù)技能。

互聯(lián)網(wǎng)時代，美國長期濫用技術(shù)優(yōu)勢，在全球范圍內(nèi)實(shí)施大規(guī)模、有組織、無差別的網(wǎng)絡(luò)竊密、監(jiān)控和攻擊，以維護(hù)其霸權(quán)體系，已成為名副其實(shí)的“黑客帝國”。像TAO，為NSA于1997年順應(yīng)互聯(lián)網(wǎng)技術(shù)發(fā)展形勢組建而成。NSA對TAO一開始的職能定位，就是對其他國家進(jìn)行計(jì)算機(jī)網(wǎng)絡(luò)偵察活動。人人有責(zé)：筑牢網(wǎng)絡(luò)安全防線二、如何預(yù)防網(wǎng)絡(luò)詐騙？1、給自己的電腦和手機(jī)安裝殺毒軟件2、在網(wǎng)上購物，要選擇正規(guī)，大型電商3、在網(wǎng)站注冊賬號時，只填帶號的必填項(xiàng)4、盡是不要"蹭網(wǎng)”，不要連接公共場所的未知WIFI5、不要把個人敏感照片，敏感信息上傳到云端

一、如何防范個人信息泄露?1、來路不明的軟件不要隨便安裝。2、使用智能手機(jī)時，不要修改手機(jī)中的系統(tǒng)文件。3、不要隨便參加注冊信息獲贈品的網(wǎng)絡(luò)活動。4、網(wǎng)購最好去大型購物網(wǎng)站。5、設(shè)置高保密強(qiáng)度密碼。6、不同網(wǎng)站最好設(shè)不同的密碼。7、網(wǎng)銀、網(wǎng)購的支付密碼最好定期更換。8、盡量不在網(wǎng)上留真實(shí)信息。9、設(shè)置專門用來注冊網(wǎng)站的郵箱或手機(jī)號。10、不要向QQ、微信上的陌生網(wǎng)友透露真實(shí)姓名。11.、朋友圈曬照片，盡量不曬包含個人信息的照片授權(quán)登錄頁面01ranspageT3.1授權(quán)登錄頁面新建項(xiàng)目時，建議開發(fā)者自定義項(xiàng)目名稱，并且在存放小程序項(xiàng)目的目錄下新建一個空的文件夾，選擇項(xiàng)目目錄時，選擇該文件夾，這樣方便之后尋找項(xiàng)目。比如項(xiàng)目名稱命名為doudouyun，與項(xiàng)目相關(guān)?！粜陆ㄒ粋€項(xiàng)目右擊pages，單擊“新建目錄”按鈕，并命名為register。然后右擊register目錄，單擊“新建Page”按鈕，并命名為userlogin。3.1授權(quán)登錄頁面◆新建userlogin頁面（1）userlogin.wxml代碼3.1授權(quán)登錄頁面◆userlogin頁面開發(fā)（2）userlogin.wxss代碼

（3）userlogin.json代碼

<!--userlogin.wxml--><view

class="container"><view

class="usermotto"><text

class="user-motto">微信授權(quán)</text></view><view

class="userinfo"><button

wx:if="{{!hasUserInfo&&canIUse}}"

open-type="getUserInfo"

bindgetuserinfo="getUserInfo">點(diǎn)擊授權(quán)登錄</button></view></view/**userlogin.wxss**/.userinfo{display:flex;flex-direction:column;align-items:center;}.usermotto{margin-top:150px;text-align:center;}{"navigationBarTitleText":"授權(quán)頁面"}userlogin頁面的邏輯與helloworld小程序中index頁面的邏輯基本一樣，只是簡單調(diào)整了一下3.1授權(quán)登錄頁面（4）userlogin.js代碼直接刪除原有的事件處理函數(shù)bindViewTap，在onLoad函數(shù)最后加上一個判斷語句,判斷當(dāng)hasUserInfo!=false時跳轉(zhuǎn)至register頁面，即注冊頁面，具體代碼:if(this.data.hasUserInfo){wx.navigateTo({url:'./register',})}另外getUserInfo函數(shù)中也相應(yīng)加上一個頁面跳轉(zhuǎn)wx.navigateTo()getUserInfo:function(e){wx.navigateTo({url:'./register',})app.globalData.userInfo=e.detail.userInfothis.setData({userInfo:e.detail.userInfo,hasUserInfo:true})}3.1授權(quán)登錄頁面

授權(quán)登錄頁面的效果圖如果發(fā)現(xiàn)之前已經(jīng)授權(quán)過了，看不到想要的授權(quán)頁面，可以單擊擊工具欄中間區(qū)域的“清緩存”按鈕，來清除授權(quán)記錄。

3.1授權(quán)登錄頁面

◆app.js除了完成userlogin頁面的開發(fā)，還需要對app.js文件進(jìn)行修改，首先是wx.login()方法中需要完善，才能實(shí)現(xiàn)小程序登錄功能，最終代碼如右所示：注意，wx.request()的data數(shù)組中，from對應(yīng)的是appid，因此后面appid的值需要改成開發(fā)者自己的appid。

3.1授權(quán)登錄頁面

編譯一下后，會發(fā)現(xiàn)Console面板會提示錯誤。單擊工具欄右側(cè)區(qū)域的“詳情”按鈕，勾選“不校驗(yàn)合法域名”即可。

3.1授權(quán)登錄頁面勾選“不校驗(yàn)合法域名”后，重新編譯一次，發(fā)現(xiàn)Console面板提示“該appid未注冊”。需要前/index.php/Page/Index/register進(jìn)行進(jìn)行使用注冊。調(diào)用該接口需要2個參數(shù)，即開發(fā)者的appid與appsecret。

3.1授權(quán)登錄頁面

填寫appid與appsecret后，單擊“Submit”按鈕即可完成api接口注冊。api接口注冊完成后，重新編譯代碼即可看到Console面板中wx.request()的返回值，主要包括了is_login、is_register和openid。用戶的第一次進(jìn)入到授權(quán)登錄頁面的跳轉(zhuǎn)邏輯已經(jīng)完成。注冊頁面

02ranspageT

3.2注冊頁面

●

在register目錄下，右擊register，單擊“新建Page”，并命名為register。

●去WeUI基礎(chǔ)樣式庫找到對應(yīng)的樣式，其中姓名、手機(jī)號、學(xué)校、學(xué)號和入學(xué)年份是一個輸入框，對應(yīng)的是WeUI中表單--input里面的一種樣式。注冊頁面效果圖

3.2注冊頁面

●

單擊模擬器下方“打開”按鈕，即可在編輯器的目錄結(jié)構(gòu)區(qū)找到該頁面對應(yīng)的目錄，打開input.wxml文件，找到該樣式對應(yīng)的代碼。

3.2注冊頁面

●單擊模擬器下方“打開”按鈕，即可在編輯器的目錄結(jié)構(gòu)區(qū)找到該頁面對應(yīng)的目錄，打開input.wxml文件，找到該樣式對應(yīng)的代碼。將其拷貝至doudouyun項(xiàng)目的register.wxml，其中這段代碼最后還少了一個</view>，作為最開始<view>的結(jié)束。

3.2注冊頁面

●以姓名的input為例，其他都與姓名的操作一致，代碼如下。register.wxml代碼：<view

class="weui-cellsweui-cells_after-title"><view

class="weui-cellweui-cell_input"><view

class="weui-cell__hd"><view

class="weui-label">姓名</view></view><view

class="weui-cell__bd"><input

class="weui-input"

placeholder="請輸入姓名"

bindchange="changeName"/></view></view></view>register.js代碼：Page({data:{name:''},changeName:function(e){this.setData({name:e.detail.value})}})其他注冊信息的輸入框與姓名一樣，分別加入wxml代碼，并在data數(shù)組中加入對應(yīng)的變量，對應(yīng)bindchange函數(shù)名進(jìn)行修改即可。

3.2注冊頁面

●除了輸入框外，最后還有一個提交按鈕，在WeUI樣式庫中的表單--button找到對應(yīng)的button樣式。

3.2注冊頁面

●在register.wxml文件的最后加上一段button的代碼，具體代碼如下。<view

class="page__bdpage__bd_spacingsubmit"><button

class="weui-btn"

type="primary">提交</button></view>其中第一個<view>的class類最后新加一個submit子類?！裨趙xss文件中寫submit子類樣式的相關(guān)屬性，主要是為了調(diào)整提交按鈕的樣式。.submit{margin:

0

auto;padding-top:

15px;width:

90%;}

3.2注冊頁面

●提交按鈕綁定的事件處理函數(shù)bindSubmit，主要是向后臺發(fā)送用戶注冊信息，這邊后臺提供了一個Api接口用于將注冊信息存入后臺數(shù)據(jù)庫。請求成功后，跳轉(zhuǎn)至index頁面，具體代碼如右。我的頁面實(shí)現(xiàn)03ranspageT

3.3我的頁面實(shí)現(xiàn)

●

右擊pages，單擊“新建目錄”按鈕，命名為my，右擊my目錄，單擊“新建Page”按鈕，命名myinfo。

3.3我的頁面實(shí)現(xiàn)

●在WeUI樣式庫中找到對應(yīng)的樣式，查找WeUI中l(wèi)ist樣式，發(fā)現(xiàn)要找的是帶說明帶跳轉(zhuǎn)的列表項(xiàng)。我的頁面效果圖WeUI樣式庫中對應(yīng)的list樣式

3.3我的頁面實(shí)現(xiàn)

●

myinfo.wxml文件中的代碼：<view

class="weui-cellsweui-cells_after-title"><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">頭像</view><view

class="weui-cell__ftweui-cell__ft_in-access"><image

class="head_img"

src="{{userinfo.head_img?userinfo.head_img:'/images/default_head_circle.png'}}"></image></view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">姓名</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">手機(jī)號</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.tel}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">性別</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.sex}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">學(xué)校</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.school}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">學(xué)號</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.number}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">入學(xué)年份</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.enter_year}}</view></navigator></view>

3.3我的頁面實(shí)現(xiàn)

●userinfo的值是通過向后臺訪問請求，獲取到的用戶信息，并存在本地，然后從本地讀取出來進(jìn)行賦值。該請求的代碼寫在app.js中，具體代碼如下：wx.request({url:'/index.php/Api/User/getInfo',data:{'openid':res.data.openid,},success:function(res1){wx.setStorageSync('userInfo',res1.data.data)},})

3.3我的頁面實(shí)現(xiàn)

●myinfo.js文件的data數(shù)組中定義userinfo，并在onLoad函數(shù)中對userinfo變量進(jìn)行賦值，具有代碼如下:Page({/***頁面的初始數(shù)據(jù)*/data:{userinfo:{}},/***生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad:function(options){this.setData({userinfo:wx.getStorageSync('userInfo')})}

3.3我的頁面實(shí)現(xiàn)●

編譯后發(fā)現(xiàn)，頭像顯示過大

●因此需要對媒體組件image中自定義類“head_img”，調(diào)整圖片大小，其中myinfo.wxss文件的代碼如下：.head_img{height:

120rpx;width:

120rpx;border-radius:

50%;}★我的頁面就能正常顯示了。感謝聆聽！第四章：修改我的信息模塊開發(fā)ontents目錄myInfo頁面調(diào)整01change頁面配置02C新建change頁面0304配置文件的使用課前討論浙江省數(shù)字化改革2022年7月13日上午，全省數(shù)字經(jīng)濟(jì)高質(zhì)量發(fā)展大會在杭州召開

數(shù)字經(jīng)濟(jì)是新經(jīng)濟(jì)革命，是經(jīng)濟(jì)競爭、科技創(chuàng)新和制度變革的主戰(zhàn)場，是經(jīng)濟(jì)增長的快變量、未來經(jīng)濟(jì)的增長極，是創(chuàng)新力競爭力的關(guān)鍵點(diǎn)，是推動社會變革的主引擎。2022年7月13日上午，全省數(shù)字經(jīng)濟(jì)高質(zhì)量發(fā)展大會在杭州召開。省委書記袁家軍在會上強(qiáng)調(diào)，要深入學(xué)習(xí)貫徹習(xí)近平總書記關(guān)于數(shù)字經(jīng)濟(jì)的重要論述精神，認(rèn)真落實(shí)省第十五次黨代會精神，以數(shù)字化改革為牽引，以科技創(chuàng)新為動力，深化國家數(shù)字經(jīng)濟(jì)創(chuàng)新發(fā)展試驗(yàn)區(qū)建設(shè)，全面建設(shè)數(shù)字經(jīng)濟(jì)強(qiáng)省，加快構(gòu)建以數(shù)字經(jīng)濟(jì)為核心的現(xiàn)代化經(jīng)濟(jì)體系，加快打造數(shù)字變革高地，為全國數(shù)字經(jīng)濟(jì)發(fā)展探索新路徑，為我省推進(jìn)“兩個先行”提供強(qiáng)大引擎，率先構(gòu)建全民共享、引領(lǐng)未來、彰顯制度優(yōu)勢的數(shù)字文明。工作報告中的數(shù)字化轉(zhuǎn)型“大力發(fā)展數(shù)字經(jīng)濟(jì)，提升常態(tài)化監(jiān)管水平，支持平臺經(jīng)濟(jì)發(fā)展?！?月5日，國務(wù)院總理李克強(qiáng)在政府工作報告中再次提出發(fā)展數(shù)字經(jīng)濟(jì)，并強(qiáng)調(diào)監(jiān)管常態(tài)化。數(shù)字經(jīng)濟(jì)是近年來我國重點(diǎn)推進(jìn)的領(lǐng)域之一。31省市的2023年政府工作報告陸續(xù)出爐，明確了2023年及今后五年的重點(diǎn)工作，多處提及數(shù)字產(chǎn)業(yè)、數(shù)字經(jīng)濟(jì)的相關(guān)內(nèi)容。

從2017年首次寫入政府工作報告，到今年“數(shù)字經(jīng)濟(jì)”一詞已經(jīng)四次寫入政府工作報告，中國數(shù)字經(jīng)濟(jì)發(fā)展如火如荼。

李克強(qiáng)在政府工作報告中指出，五年來，我們擴(kuò)大國內(nèi)有效需求，推進(jìn)區(qū)域協(xié)調(diào)發(fā)展和新型城鎮(zhèn)化?！巴苿泳€上線下消費(fèi)深度融合，實(shí)物商品網(wǎng)上零售額占社會消費(fèi)品零售總額的比重從15.8%提高到27.2%。發(fā)展城市社區(qū)便民商業(yè)，完善農(nóng)村快遞物流配送體系”數(shù)字化改革中的挑戰(zhàn)——以企業(yè)為例1.戰(zhàn)略缺位，轉(zhuǎn)型缺乏方向。部分企業(yè)沒找到未來競爭的著眼點(diǎn)與商業(yè)模式。2.能力難建，轉(zhuǎn)型難以深入。企業(yè)原有的系統(tǒng)老舊，管理制度傳統(tǒng)，流程復(fù)雜，數(shù)字化轉(zhuǎn)型底座不牢，在原有基礎(chǔ)上修補(bǔ)往往出現(xiàn)無法兼容的問題，推倒重建又容易對企業(yè)經(jīng)營造成“傷筋動骨”的損失。3.價值難現(xiàn)，投入無法持續(xù)。數(shù)字化轉(zhuǎn)型是涉及企業(yè)全業(yè)務(wù)、跨職能的系統(tǒng)性改革工程。企業(yè)只有全面部署、系統(tǒng)深入才能最大化解鎖和釋放數(shù)字價值。對企業(yè)數(shù)字化轉(zhuǎn)型的建議：第一，戰(zhàn)略為先，緊握業(yè)務(wù)。企業(yè)首先要解決的是發(fā)展問題和路徑問題，找到自身的競爭優(yōu)勢，定義未來的商業(yè)模式，明確自身轉(zhuǎn)型之路，基于業(yè)務(wù)構(gòu)想設(shè)計(jì)數(shù)字化轉(zhuǎn)型的愿景和頂層戰(zhàn)略。第二，云筑底座，加速創(chuàng)新。對于中國企業(yè)而言，上云不再是對未來的暢想與計(jì)劃，而是迫在眉睫的要務(wù)，是數(shù)字化轉(zhuǎn)型的關(guān)鍵。第三，體驗(yàn)至上，全鏈驅(qū)動。出色的體驗(yàn)已不再完全由產(chǎn)品和服務(wù)決定，企業(yè)需要全面推廣“客戶需求至上”的體驗(yàn)文化。微信小程序助力企業(yè)進(jìn)行數(shù)字化轉(zhuǎn)型

1.營銷方面：小程序能與微信中的公眾號、朋友圈、視頻號等功能連接起來，把上面的用戶導(dǎo)流到自己的小程序中，小程序還可以幫企業(yè)提供涵蓋圖文、音頻、短視頻等多種內(nèi)容的營銷渠道，連接不同的用戶場景。2.社區(qū)運(yùn)營：社區(qū)運(yùn)營可以提高企業(yè)品牌的知名度，提升用戶的復(fù)購率，商家可以把小程序做為用戶購買商品的工具和入口，小程序自帶的核銷功能，能完美的幫助商家轉(zhuǎn)化客戶，讓客戶在線付款。3.大流量池：微信最為最大的社交軟件，微信用戶已達(dá)十億，日活八億，小程序處于微信的生態(tài)圈里，可以完美的利用微信的流量池，公眾號、視頻號、朋友圈。微信群中的流量，也都可以被小程序使用，讓企業(yè)通過小程序進(jìn)行盈利。數(shù)字化人才需要具備哪些能力

1.具有數(shù)字化戰(zhàn)略頭腦：數(shù)字化戰(zhàn)略頭腦主要體現(xiàn)在大局意識、前瞻洞察、統(tǒng)籌規(guī)劃三個層面?？梢哉J(rèn)識到，數(shù)字化是工具，而不是方向和目的。2.具有數(shù)字化思維：數(shù)字化思維主要體現(xiàn)在概念思考、系統(tǒng)思考、數(shù)據(jù)敏感三個層面。①“概念思考”面對各方面的模糊性、不確定性，仍然有清晰的概念和框架思考，能在模糊的情景中基于數(shù)據(jù)尋找到確定性；能夠分辨出哪些數(shù)據(jù)有用有效有價值。②“系統(tǒng)思考”，把握問題內(nèi)在本質(zhì)，多視角、多維度考慮問題，并根據(jù)不同角度給出結(jié)果。③數(shù)據(jù)敏感，能敏銳覺察行業(yè)、公司中的數(shù)據(jù)變化，能透視數(shù)據(jù)變化背后的原因和邏輯，并針對性地采取有效應(yīng)對措施。

企業(yè)數(shù)字化轉(zhuǎn)型，人才是至關(guān)重要的一環(huán)。數(shù)據(jù)顯示，截止2022年9月，國內(nèi)已有近70%的企業(yè)已開啟了數(shù)字化轉(zhuǎn)型，約有65.5%的企業(yè)在數(shù)字化人才方面的培訓(xùn)需求呈現(xiàn)出增長的態(tài)勢。3.具備數(shù)字化執(zhí)行能力：數(shù)字化執(zhí)行主要體現(xiàn)在結(jié)果導(dǎo)向、在線協(xié)作、靈活應(yīng)變?nèi)齻€層面。①“結(jié)果導(dǎo)向”，把結(jié)果作為衡量行為的重要標(biāo)準(zhǔn)，不過于關(guān)注過程。②“在線協(xié)作”，能借助科技的手段，通過在線遠(yuǎn)程交流、協(xié)作，實(shí)現(xiàn)內(nèi)外部的問題解決與資源調(diào)配。③“靈活應(yīng)變”，思維迅速，反應(yīng)敏捷，面對突發(fā)事件和問題，能靈活應(yīng)對。myInfo頁面調(diào)整01ranspageT浙江工商大學(xué)4.1.1性別信息顯示調(diào)整●沒調(diào)整之前，“性別”這一欄顯示的是2，而不是男或女。這是由于性別是微信從用戶所注冊的微信中獲取的，并且以數(shù)字方式保存在數(shù)據(jù)庫中。4.1.1性別信息顯示調(diào)整

浙江工商大學(xué)（1）在myinfo.js的data{}中設(shè)一個數(shù)組來顯示用戶

的性別信息，其中0對應(yīng)“保密”、1對應(yīng)“男”、2對應(yīng)“女”。代碼如下：data:

{userinfo:{

},sex_array:['保密',

'男',

'女']

},

（2）myinfo,wxml中“性別”一欄對應(yīng)的變量從{{userinfo.sex}}變{{sex_array[userinfo.sex]}}，

這樣我的頁面就可以正常顯示性別了?！窠鉀Q方法浙江工商大學(xué)4.1.2增加頁面跳轉(zhuǎn)

要完成頁面跳轉(zhuǎn)，只需要給navigator組件的url屬性添加跳轉(zhuǎn)鏈接，使得點(diǎn)擊需要修改的信息時，跳轉(zhuǎn)至change頁面，以“姓名”為例，代碼如下：<navigatorurl="./change?changeWhat=name"

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><viewclass="weui-cell

bd">姓名</view><viewclass="weui-cell

ftweui-cell

ft_in-access">{{}}</view></navigator>其中跳轉(zhuǎn)路徑中帶了changWhat參數(shù)，且changWhat=name，實(shí)現(xiàn)帶參跳轉(zhuǎn)，以便后續(xù)識別修改的是什么信息。另外手機(jī)號、性別、學(xué)校、學(xué)號和入學(xué)年份的跳轉(zhuǎn)路徑中的changeWhat參數(shù)的值分別為tel、sex、school、number和enter_year。浙江工商大學(xué)4.1.2增加頁面跳轉(zhuǎn)還有一個頭像信息的修改，豆豆云助教中暫時不支持修改頭像的功能，因此“頭像”的navigator組件中的url屬性就不需要了，另外給它添加一個bindtap的事件處理函數(shù)，使得點(diǎn)擊頭像時，提示“頭像暫不支持修改”，但是發(fā)現(xiàn)刪了url屬性之后，單擊“頭像”按鈕時，會報錯。4.1.2增加頁面跳轉(zhuǎn)

浙江工商大學(xué)將navigator組件改為view組件，具體代碼如下：myinfo.wxml文件：<viewclass="weui-cellweui-cell_access"hover-class="weui-cell_active"

bindtap="choseImage"><viewclass="weui-cell

bd">頭像</view><viewclass="weui-cell

ft

weui-cell

ft_in-access"><imageclass="head_img"src="{{userinfo.head_img?userinfo.head_img:'/images/default_head_circle.png'}}"></image></view></view>myinfo.js文件：choseImage:function(){this.openAlert("頭像暫不支持修改")},openAlert:function(e){wx.showToast({title:

e,icon:"none",duration:

2000})},4.2.1change頁面布局

浙江工商大學(xué)change頁面的也相對簡單，只要一個簡單的文本框即可，頁面最終效果。4.2新建change頁面

02ranspageT浙江工商大學(xué)4.2.1change頁面布局在WeUI樣式庫的表單--input中，會發(fā)現(xiàn)找不到完全相同的樣式，但是可以找到兩個與頁面最終效果相似的表單輸入。浙江工商大學(xué)4.2.1change頁面布局

將這兩個表單輸入的樣式對應(yīng)的wxml文件代碼，拷貝doudouyun項(xiàng)目中，具體代碼如下：<viewclass="weui-cells

weui-cells_after-title"><viewclass="weui-cell

weui-cell_input"><view

class="weui-cell

bd"><input

class="weui-input"placeholder="請輸入文本"

/></view><view

class="weui-cell

ft"><view

class="weui-vcode-btn">保存</view></view></view></view>浙江工商大學(xué)4.2.1change頁面邏輯為了用戶的使用友好性，需要對change

頁面的輸入框placeholder與導(dǎo)航欄標(biāo)題文字進(jìn)行處理，使得用戶進(jìn)入修改頁面時，可以從placeholder與導(dǎo)航標(biāo)題中了解自己需要修改的是什么信息。另外在輸入框中顯示用戶原本的信息，以便用戶在修改信息時可以看到原本的信息，在原有信息基礎(chǔ)上進(jìn)行修改。浙江工商大學(xué)4.2.1change頁面邏輯1.將change.wxml

文件中input

組件的placeholder

屬性值進(jìn)行修改，將原來的”請輸入文本”改為變量”{{placeholder}}“，并增加value

屬性，