微信小程序开发边做边学 课件 操作篇-微信小程序第4章 修改我的信息模块开发

第四章：修改我的信息模块开发ontents目录myInfo页面调整01change页面配置02C新建change页面0304配置文件的使用课前讨论浙江省数字化改革2022年7月13日上午，全省数字经济高质量发展大会在杭州召开

数字经济是新经济革命，是经济竞争、科技创新和制度变革的主战场，是经济增长的快变量、未来经济的增长极，是创新力竞争力的关键点，是推动社会变革的主引擎。2022年7月13日上午，全省数字经济高质量发展大会在杭州召开。省委书记袁家军在会上强调，要深入学习贯彻习近平总书记关于数字经济的重要论述精神，认真落实省第十五次党代会精神，以数字化改革为牵引，以科技创新为动力，深化国家数字经济创新发展试验区建设，全面建设数字经济强省，加快构建以数字经济为核心的现代化经济体系，加快打造数字变革高地，为全国数字经济发展探索新路径，为我省推进“两个先行”提供强大引擎，率先构建全民共享、引领未来、彰显制度优势的数字文明。工作报告中的数字化转型“大力发展数字经济，提升常态化监管水平，支持平台经济发展。”3月5日，国务院总理李克强在政府工作报告中再次提出发展数字经济，并强调监管常态化。数字经济是近年来我国重点推进的领域之一。31省市的2023年政府工作报告陆续出炉，明确了2023年及今后五年的重点工作，多处提及数字产业、数字经济的相关内容。

从2017年首次写入政府工作报告，到今年“数字经济”一词已经四次写入政府工作报告，中国数字经济发展如火如荼。

李克强在政府工作报告中指出，五年来，我们扩大国内有效需求，推进区域协调发展和新型城镇化。“推动线上线下消费深度融合，实物商品网上零售额占社会消费品零售总额的比重从15.8%提高到27.2%。发展城市社区便民商业，完善农村快递物流配送体系”数字化改革中的挑战——以企业为例1.战略缺位，转型缺乏方向。部分企业没找到未来竞争的着眼点与商业模式。2.能力难建，转型难以深入。企业原有的系统老旧，管理制度传统，流程复杂，数字化转型底座不牢，在原有基础上修补往往出现无法兼容的问题，推倒重建又容易对企业经营造成“伤筋动骨”的损失。3.价值难现，投入无法持续。数字化转型是涉及企业全业务、跨职能的系统性改革工程。企业只有全面部署、系统深入才能最大化解锁和释放数字价值。对企业数字化转型的建议：第一，战略为先，紧握业务。企业首先要解决的是发展问题和路径问题，找到自身的竞争优势，定义未来的商业模式，明确自身转型之路，基于业务构想设计数字化转型的愿景和顶层战略。第二，云筑底座，加速创新。对于中国企业而言，上云不再是对未来的畅想与计划，而是迫在眉睫的要务，是数字化转型的关键。第三，体验至上，全链驱动。出色的体验已不再完全由产品和服务决定，企业需要全面推广“客户需求至上”的体验文化。微信小程序助力企业进行数字化转型

1.营销方面：小程序能与微信中的公众号、朋友圈、视频号等功能连接起来，把上面的用户导流到自己的小程序中，小程序还可以帮企业提供涵盖图文、音频、短视频等多种内容的营销渠道，连接不同的用户场景。2.社区运营：社区运营可以提高企业品牌的知名度，提升用户的复购率，商家可以把小程序做为用户购买商品的工具和入口，小程序自带的核销功能，能完美的帮助商家转化客户，让客户在线付款。3.大流量池：微信最为最大的社交软件，微信用户已达十亿，日活八亿，小程序处于微信的生态圈里，可以完美的利用微信的流量池，公众号、视频号、朋友圈。微信群中的流量，也都可以被小程序使用，让企业通过小程序进行盈利。数字化人才需要具备哪些能力

1.具有数字化战略头脑：数字化战略头脑主要体现在大局意识、前瞻洞察、统筹规划三个层面。可以认识到，数字化是工具，而不是方向和目的。2.具有数字化思维：数字化思维主要体现在概念思考、系统思考、数据敏感三个层面。①“概念思考”面对各方面的模糊性、不确定性，仍然有清晰的概念和框架思考，能在模糊的情景中基于数据寻找到确定性；能够分辨出哪些数据有用有效有价值。②“系统思考”，把握问题内在本质，多视角、多维度考虑问题，并根据不同角度给出结果。③数据敏感，能敏锐觉察行业、公司中的数据变化，能透视数据变化背后的原因和逻辑，并针对性地采取有效应对措施。

企业数字化转型，人才是至关重要的一环。数据显示，截止2022年9月，国内已有近70%的企业已开启了数字化转型，约有65.5%的企业在数字化人才方面的培训需求呈现出增长的态势。3.具备数字化执行能力：数字化执行主要体现在结果导向、在线协作、灵活应变三个层面。①“结果导向”，把结果作为衡量行为的重要标准，不过于关注过程。②“在线协作”，能借助科技的手段，通过在线远程交流、协作，实现内外部的问题解决与资源调配。③“灵活应变”，思维迅速，反应敏捷，面对突发事件和问题，能灵活应对。myInfo页面调整01ranspageT浙江工商大学4.1.1性别信息显示调整●没调整之前，“性别”这一栏显示的是2，而不是男或女。这是由于性别是微信从用户所注册的微信中获取的，并且以数字方式保存在数据库中。4.1.1性别信息显示调整

浙江工商大学（1）在myinfo.js的data{}中设一个数组来显示用户

的性别信息，其中0对应“保密”、1对应“男”、2对应“女”。代码如下：data:

{userinfo:{

},sex_array:['保密',

'男',

'女']

},

（2）myinfo,wxml中“性别”一栏对应的变量从{{userinfo.sex}}变{{sex_array[userinfo.sex]}}，

这样我的页面就可以正常显示性别了。●解决方法浙江工商大学4.1.2增加页面跳转

要完成页面跳转，只需要给navigator组件的url属性添加跳转链接，使得点击需要修改的信息时，跳转至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>其中跳转路径中带了changWhat参数，且changWhat=name，实现带参跳转，以便后续识别修改的是什么信息。另外手机号、性别、学校、学号和入学年份的跳转路径中的changeWhat参数的值分别为tel、sex、school、number和enter_year。浙江工商大学4.1.2增加页面跳转还有一个头像信息的修改，豆豆云助教中暂时不支持修改头像的功能，因此“头像”的navigator组件中的url属性就不需要了，另外给它添加一个bindtap的事件处理函数，使得点击头像时，提示“头像暂不支持修改”，但是发现删了url属性之后，单击“头像”按钮时，会报错。4.1.2增加页面跳转

浙江工商大学将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页面布局

浙江工商大学change页面的也相对简单，只要一个简单的文本框即可，页面最终效果。4.2新建change页面

02ranspageT浙江工商大学4.2.1change页面布局在WeUI样式库的表单--input中，会发现找不到完全相同的样式，但是可以找到两个与页面最终效果相似的表单输入。浙江工商大学4.2.1change页面布局

将这两个表单输入的样式对应的wxml文件代码，拷贝doudouyun项目中，具体代码如下：<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>浙江工商大学4.2.1change页面逻辑为了用户的使用友好性，需要对change

页面的输入框placeholder与导航栏标题文字进行处理，使得用户进入修改页面时，可以从placeholder与导航标题中了解自己需要修改的是什么信息。另外在输入框中显示用户原本的信息，以便用户在修改信息时可以看到原本的信息，在原有信息基础上进行修改。浙江工商大学4.2.1change页面逻辑1.将change.wxml

文件中input

组件的placeholder

属性值进行修改，将原来的”请输入文本”改为变量”{{placeholder}}“，并增加value

属性，

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

并在change.js

文件的data

数组中添加变量placeholder

和value，初始值为空。并且对变量placeholder和value

赋值。3.由于页面参数中changeWhat

的值均为英文，而在页面上需要显示中文才更合乎情景，因此需要在data

数组中增加一个infoArray数组，实现中英转换。由于性别信息的特殊性，需要增加一个sex_array

数组。浙江工商大学4.2.1change页面逻辑change.js

文件代码：浙江工商大学4.2.2添加事件处理函数change

页面中需要添加两个事件处理函数，在change.js中分别添加在input

组件和“保存”所在的view

组件中。4.2.2添加事件处理函数

浙江工商大学valuechange

函数的主要作用是保存用户修改信息时修改后的信息,因此需要在data

数组中添加一个临时变量

tmp，初始值为空，用于存储修改后的信息，具体代码如下:valuechange:function(res){this.setData({tmp:res.detail.value})},4.2.2添加事件处理函数

浙江工商大学submit函数的主要作用是向后台提交修改后的信息，并更新数据库，因此这里需要使用wx.request(

)向后台发起请求，需要向后台发送的数据有openid、change和value，其中change的值为需要修改的信息名，即changeWhat，那么需要在dat