之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 wx.chooseImage 选择照片显示出第一格是拍照,后面是相册里的图片。这种实现之前说过了,效果如下。
但是你从用户体验角度多想一下来说无疑是下面这种方式比较好,类似微信点击发朋友圈这种形式,效果如下。
做法:可使用小程序API wx.showActionSheet 显示操作菜单 。
我的实现方式直接贴代码:
chooseimage: function () {
var that = this;
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: "#CED63A",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
that.chooseWxImage('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera')
}
}
}
})
},
chooseWxImage: function (type) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type], // 可以指定来源是相册还是相机
success: function (res) {
console.log(res);
that.setData({
tempFilePaths: res.tempFilePaths[0],
})
}
})
}
实现效果如下:
我相信在产品上为用户多想一点,多做一点,就可能可以更受用户欢迎。做事上比别人多想一点,多坚持一些,也许你就会比他人更幸运一些。
水平有限,若有问题请留言交流!
互相学习,共同进步 :) 转载请注明出处谢谢!