微信小程序开发边做边学 课件 知识点篇-微信小程序第4章 MyInfo 页面调整_第1页
微信小程序开发边做边学 课件 知识点篇-微信小程序第4章 MyInfo 页面调整_第2页
微信小程序开发边做边学 课件 知识点篇-微信小程序第4章 MyInfo 页面调整_第3页
微信小程序开发边做边学 课件 知识点篇-微信小程序第4章 MyInfo 页面调整_第4页
微信小程序开发边做边学 课件 知识点篇-微信小程序第4章 MyInfo 页面调整_第5页
已阅读5页,还剩21页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

小程序开发从入门到实践知识点修改我的信息模块开发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。添加事件处理函数配置文件的使用知识点

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论