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


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 相关文章推荐
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
Node.js插件安装图文教程
May 06 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
JavaScript数组复制详解
Feb 02 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
自带气泡提示的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
建立文件交换功能的脚本(二)
2006/10/09 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php无序树实现方法
2015/07/28 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python 加密与解密小结
2018/12/06 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
新员工入职感言
2014/02/01 职场文书
代理人委托书
2014/09/16 职场文书
长城的导游词
2015/01/30 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP