微信小程序 Image API实例详解


Posted in Javascript onSeptember 30, 2016

微信小程序 Image API实例详解

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

主要方法:

wx.chooseImage(object)

微信小程序 Image API实例详解

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)

微信小程序 Image API实例详解

这又是一个奇葩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')
        }
   })
 }


})

感谢阅读本文,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Web制作验证码功能实例代码
Jun 19 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 #Javascript
JavaScript 链式结构序列化详解
Sep 30 #Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 #Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 #Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 #Javascript
javascript的几种写法总结
Sep 30 #Javascript
Vue.js实现拖放效果的实例
Sep 30 #Javascript
You might like
Codeigniter检测表单post数据的方法
2015/03/21 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
对python中的pop函数和append函数详解
2018/05/04 Python
python对日志进行处理的实例代码
2018/10/06 Python
python 二维数组90度旋转的方法
2019/01/28 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
如何使用python切换hosts文件
2020/04/29 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
啤酒节策划方案
2014/05/28 职场文书
社会实践活动总结范文
2014/07/03 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
企业安全生产检查制度
2015/08/06 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python