微信小程序?qū)崿F(xiàn)圖片輪播及文件上傳
剛剛接觸微信小程序,看著網(wǎng)上的資源寫了個(gè)小例子,本地圖片輪播以及圖片上傳。
圖片輪播:
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, //是否出現(xiàn)焦點(diǎn) autoplay: true, //是否自動(dòng)播放 interval: 2000, //自動(dòng)播放時(shí)間間隔 duration: 1000, //滑動(dòng)動(dòng)畫時(shí)間 userInfo: {} }, onLoad:function(){ console.log('onLoad Test'); } })</span> 注:imgUrls中為本地圖片數(shù)組。
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": "相冊(cè)" } index.wxss:
.slide-image{ width:100%; height:100%; } .swiper_i{ text-align: center; width:100%; } 好了,這是圖片輪播的幾個(gè)文件。會(huì)在app.json中配置。
接下來是圖片上傳的。因?yàn)闆]有服務(wù)器,暫時(shí)不能上傳,但是可以從本地相冊(cè)或拍照獲取照片。
upload.js:
var app = getApp() Page({ data:{ // text:"這是一個(gè)頁面" source: '', tt:false }, /** * 選擇相冊(cè)或者相機(jī) 配合上傳圖片接口用 */ onLoad: function() { var that = this; wx.chooseImage({ count: 1, //original原圖,compressed壓縮圖 sizeType: ['original'], //album來源相冊(cè) camera相機(jī) sourceType: ['album', 'camera'], //成功時(shí)會(huì)回調(diào) success: function(res) { //重繪視圖 that.setData({ source: res.tempFilePaths, tt:true }) /* var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://', //僅為示例,非真實(shí)的接口地址 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">確認(rèn)上傳</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 } 感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注