视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片.
wx.chooseImage({})
首先在数据中定义接收数据的变量，然后调用方法选择图片，将图片显示出来。
图片张数，默认9,如果我们设置了多张,那么接收时//就不在是单个变量了,count: 1,sizeType: ['original','compressed'],// original 原图，compressed 压缩图，默认二者都有
sourceType: ['album','camera'],// album 从相册选图，camera 使用相机，默认二者都有
success: function(res){
// 获取成功,将获取到的地址赋值给临时变量
var tempFilePaths = res.tempFilePaths;
that.setData({
//将临时变量赋值给已经在data中定义好的变量
avatarUrl:tempFilePaths
})
},fail: function(res) {
// fail
},complete: function(res) {
// complete
}
})
}
此时我们定义的全局变量,也就是data中的url,已经有值了,现在只需要在页面中显示即可。
如果是多选的话,在显示的时候,就不应该直接显示数据源了,这样会报错的,因为返回的是数组:
图片预览:
下面说一下图片预览:
首先在data中定义好数据源:
获取当前图片的下表
index = e.currentTarget.dataset.index,//数据源
pictures = this.data.pictures;
wx.previewImage({
//当前显示下表
current: pictures[index],//数据源
urls: pictures
})
}
下面在给大家补充下微信小程序图片放大预览功能，具体内容介绍如下所示：
我们可以看到api需要两个参数，分别通过下面的data-list和data-src来传到js中
wxml代码：
js代码：
图片点击事件
imgYu:function(event){
var src = event.currentTarget.dataset.src;//获取data-src
var imgList = event.currentTarget.dataset.list;//获取data-list
//图片预览
wx.previewImage({
current: src,// 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
}
2.使用event.currentTarget.dataset.自定义属性名称 来获取data-的值 如event.currentTarget.dataset.src (获取data-src的值)
3.之后将获取的两个值 放到wx.previewImage接口 里面即可
总结
以上所述是小编给大家介绍的微信小程序选择图片和放大预览图片功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/weapp/35406.html