文档章节

微信小程序把玩(三十二)Image API

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 312
阅读 2
收藏 0

这里写图片描述

选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用

主要方法:

wx.chooseImage(object)

这里写图片描述

wxml

<!--监听按钮--> <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button> <!--通过数据绑定的方式动态获取js数据--> <image src="{{source}}" mode="aspecFill" style="width: 640rpx; height: 640rpx"/> 

js

Page({
  data:{
    // text:"这是一个页面"
    source: ''
  },
  /** * 选择相册或者相机 配合上传图片接口用 */
  listenerButtonChooseImage: function() {
      var that = this;
      wx.chooseImage({
          count: 1,
          //original原图,compressed压缩图
          sizeType: ['original'],
          //album来源相册 camera相机 
          sourceType: ['album', 'camera'],
          //成功时会回调
          success: function(res) {
              //重绘视图
              that.setData({
                  source: res.tempFilePaths
              })
          }
      })
  },

wx.previewImage(object)

这里写图片描述

这又是一个奇葩API真实搞不懂怎么用这个。先模仿下官方咋使用但是没有效果,搞懂了在补充下自己的使用

wxml

<!--图片预览-->
<button type="primary" bindtap="listenerButtonPreviewImage">展示图片</button>

js

Page({
  data:{
    // text:"这是一个页面"
    source: ''
  },

  /** * 预览图片 又一个奇葩接口 */
  listenerButtonPreviewImage: function() {
      wx.previewImage({
          current: 'http://img.souutu.com/2016/0511/20160511055648316.jpg',
          urls: [
              'http://img.souutu.com/2016/0511/20160511055648316.jpg',
               'http://img.souutu.com/2016/0511/20160511055650751.jpg',
               'http://img.souutu.com/2016/0511/20160511054928658.jpg'
               ],
               //这根本就不走
               success: function(res) {
                   console.log(res);
               },
               //也根本不走
               fail: function() {
                   console.log('fail')
               }
      })
  }


})

本文转载自:http://blog.csdn.net/u014360817/article/details/52685358

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
微信小程序开发系列六:微信框架API的调用

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发...

JerryWang_SAP
10/21
0
0
微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二维码的方式发送给其他...

JerryWang_SAP
10/21
0
0
微信小程序开发系列七:微信小程序的页面跳转

微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发...

JerryWang_SAP
10/22
0
0
美团外卖小程序的探索和实践(演讲内容整理)丨掘金开发者大会

2017年1月9日,微信官方在2017微信公开课Pro上发布的小程序正式上线,开创了小程序开发的时代。我们的美团外卖的业务也逐步加入到小程序开发的队伍中。小程序有着无需安装、触手可及、用完即...

掘金官方
09/25
0
0
一大波编程视频资料赠送(亲自整理)

为了感恩大家长久以来的关注和支持,小编准备了一些福利,整理了包含前端,Java,产品经理,微信小程序,Python,网站源码,Android应用视频教程,微信公众平台开发教程及材料等资源合集大放...

祈澈姑娘
05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么日志要private static final

private static final Log logger = LogFactory.getLog(SpringProperties.class); 对于使用PMD的任何人来说,如果日志记录器没有声明为静态的和final的,那么这个博客的标题就会出现在PMD错误...

stys35
5分钟前
0
0
基于深度学习模型Wide&Deep的推荐

本实验选用数据为UCI开源数据集,仅用于学习,请勿商用) Wide&Deep推荐算法出自一篇论文《Wide&Deep Learning for RecommenderSystems》,Wide&Deep由两部分组成,分别是Wide和Deep。先来说...

阿里云官方博客
9分钟前
0
0
列出文件目录结构

以下代码可快速列出所有文件夹,子文件夹下文件 用tree /f显示为树形结构 mypath = wsh.exec("cmd /c tree /f " & Chr(34) & mypath & Chr(34)).StdOut.ReadAll 用 dir显示为长文件名结构 my...

tedzheng
10分钟前
0
0
8.05-Win10 的一些个人设置

1、隐藏 Cortana搜索框 右击任务栏 ——> 找到Cortana ——> 里面有三个选项(隐藏;显示Cortana图标;显示搜索框) ——> 选中自己所需样式 2、显示“我的电脑”等按钮 桌面右键 ——> 个性...

静以修身2025
12分钟前
0
0
windows 下 es安装ik后报错无法启动

1、没有安装分词器时可以正常启动 2、在安装分词器后就报错了 错误信息:Exception in thread "main" java.security.AccessControlException: access denied ("java.io.FilePermission" "D...

zhu_kai1
16分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部