文档章节

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

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

精选30+云产品,助力企业轻松上云!>>>

这里写图片描述

选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与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')
               }
      })
  }


})
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
加载中
请先登录后再评论。
微信小程序开发 | 把玩系列:各种组件和API实用详解

新手向!微信小程序把玩系列: 微信小程序把玩《一》:window配置,tabBar底部导航,应用生命周期 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 各类组件 微信小程序把玩...

极乐小程序
2019/04/04
10
0
微信小程序教程、微信小程序开发资源下载汇总(6.16日更新,持续更新中……)

摘要:微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、微信小程序技巧合集 微信小程序开发工具 5款微信小程序开发工具使用报告...

极乐小程序
2019/04/04
9
0
微信小程序教程、微信小程序开发资源下载汇总(6.16日更新,持续更新中……)

摘要:微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、微信小程序技巧合集 微信小程序开发工具 5款微信小程序开发工具使用报告...

极乐小程序
2019/04/04
12
0
微信小程序组件探究和应用

1111.jpg 把玩微信小程序组件 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 微信小程序把玩《三》:scroll-view组件,swiper组件,icon组件 微信小程序把玩《四》:tex...

极乐小程序
2019/04/04
2
0
微信小游戏开发Canvas资源汇总

Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器;使用canvas与纯JS版二维码生成 微信小程序学习用完整demo:canvas涂...

osc_jxumvtli
2018/05/04
4
0

没有更多内容

加载失败,请刷新页面

加载更多

跨越了6个阶段,我仍然是生物信息学初学者

首先非常欢迎大家分享自己与生物信息学/生信技能树的故事! 上一期是:我如何从生物科学到生物信息 这一期是我在朋友圈看到了我们单细胞天地常驻编辑周运来的真情流露,邀请他投稿的我们生信...

biotrainee
前天
17
0
网飞是如何运用心理学来完善其客户体验的

原文地址:https://36kr.com/p/5289228 译者:俊一 占据全球网站流量 15%的奈飞,其用户体验设计背后有哪些秘密? 神译局是 36 氪旗下编译团队,关注科技、商业、职场、生活等领域,重点介绍...

高行
02/08
9
0
shell编程中的循环脚本

本文中的部分脚本来源于网络,就不申明原创了,如果这些东西自己学会了,那就是属于自己的了。 求从1加到100的和 使用for循环求和: #!/bin/bash declare -i sum=0 for ((i=1;i<=100;i++));...

Double_冬
2018/08/16
7
0
智能合约:介绍、geth、Ethereum Wallet

从看雪论坛换了一本《智能合约安全分析和审计指南》,看了一些智能合约相关的内容,因为我之前对于区块链的了解仅仅是只知道世界上有一种叫做比特币的东西,所以对于这些概念的理解还是比较困...

yichen115
04/26
9
0
Vue和React技术风格上的不同

在主流框架中,Vue和React都属于全球热门,各自有着大量用户,两者之间的优缺点便带来了众多讨论。 那么这两者之间的关键区别在于哪些方面?为何熟练掌握Vue成为越来越多公司的岗位要求? Vu...

若川
07/02
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部