微信小程序开发边做边学 课件 知识点篇-微信小程序第4章 MyInfo 页面调整

小程序开发从入门到实践知识点修改我的信息模块开发MyInfo页面调整知识点小程序开发1.性别信息显示调整仔细看我的页面，发现“性别”这一栏显示的是2，而不是男或女由于性别是微信从用户所注册的微信中获取的，并且以数字方式保存在数据库中，所以需要在myinfo.js的data{}中设一个数组来显示用户的性别信息，其中0对应“保密”、1对

应“男”、2对应“女”小程序开发修改：myinfo,wxml中“性别”一栏对应的变量从{{userinfo.sex}}变为{{sex_array[userinfo.sex]}}，这样我的页面就可以正常显示性别了

如左图所示小程序开发2.增加页面跳转

在点击需要修改的信息时，进入修改我的信息页面。其中我的页面的样式选择的是带说明、跳转的列项表

因此用到了navigator组件。navigator跳转分为两个状态，一种是关闭当前页面，一种是不关闭当前页面。属性类型默认值说明urlstring

应用内的跳转链接；open-typestringnavigator跳转方式；hover-classstringnavigator-hover指定点击时的样式类，当hover-class=”none”时，点击效果；值说明navigate对应wx.navigateTo或wx.navigateToMiniProgram的功能redirect对应wx.redirectTo的功能switchTab对应wx.switchTab的功能reLaunch对应wx.reLaunch的功能navigateBack对应wx.navigateBack的功能exit退出小程序，target="miniProgram"时生效

open-type的合法值navigator组件属性小程序开发2.增加页面跳转因此要完成页面跳转，只需要给navigator组件的url属性添加跳转链接，使得点击需要修改的信息时，跳转至change页面，以“姓名”为例。其中跳转路径中带了changWhat参数，且changWhat=name，实现带参跳转，以便后续识别修改的是什么信息。另外手机号、性别、学校、学号和入学年份的跳转路径中的changeWhat参数的值分别为tel、sex、school、num和enter_year。小程序开发2.增加页面跳转关于头像信息的修改，豆豆云助教中暂不支持修改头像的功能，因此“头像”的navigator组件中的url属性就不需要了，另外给它添加一个bindtap的事件处理函数，使得点击头像时，提示“头像暂不支持修改”，但是删了url属性之后，单击“头像”按钮时，会报错，如图所示。这是由于navigator组件中open-type属性默认值为“navigate”，对应的是wx.navigateTo的功能，使用navigateTo是需要有“url”属性。navigator组件报错小程序开发2.增加页面跳转因此将navigator组件改为view组件，具体代码如下。myinfo.wxml文件：小程序开发2.增加页面跳转因此将navigator组件改为view组件，具体代码如下。小程序开发其中myinfo.js文件中涉及到了两个知识点，分别是wx.showToast()和方法调用。wx.showToast()wx.showMaodel()一样是界面交互中的一种消息提示框，其属性详见左边所示表格。属性类型默认值必填说明titlestring

是提示内容iconstring‘success’否图标imagestring

否自定义图标的本地路径，image的优先级高于icondurationnumber1500否提示的延迟时间maskbooleanfalse否是否显示透明蒙层，防止触摸穿透successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数（调用成功、失败都会执行）wx.showToast()属性小程序开发其中icon的合法值详见左边表格值说明success显示成功图标，此时title文本最多显示7个汉字长度loading显示加载图标，此时title文本最多显示7个汉字长度none不显示图标，此时title文本最多可显示两行，1.9.0及以上版本支持小程序开发当icon取值不同时，消息提示框提示显示图标不同，开发者可以根据自己的需求选择不同的icon值，如图所示。图icon值为none图icon值为success图icon值为loading小程序开发2.方法调用在myinfo.js文件中openAlert为自定义的一个方法，该方法中含有一个参数e，用于显示消息提示框的标题即title，且该方法实现的是显示消息提示框的功能。方法定义后，调用该方法时，需要使用“this.方法名”即this.openAlert调用方法，myinfo.js中的事件处理函数choseImage中，调用openAlert方法，实现点击头像时，触发choseImage函数，弹出消息提示框。其中“头像暂不支持修改”为openAlert方法中参数e的值。change页面实现知识点小程序开发Change页面布局change页面的也相对简单，只要一个简单的文本框即可，页面最终效果，如图所示。change页面最终效果图

WeUI样式库中相似样式小程序开发Change页面布局将这两个表单输入的样式对应的wxml文件代码，拷贝至doudouyun项目中，具体代码如下。小程序开发Change页面逻辑为了用户的使用友好性，需要对change页面的输入框的placeholder与导航栏标题文字进行处理，使得用户进入修改页面时，可以从placeholder与导航标题中了解自己需要修改的是什么信息。另外在输入框中显示用户原本的信息，以便用户在修改信息时可以看到原本的信息，在原有信息基础上进行修改，具体效果如图所示。小程序开发Change页面逻辑对change页面的页面参数进行处理，实现placeholder与title值的显示。另外由于页面参数中changeWhat的值均为英文，因此需要在data数组中增加一个infoArray数组，实现中英转换。由于性别信息的特殊性，需要增加一个sex_array数组，部分代码如左图所示。小程序开发添加事件处理函数change页面中需要添加两个事件处理函数，分别添加在input组件和“保存”所在的view组件中，如图4–8所示。小程序开发添加事件处理函数valuechange函数valuechange函数的主要作用是保存用户修改信息时修改后的信息，因此需要在data数组中添加一个临时变量tmp，初始值为空，用于存储修改后的信息，具体代码如下小程序开发2.submit函数submit函数的主要作用是向后台提交修改后的信息，并更新数据库，因此这里需要使用wx.request()向后台发起请求，需要向后台发送的数据有openid、change和value。添加事件处理函数配置文件的使用知识点