微信小程序开发边做边学 课件 知识点篇--微信小程序 第4、5章 MyInfo 页面调整、申请课程号.pptx

小程序开发从入门到实践

知识点修改我的信息模块开发

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?否接口调用成功的回调函数fail