微信小程序 个人中心 过程化学习

主要介绍下面知识点：

 

 

 1.跳转知识点讲解：

wx.switchTab 　　用于跳转页面 但是 只能跳到Tabbar的页面 而且关闭 所有 非 tabbar 页面。

 

wx.navigateTo  　　跳转到其他页面， 可以返回到上一个页面  ， 但是不能跳转到Tabbar 页面。

 

wx.redirectTo 　　　跳转到其他页面， 不可以返回到上一个页面  ， 即会关闭上一个页面。

 

 wx.reLaunch　　　　既可以跳到标签页 也可以跳到非标签页（Tabbar）。

 

wx.navigateBack　　　　关闭当前页面，返回上一页面或多级页面。

 

上面五个方法的参数如下：

属性	类型	默认值	必填	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

都一样的。

 

---

 

 

2. 选择收获地址API

 

wx.chooseAddress(Object object)：　　获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。

属性	类型	默认值	必填	说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
userName	string	收货人姓名
postalCode	string	邮编
provinceName	string	国标收货地址第一级地址
cityName	string	国标收货地址第二级地址
countyName	string	国标收货地址第三级地址
detailInfo	string	详细收货地址信息
nationalCode	string	收货地址国家码
telNumber	string	收货人手机号码
errMsg	string	错误信息

示例代码

wx.chooseAddress({
  success (res) {
    console.log(res.userName)
    console.log(res.postalCode)
    console.log(res.provinceName)
    console.log(res.cityName)
    console.log(res.countyName)
    console.log(res.detailInfo)
    console.log(res.nationalCode)
    console.log(res.telNumber)
  }
})

 其实挺简单。

 

---

 

3.　　选择照片或者拍照，然后获取图片。

wx.chooseImage(Object object)　　从本地相册选择图片或使用相机拍照

属性	类型	默认值	必填	说明
count	number	9	否	最多可以选择的图片张数
sizeType	Array.<string>	['original', 'compressed']	否	所选的图片的尺寸
sourceType	Array.<string>	['album', 'camera']	否	选择图片的来源
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.sizeType 的合法值

值	说明	最低版本
original	原图
compressed	压缩图

object.sourceType 的合法值

值	说明	最低版本
album	从相册选图
camera	使用相机

object.success 回调函数

参数

Object res

属性	类型	说明	最低版本
tempFilePaths	Array.<string>	图片的本地临时文件路径列表 (本地路径)
tempFiles	Array.<Object>	图片的本地临时文件列表	1.2.0

res.tempFiles 的结构

属性	类型	说明
path	string	本地临时文件路径 (本地路径)
size	number	本地临时文件大小，单位 B

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

 

这个挺重要的 ，如果用到照片很常用 应该要记住几个标红的属性！

 

 

---

 

 

功能实现1 更换头像：

 其实就是用到了　　wx.chooseImage

 

就是把本地临时图片路劲集合 设置到data  然后data再给 img 显示。

其中里面涉及连接网络那就即可。

 

---

功能实现2： 个人页（pages）显示资料  点击修改资料 跳转到资料修改页（page） 进行

 

 

可以看到在这里资料页这里 点击 修改资料 后跳转（提交from表单） ，， 跳转时携带参数的，参数那就是资料信息，名字啊什么的，然后：

显示在修改页上：

 

 代码实现：