今天繼續(xù)看了一些文檔相關(guān)的內(nèi)容,同時(shí)也試了視頻組件和網(wǎng)絡(luò)請(qǐng)求的接口。小程序沒(méi)有document,window操控提供。很多數(shù)據(jù)要換成類似vuejs和React Native的這種方式來(lái)看待。數(shù)據(jù)綁定的支持可以對(duì)一些視圖進(jìn)行刷新。
jQuery 在操作dom是非常好用和便利。然而在小程序開(kāi)發(fā)就要換成了數(shù)據(jù)驅(qū)動(dòng)就要對(duì)其換一種開(kāi)發(fā)思維方式了。因?yàn)樾〕绦蚰壳拔臋n中已經(jīng)說(shuō)明了限制了window和document。
很多年前adobe flex的推出mxml的語(yǔ)言,這種早期的設(shè)計(jì)后來(lái)也被證實(shí)是超前的設(shè)計(jì)。在angular 和現(xiàn)在微信開(kāi)發(fā)依舊可以看到一些縮影。微信wxml會(huì)傾向于React native的方案。采取數(shù)據(jù)data綁定視圖變化也是傳統(tǒng)的mvc方式。
類似input這些組件,在過(guò)去我們經(jīng)常使用$(“#id”).val().獲取id值去調(diào)用文本輸入框內(nèi)容是判斷否為空。而采用數(shù)據(jù)的方式,則先定義一個(gè)文本變量。然后通過(guò)輸入事件獲得內(nèi)容,再用這個(gè)方式去和數(shù)據(jù)進(jìn)行判斷。
內(nèi)容會(huì)通過(guò)這個(gè)事件通知來(lái)得到當(dāng)前的值。
<view class="container2"> <view class="panel"> <label class="title">請(qǐng)輸入查詢內(nèi)容</label> <input class="inputarea" bindinput="onInput"/> <button bindtap='onRequest' type="primary" class="searBtn">查詢</button> </view> </view>
Page({ data: { inputValue:"" }, onInput:function(event){ inputValue = event.detail;//記錄輸入的值 });
.container2{ background-color: #efeff4; height:100% } .panel{ padding-top: 20px; } .title{ margin-left: 4%; } .inputarea{ width: 100%; height: 60px; background-color: #ffffff; margin-top: 10px; } .searBtn{ margin-top: 40px; width: 92%; }
我們可以不用理會(huì)樣式先,關(guān)注是文本框如何獲取到內(nèi)容。input支持事件獲取。有這個(gè)字段就可以獲得用戶輸入的內(nèi)容了。
大部分想在測(cè)試過(guò)程調(diào)用一個(gè)接口,這個(gè)調(diào)用方式是最直接也是最傻瓜。在小程序提供案例請(qǐng)求了個(gè)人微信信息,返回后可以獲取到小頭像和名字的基礎(chǔ)信息。 好了,按鈕是如何點(diǎn)擊處理? 同樣
<button bindtap='onRequest' type="primary" class="searBtn">查詢</button>
定義按鈕綁定一個(gè)點(diǎn)擊觸控行為bindtap=’onRequest’,通過(guò)這個(gè)點(diǎn)擊事情獲取文本輸入的內(nèi)容。然后在me.js里面進(jìn)行對(duì)代碼編輯。加入onRequest的函數(shù)處理。
Page({ data: { inputValue:"" }, onInput:function(event){ inputValue = event.detail;//記錄輸入的值 }, onRequest:function(){ console.log("我點(diǎn)擊了"+inputValue ); });
網(wǎng)絡(luò)請(qǐng)求支持https 和websocket。方法API如下 wx.request(OBJECT)
這里提供了相應(yīng)參數(shù)說(shuō)明文檔。
我們嘗試調(diào)用豆瓣的電影接口,返回一些數(shù)據(jù)回來(lái)。它可以處理成功的函數(shù)調(diào)度,同時(shí)在錯(cuò)誤的時(shí)候,也可以進(jìn)行輸出反饋。
wx.request({ url: 'https://api.douban.com/v2/movie/top250', header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data); wx.redirectTo({ url: '../logs/logs' }) }, fail:function(){ console.log("接口調(diào)用失敗"); } })
通過(guò)點(diǎn)擊這個(gè)按鈕后,出現(xiàn)了我們想要的數(shù)據(jù)。
效果圖展示。
這幾天斷斷續(xù)續(xù)查看小程序的開(kāi)發(fā)。在熟悉的過(guò)程,發(fā)現(xiàn)微信提供的這個(gè)開(kāi)發(fā)工具還沒(méi)完善,提示代碼幾乎無(wú)法玩。這套東西也是基于vscode。為何不在單獨(dú)的vscode完善一下?對(duì)于維護(hù)這套ide而言,對(duì)web開(kāi)發(fā)工具還需要時(shí)間完善。
微信小程序提供了一個(gè)選擇圖片的接口,查看了一些圖片選擇的接口。熟悉這個(gè)接口,可以查看如下鏈接
wx.chooseImage(OBJECT)
wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; console.log(JSON.stringify(res)); }
選擇圖片的時(shí)候,發(fā)生了一個(gè)奇怪事情,在選擇項(xiàng)目外的圖片不行。而選擇項(xiàng)目?jī)?nèi)的圖片是可以的。返回的一個(gè)叫res的參數(shù),通過(guò)json化可以看到內(nèi)容。臨時(shí)的路徑tempFilePaths,通過(guò)綁定一個(gè)圖片后,可以顯示其選取的內(nèi)容。設(shè)置多張圖片會(huì)返回一個(gè)組列。
{"errMsg":"chooseImage:ok","tempFilePaths":["apptmpfile__880781730_o6zAJs-Eqx6eMblKlbSsiLa1FgnY_1474972522650"]}
這個(gè)框架似乎嚴(yán)格執(zhí)行了mvc的設(shè)計(jì)。使用數(shù)據(jù)驅(qū)動(dòng)方式來(lái)驅(qū)動(dòng)視圖變化。在普通賦值,視圖并不會(huì)改變。需要使用setData的內(nèi)置方法來(lái)驅(qū)動(dòng)。
<view class="container2"> <view class="tabtab"> <label>首頁(yè)</label> <label>最新</label> <label>最熱</label> </view> <view class="panel"> <button bindtap='onRequest' type="primary" class="searBtn">查詢</button> <image src="{{imagesrc}}" class="icon"/> </view> </view>
下面程序,通過(guò)點(diǎn)擊一個(gè)按鈕,選取一個(gè)圖片。圖片的鏈接,我們需要聲明一個(gè)變量來(lái)保存。變量綁定在視圖中
<image src="{{imagesrc}}" class="icon"/> </view>
js代碼
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { inputValue:"", imagesrc:"" }, onReady: function (e) { }, onInput:function(event){ inputValue = event.detail;//記錄輸入的值 } , onRequest:function(){ var self = this wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; //imagesrc = tempFilePaths; self.setData({ imagesrc: tempFilePaths}) console.log(JSON.stringify(res)); } }) } })
在更新視圖過(guò)程,需要調(diào)用setData的方式,由于受到作用域的問(wèn)題,this需要定義一個(gè)臨時(shí)值 var self = this;
在編輯器提供的機(jī)制里面,對(duì)寫不寫分號(hào)似乎沒(méi)有嚴(yán)格限制。習(xí)慣了分號(hào)寫起來(lái)還是會(huì)忍不住添加上了。
選擇圖片后,我們可以提供json化處理對(duì)象,查看返回的對(duì)象信息。目前文檔里面返回的對(duì)象信息并沒(méi)有提供。這也是文檔所缺陷。
console.log(JSON.stringify(res));
發(fā)現(xiàn)選取圖片的時(shí)候,要是不在項(xiàng)目?jī)?nèi)提供的,返回不到。顯示不出來(lái),不知道為什么會(huì)這樣。
效果圖展示:選取后可以展示一張圖片。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)