微信小程序 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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP中读写文件实现代码
2011/10/20 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
js 学习笔记(三)
2009/12/29 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
python线性插值解析
2020/07/05 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
灰雀教学反思
2014/04/28 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
校运会通讯稿
2015/07/18 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS