文档章节

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

几个栗子
 几个栗子
发布于 06/17 19:18
字数 406
阅读 40
收藏 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
博文 88
码字总数 43745
作品 0
其它
程序员
私信 提问
JPress v1.0-rc1 发布,完善微信小程序 API 接口

JPress 正式进入 RC 阶段了。 接下来 JPress 的主要工作是和 微信小程序 对接,同时近期会放出 JPress微信小程序SDK,用户可以方便的通过 JPress微信小程序SDK 开发微信小程序,这个过程中S...

理工男海哥
10/19
0
0
米8抢到没?不急,撸个小程序先😎

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

云中玉卷
06/12
0
0
JPress v1.0-rc.3 发布,类似 WordPress 的 Java 开源软件

JPress 是一个类似 WordPress 的Java开源软件,使用 Jfinal 和 Jboot 进行开发,支持对接微信小程序和微信公众号、同时支持 h5 独立模板(WordPress不支持哟)。 同时,在模板的支持上,JPr...

理工男海哥
10/29
0
0
微信公众号管理系统 RhaPHP 1.5.0 发布,支持小程序

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

疯狂的二哈
04/12
0
0
JPress v1.0-rc2 发布,新增微信小程序 SDK

此版本主要的新增了微信小程序SDK,SDK当然必须是开源的,基于Apache协议,SDK代码托管在:https://gitee.com/fuhai/jpress-miniprogram-sdk 至此,JPress不仅成为新媒体人必用的新博客解决方...

理工男海哥
10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spark性能优化之道

Spark性能优化之道——解决Spark数据倾斜(Data Skew)的N种姿势 本文结合实例详细阐明了Spark数据倾斜的几种场景以及对应的解决方案,包括避免数据源倾斜,调整并行度,使用自定义Partition...

GordonNemo
13分钟前
2
0
大数据驱动业务决策,CDN实时日志重磅上线

摘要: 阿里云CDN上线了实时日志功能,打通日志服务(SLS)的能力,将CDN采集的实时日志,在小于60秒的时间内投递至日志服务,进行实时、交互式分析和报表呈现。通过CDN日志的实时分析,可以快...

阿里云官方博客
18分钟前
1
0
springCloud学习笔记系列(3)-服务容错保护:Spring Cloud Feign

Feign包含了Ribbon和Hystrix,这个在实战中才慢慢体会到它的意义,所谓的包含并不是Feign的jar包包含有Ribbon和Hystrix的jar包这种物理上的包含,而是Feign的功能包含了其他两者的功能这种逻...

快乐的小火柴
19分钟前
1
0
各种数据库数据类型差异

文本 整数 浮点数 decimal Hive数据库 create table default.foo ( a DECIMAL, -- Defaults to decimal(10,0) b DECIMAL(20), -- Defaults to decimal(20,0) c DECIMAL(9, 7), d DE......

了凡川
24分钟前
3
0
springboot中filter的用法

一、在spring的应用中我们存在两种过滤的用法,一种是拦截器、另外一种当然是过滤器。我们这里介绍过滤器在springboot的用法,在springmvc中的用法基本上一样,只是配置上面有点区别。 二、f...

xiaomin0322
42分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部