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

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

图片轮播： 
index.js

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');  
    }  
})

注：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  
}