夜光 带你走进微信小程序研发(十四)

夜光序言:

 

可能的话,我还是愿意永远这么年轻,不经受世事磨难,静静地生活下去,当然这是不可能的。我自认为自己是有受苦的精神准备的。我想做一个像样的人,度过一个像样的人生;想尽量锻炼自己的肌肤,成为一个能够经受任何磨难的人。

 

 

 

 

 

 

 

 

 

正文:修改我的信息模块开发

如何完成修改我的信息页面的开发,该页面主要功能是供用户修改我的页面中有误的个人信息。其中会介绍配置文件的使用以及对性别信息的处理等等。


myInfo 页面调整

既然要完成修改我的页面的开发,首先需要新建一个页面,右击 my 目录,单 击“新建 Page”按钮,并命名为 change。在开始修改我的页面开发之前,还需要对 myinfo 页面进行简单的调整。


性别信息显示调整

仔细看我的页面,发现“性别”这一栏可以修改~~

据库中,所以需要在 myinfo.js data{}中设一个数组来显示用户的性别信息,其中

0 对应“保密”、1 对应“男”、2 对应“女”。代码如下。

data: {

userinfo:{ },

sex_array:['保密', '', '']

},

另 外 myinfo,wxml 中 “ 性 别 ” 一 栏 对 应 的 变 量 从 {{userinfo.sex}} 变 为

{{sex_array[userinfo.sex]}},这样我的页面就可以正常显示性别了


增加页面跳转

既然要完成修改我的信息的功能,那么需要在我的页面增加一个页面跳转,在 点击需要修改的信息时,可以进入修改我的信息页面。其中我的页面的样式选择的是带说明、跳转的列项表,因此用到了 navigator 组件。navigator 跳转分为两个状态,

一种是关闭当前页面,一种是不关闭当前页面。其主要属性如表

其中 open-type 的合法值见表 42

因此要完成页面跳转,只需要给 navigator 组件的 url 属性添加跳转链接,使得 点击需要修改的信息时,跳转至 change 页面,以“姓名”为例,代码如下。

<navigator url="./change?changeWhat=name" class="weui-cell weui-cell

_access" hover-class="weui-cell_active">

<view class="weui-cell__bd">姓名view>

<view class="weui-cell__ft weui-cell__ft_in-access">{{userinfo.name}}view> navigator>

其中跳转路径中带了 changWhat 参数,且 changWhat=name,实现带参跳转, 以便后续识别修改的是什么信息。另外手机号、性别、学校、学号和入学年份的跳 转路径中的 changeWhat 参数的值分别为 telsexschoolnum enter_year

除此之外,还有一个头像信息的修改,豆豆云助教中暂时不支持修改头像的功 能,因此“头像”的 navigator 组件中的 url 属性就不需要了,另外给它添加一个 bindtap 的事件处理函数,使得点击头像时,提示“头像暂不支持修改”,但是发现删了 url 属性之后,单击“头像”按钮时,会报错,如图 43 所示。这是由于 navigator 组件中 open-type 属性默认值为“navigate”,对应的是 wx.navigateTo 的功能,使用navigateTo 是需要有“url”属性。

因此将 navigator 组件改为 view 组件,具体代码如下。

myinfo.wxml 文件:

<view class="weui-cell weui-cell_access"

hover-class="weui-cell_active" bindtap="choseImage">

<view class="weui-cell__bd">头像view>

<view class="weui-cell__ft weui-cell__ft_in-access">

<image class= "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

})

},

其中 myinfo.js 文件中涉及到了两个知识点,分别是 wx.showToast( )和方法调用。


1. wx.showToast( )

wx.showToast( )wx.showMaodel( )一样是界面交互中的一种消息提示框,其属 性详见表 43

猜你喜欢

转载自blog.csdn.net/weixin_41987706/article/details/92379146