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

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

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

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

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

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

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

企業(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)勢(shì)。3.具備數(shù)字化執(zhí)行能力：數(shù)字化執(zhí)行主要體現(xiàn)在結(jié)果導(dǎo)向、在線協(xié)作、靈活應(yīng)變?nèi)齻€(gè)層面。①“結(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)敏捷，面對(duì)突發(fā)事件和問題，能靈活應(yīng)對(duì)。myInfo頁面調(diào)整01ranspageT浙江工商大學(xué)4.1.1性別信息顯示調(diào)整●沒調(diào)整之前，“性別”這一欄顯示的是2，而不是男或女。這是由于性別是微信從用戶所注冊(cè)的微信中獲取的，并且以數(shù)字方式保存在數(shù)據(jù)庫中。4.1.1性別信息顯示調(diào)整

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

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

{userinfo:{

},sex_array:['保密',

'男',

'女']

},

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

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

要完成頁面跳轉(zhuǎn)，只需要給navigator組件的url屬性添加跳轉(zhuǎn)鏈接，使得點(diǎn)擊需要修改的信息時(shí)，跳轉(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ù)識(shí)別修改的是什么信息。另外手機(jī)號(hào)、性別、學(xué)校、學(xué)號(hào)和入學(xué)年份的跳轉(zhuǎn)路徑中的changeWhat參數(shù)的值分別為tel、sex、school、number和enter_year。浙江工商大學(xué)4.1.2增加頁面跳轉(zhuǎn)還有一個(gè)頭像信息的修改，豆豆云助教中暫時(shí)不支持修改頭像的功能，因此“頭像”的navigator組件中的url屬性就不需要了，另外給它添加一個(gè)bindtap的事件處理函數(shù)，使得點(diǎn)擊頭像時(shí)，提示“頭像暫不支持修改”，但是發(fā)現(xiàn)刪了url屬性之后，單擊“頭像”按鈕時(shí)，會(huì)報(bào)錯(cuò)。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頁面的也相對(duì)簡(jiǎn)單，只要一個(gè)簡(jiǎn)單的文本框即可，頁面最終效果。4.2新建change頁面

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

將這兩個(gè)表單輸入的樣式對(duì)應(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="請(qǐng)輸入文本"

/></view><view

class="weui-cell

ft"><view

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

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

文件中input

組件的placeholder

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

屬性，

且value=”{{value}}”。2.

并在change.js

文件的data

數(shù)組中添加變量placeholder

和value，初始值為空。并且對(duì)變量placeholder和value

賦值。3.由于頁面參數(shù)中changeWhat

的值均為英文，而在頁面上需要顯示中文才更合乎情景，因此需要在data

數(shù)組中增加一個(gè)infoArray數(shù)組，實(shí)現(xiàn)中英轉(zhuǎn)換。由于性別信息的特殊性，需要增加一個(gè)sex_array

數(shù)組。浙江工商大學(xué)4.2.1change頁面邏輯change.js

文件代碼：浙江工商大學(xué)4.2.2添加事件處理函數(shù)change

頁面中需要添加兩個(gè)事件處理函數(shù)，在change.js中分別添加在input

組件和“保存”所在的view

組件中。4.2.2添加事件處理函數(shù)

浙江工商大學(xué)valuechange

函數(shù)的主要作用是保存用戶修改信息時(shí)修改后的信息,因此需要在data

數(shù)組中添加一個(gè)臨時(shí)變量

tmp，初始值為空，用于存儲(chǔ)修改后的信息，具體代碼如下:valuechange:function(res){this.setData({tmp:res.detail.value})},4.2.2添加事件處理函數(shù)

浙江工商大學(xué)submit函數(shù)的主要作用是向后臺(tái)提交修改后的信息，并更新數(shù)據(jù)庫，因此這里需要使用wx.request(

)向后臺(tái)發(fā)起請(qǐng)求，需要向后臺(tái)發(fā)送的數(shù)據(jù)有openid、change和value，其中change的值為需要修改的信息名，即changeWhat，那么需要在dat