夜光 带你走进微信小程序研发（十六）

夜光序言：

 

“你会想我吗？”

“呃！”

……

“呵呵，开玩笑的，吓到你了吧！”

“真汗到了！”

 

（有多少的心里话，只能以开玩笑的方式说出来；有些东西想试图去争取，又怕失去得更多！）

 

 

 

正文：

 change 页面完善

为了用户的使用友好性，需要对 change 页面的输入框的 placeholder 与导航栏 标题文字进行处理，使得用户进入修改页面时，可以从 placeholder 与导航标题中了解自己需要修改的是什么信息。

 

另外在输入框中显示用户原本的信息，以便用户在修改信息时可以看到原本的信息

 

在原有信息基础上进行修改，具体效果如图：

 

这里主要是对 change 页面的页面参数进行处理，实现 placeholder 与 title 值的 显示。

首先将 change.wxml 文件中 input 组件的 placeholder 属性值进行修改，将原 来的”请输入文本”改为变量”{{placeholder}}”，并增加value属性，且value=”{{value}}”， 并在 change.js 文件的 data 数组中添加变量 placeholder 和 value，初始值为空。然后 就是对变量 placeholder 和 value 赋值。

 

另外由于页面参数中 changeWhat 的值均为英文，而在页面上需要显示中文才 更合乎情景，因此需要在 data 数组中增加一个 infoArray 数组，实现中英转换。由 于性别信息的特殊性，需要增加一个 sex_array数组，具体代码如下。

添加事件处理函数

change 页面中需要添加两个事件处理函数，分别添加在 input 组件和“保存” 所在的 view 组件中，如图 ：

 

其中增加了几个 if 语句进行判断，当 tmp 为空，是提示“信息不能为空”，并 且通过 return 回到该 if 判断，直到 tmp 的值不为空时，才结束该判断，继续执行下110面的逻辑。

 

另外当修改性别信息时，需要将 tmp 的值重新赋值，tmp 为“男”时， 赋值为 1，tmp 为“女”时，赋值为 2，tmp 为“保密”时，赋值为 0。还有就是当 tmp 的值与原有信息的值相等时，直接使用 wx.navigateBack()回到我的页面，这样 可以减少后台请求次数，当 tmp 的值与原有信息的值不相等时，

使用 wx.request()向后台请求更新用户信息，修改数据库中存储的用户信息。若请求成功，使用 wx.setStorageSync(‘userInfo’)更新本地缓存，并返回我的页面，若请求失败，提示“修改失败”并返回我的页面。

---

修改信息后回到我的页面会发现，我的页面中对应的信息还没修改成功，但是 storage面板中的信息已经完成修改

---

由于myinfo.js中， userinfo变量的赋值是在onLoad函数中赋值的，而onLoad 函数只有在重新编译或者关闭该页面重新打开时，才会执行。

---

而前往修改页面时， 使用的 navigator 组件跳转与 wx.navigateTo 相同，并不会关闭我的页面，因此使用 wx.navigateBack 回到我的页面时，onLoad 函数不会再次执行，userinfo 的值并没有 更新，解决方法就是在 onShow 函数中对 userinfo赋值，因为 onShow 函数的作用是监听页面显示，会在页面每次显示时执行。具体代码如下。