文档章节

微信小程序 - 选择图片显示操作菜单

几个栗子
 几个栗子
发布于 06/17 19:18
字数 406
阅读 29
收藏 0

之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 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],
        })
      }
    })
  }

实现效果如下:

我相信在产品上为用户多想一点,多做一点,就可能可以更受用户欢迎。做事上比别人多想一点,多坚持一些,也许你就会比他人更幸运一些。

 

水平有限,若有问题请留言交流!

互相学习,共同进步 :) 转载请注明出处谢谢!

 

© 著作权归作者所有

共有 人打赏支持
几个栗子
粉丝 6
博文 85
码字总数 41409
作品 0
其它
程序员
米8抢到没?不急,撸个小程序先😎

前言 小程序发布以来,凭借无需安装、用完即走、触手可及、无需注册、无需登录、以及社交裂变等多个优势,一路高歌,变得愈来愈火爆,它革命性的降低了移动应用的开发成本,也正好迎合了用户...

云中玉卷
06/12
0
0
微信公众号管理系统 RhaPHP 1.5.0 发布,支持小程序

RhaPHP 1.5.0 发布。 RhaPHP 是微信平台管理系统,支持多公众号管理,小程序开发,APP接口开发,平台独立且快速简洁易用。灵活的扩展应用机制,具有容易上手,几乎融合微信接口,简单的调用对...

疯狂的二哈
04/12
0
0
微信小程序实现横向滚动块--scroll-view

一、微信小程序scroll-view 设置可滚动视图区域 1.由于手机的宽度比较窄,出现横向滚动的需要很常见 2.scrool-x ,设置区域可以横向滚动 3.scrool-into-view ,设置滚动到指定的id 处,在搜索...

tianma3798
08/24
0
0
win10系统升级后远程连接 出现身份验证错误

一、出现问题原因,说明 昨天系统关机更新后,今天连接服务器出现 远程连接错误,“出现身份验证错误” 对应的win10 更新版本, 2018-适用于 Windows 10 Version 1709 的 05 累积更新,适合基...

tianma3798
05/11
0
0
走路带疯/wx_yq_mall

微信小程序商城【wxyqmall】 微信小程序商城,微信小程序微店,长期维护版本,欢迎大家踊跃提交贡献代码; 参与开发 更多项目请关注 https://gitee.com/TengWeiYun。 小程序开发 [微信:hq5...

走路带疯
08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
33分钟前
2
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
37分钟前
1
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
38分钟前
1
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
45分钟前
1
0
使用xtrabackup完成远程备份

转载收藏,以防丢失 需求 Can I backup remote databases from my local server02-27-2013, 06:17 AMHi, I am using mysqldump so far for taking daily backups of my Production datab......

阿dai
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部