微信小程序实现图片轮播及文件上传


Posted in Javascript onApril 07, 2017

 微信小程序实现图片轮播及文件上传

刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传。

图片轮播:

index.js

<span style="font-size:14px;">var app = getApp()  
Page({ 
  data:{ 
     mode: 'aspectFit', 
   // src:'../images/timg1.jpg', 
    imgUrls:[ 
      '../images/1.jpg', 
      '../images/2.jpg', 
      '../images/3.jpg', 
       
      '../images/4.jpg' 
    ], 
  indicatorDots: true,  //是否出现焦点 
  autoplay: true,  //是否自动播放 
  interval: 2000,  //自动播放时间间隔 
  duration: 1000,  //滑动动画时间 
  userInfo: {}  
  }, 
  onLoad:function(){ 
    console.log('onLoad Test'); 
  } 
})</span>

注:imgUrls中为本地图片数组。

index.wxml:

<swiper indicator-dots = "{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> 
<block wx:for="{{imgUrls}}"> 
  <swiper-item class="swiper_i"> 
    <image src="{{item}}" mode="{{mode}}" class="slide-image" /> 
  </swiper-item> 
  </block> 
</swiper>

index.json:

{ 
  "navigationBarTitleText": "相册" 
}

index.wxss:

.slide-image{ 
  width:100%; 
  height:100%; 
} 
.swiper_i{ 
  text-align: center; 
  width:100%; 
}

好了,这是图片轮播的几个文件。会在app.json中配置。

接下来是图片上传的。因为没有服务器,暂时不能上传,但是可以从本地相册或拍照获取照片。

upload.js:

var app = getApp()  
Page({ 
  data:{ 
  // text:"这是一个页面" 
  source: '', 
  tt:false 
 }, 
 /** 
  * 选择相册或者相机 配合上传图片接口用 
  */ 
 onLoad: 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, 
         tt:true 
       }) 
       /* var tempFilePaths = res.tempFilePaths 
      wx.uploadFile({ 
      url: 'https://', //仅为示例,非真实的接口地址 
      filePath: tempFilePaths[0], 
      name: 'file', 
      formData:{ 
      'user': 'test' 
      }, 
      success: function(res){ 
      var data = res.data 
      //do something 
      } 
    })*/ 
     } 
   }) 
 }, 
 /*onHide:function(){ 
   this.setData({ 
     source:'' 
   }) 
 }*/ 
})

upload.json:

{ 
  "navigationBarTitleText": "上传图片" 
}

upload.wxml:

<view class="Container"> 
<image src="{{source}}" mode="aspectFit" class="image-i"/> 
<block wx:if="{{tt}}"> 
  <button type="primary" bindtap="listenerButtonChooseImage">确认上传</button> 
</block> 
</view>

upload.wxss:

/* pages/upload/upload.wxss */ 
.Container{ 
  text-align:center; 
  width:100%; 
} 
.image-i{ 
  width:100%; 
  height:100%; 
}

app.js为空。

app.json:

{ 
 "pages": [      
  "pages/index/index", 
  "pages/upload/upload" 
 ],  
 "window": {      
  "navigationBarTextStyle": "black", 
  "navigationBarTitleText": "演示2", 
  "navigationBarBackgroundColor": "#fbf9fe", 
  "backgroundColor": "#fbf9fe" 
 }, 
 "networkTimeout": {     
  "request": 10000, 
  "connectSocket": 10000, 
  "uploadFile": 10000, 
  "downloadFile": 10000 
 }, 
 "tabBar": {     
  "list": [{ 
   "pagePath": "pages/index/index", 
   "text": "显示图片", 
   "iconPath": "pages/images/icon_API.png", 
   "selectedIconPath": "pages/images/icon_API_HL.png" 
  },{ 
   "pagePath": "pages/upload/upload", 
   "text": "上传", 
   "iconPath": "pages/images/icon_API.png", 
   "selectedIconPath": "pages/images/icon_API_HL.png" 
  }] 
 }, 
 "debug": true 
  
}

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

Javascript 相关文章推荐
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
javascript内存管理详细解析
Nov 11 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
详解vue 兼容IE报错解决方案
Dec 29 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 #Javascript
JS仿Base.js实现的继承示例
Apr 07 #Javascript
vue-hook-form使用详解
Apr 07 #Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
You might like
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
javascript每日必学之循环
2016/02/19 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
python模拟事件触发机制详解
2018/01/19 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
高中数学教师求职信
2013/10/30 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
thinkphp 获取控制器及控制器方法
2021/04/16 PHP