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


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 打开窗口返回值实现代码
Mar 04 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
js异步编程小技巧详解
Aug 14 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 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
Symfony2创建页面实例详解
2016/03/18 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
JS实现页面打印功能
2017/03/16 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang