微信小程序把玩(三十二)Image API
选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与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')
}
})
}
})
微信小程序把玩(三十二)Image API的更多相关文章
- 微信小程序把玩(十二)text组件
原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...
- 微信小程序把玩(十八)picker组件
原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...
- 微信小程序把玩(十九)radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...
- 微信小程序把玩(十五)checkbox组件
原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...
- 微信小程序把玩(十六)form组件
原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...
- 微信小程序把玩(十四)button组件
原文:微信小程序把玩(十四)button组件 button按钮用的算是最普遍的组件之一. 主要属性: wxml <!--按钮默认样式,点击事件--> <button type=&qu ...
- 微信小程序把玩(十)swiper组件
原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...
- 微信小程序把玩(三)tabBar底部导航
原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...
- 微信小程序开发(十二)Promise将异步改为同步
// utils/utils.js /** * requestPromise用于将wx.request改写成Promise方式 * @param:{string} myUrl 接口地址 * @retu ...
随机推荐
- [Angular] Using directive to create a simple Credit card validator
We will use 'HostListener' and 'HostBinding' to accomplish the task. The HTML: <label> Credit ...
- 前端切图:一个好看的表格css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- Go 快速入门
入门 Go 语言需要多久?答案是 -- 读完这篇文章的时间!不妨找一个周末的下午,踏上 Go 之旅吧! 更新记录: 2016.12.12: 完成重制 2016.11.02: 增加重点理解和参考链接 2 ...
- [Angular] @ContentChildren and QueryList
We have looked at @ContentChild in article(http://www.cnblogs.com/Answer1215/p/6414657.html). Now le ...
- Change Sudoers Mod 777 To 0440
Method 1: > grub --> recovery mode --> e > ro single <--> rw single init=/bin/bash ...
- App各种Icon及Launch image的尺寸和用途
App各种Icon及Launch image的尺寸和用途 IOS7,8 Asset iPhone 6 Plus (@3x) iPhone 6 and iPhone 5 (@2x) iPhone 4s ...
- 判断navigation中父控制器类型
for (UIViewController *controller in self.navigationController.viewControllers) { if ([controller is ...
- 微信Android终端SDK新手使用指南
1.申请你的AppID 请到 开发者应用登记页面 进行登记,登记并选择移动应用进行设置后,将获得AppID,可立即用于开发.但应用登记完成后还需要提交审核,只有审核通过的应用才能正式发布使用. 2.下 ...
- 快速删除 jar 里面的 BuildConfig.class
快速删除 jar 里面的 BuildConfig.class 起因:多个 jar 包里面的 BuildConfig.class 文件导致编译冲突. 方法一:土方法 使用 jar 解包 jar xf x ...
- 更新edmx文件 无法生成模型:“System.Data.StrongTypingException: 表“TableDetails”中列“IsPrimaryKey”的值为 DBNull
使用EF DBFirst 更新模型的时候,提示的错误,这是VS的EF 引用MYSQL产生的错误,如下图: 解决方案: 1.win+R 打开运行窗口,输入services.msc 回车,然后找到MySQ ...