主要介绍下面知识点:
1.跳转知识点讲解:
wx.switchTab 用于跳转页面 但是 只能跳到Tabbar的页面 而且关闭 所有 非 tabbar 页面。
wx.navigateTo 跳转到其他页面, 可以返回到上一个页面 , 但是不能跳转到Tabbar 页面。
wx.redirectTo 跳转到其他页面, 不可以返回到上一个页面 , 即会关闭上一个页面。
wx.reLaunch 既可以跳到标签页 也可以跳到非标签页(Tabbar)。
上面五个方法的参数如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
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表单) ,, 跳转时携带参数的,参数那就是资料信息,名字啊什么的,然后:
显示在修改页上:
代码实现:
请发表评论