文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 312
阅读 1
收藏 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
江门
高级程序员
美团外卖小程序的探索和实践(演讲内容整理)丨掘金开发者大会

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

掘金官方
09/25
0
0
微信小程序WebSocket开发

微信小程序WebSocket开发 让我们来实现一个简单的微信小程序WebSocket。WebSocket是一种没有被规范化的网络协议,不过网络上又有文章说是2011年被国际化。不过不管怎么样它摆脱了Http的无状态...

王And木
05/31
0
0
一大波编程视频资料赠送(亲自整理)

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

祈澈姑娘
05/08
0
0
掘金开发者大会 ∙ 微信小程序专场正式启动

一场迟来的聚会 自2017年1月微信小程序正式上线以来,应用数与开发者数持续增长,目前已经有超过100万个微信小程序发布且相关开发者也超过了150万。同样,我们也可以通过掘金的数据看到 2017...

掘金官方
08/07
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python生成HTML报告

# -*- coding=utf-8 -*-# author=zyqimport timeclass Template(object): '''html报告''' HTML_TEMP=''' <!DOCTYPE html> <html lang="en"> <head......

小白兔_球球
22分钟前
1
0
模型融合资料汇总

https://blog.csdn.net/u012526003/article/details/79109418https://blog.csdn.net/willduan1/article/details/73618677https://blog.csdn.net/wstcjf/article/details/77989963?utm_so......

KYO4321
24分钟前
1
0
热更步骤

根据官方文档: http://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html version_generator.js文件放到项目根目录下 注意步骤的顺序: 1.构建 2.根据构建目录运行下面命令...

Valiancer
25分钟前
2
0
小程序重写CheckBox样式

CheckBox /* 重写 checkbox 样式 *//* 未选中的 背景样式 */checkbox .wx-checkbox-input{ border-radius: 50%; width: 40rpx; height: 40rpx;}/* 选中后的 背景样式...

originDu
29分钟前
1
0
mysql自动安装脚本

[root@localhost_04 ~]# cat mysql.sh #!/bin/bash# "################检查本机安装mysql的基本条件########################"echo "Checking  user :"d=`id -u`if [ $d ......

芬野de博客
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部