今天繼續(xù)看了一些文檔相關的內容，同時也試了視頻組件和網(wǎng)絡請求的接口。小程序沒有document，window操控提供。很多數(shù)據(jù)要換成類似vuejs和React Native的這種方式來看待。數(shù)據(jù)綁定的支持可以對一些視圖進行刷新。

1.開發(fā)思維需要轉變

jQuery 在操作dom是非常好用和便利。然而在小程序開發(fā)就要換成了數(shù)據(jù)驅動就要對其換一種開發(fā)思維方式了。因為小程序目前文檔中已經(jīng)說明了限制了window和document。 
很多年前adobe flex的推出mxml的語言，這種早期的設計后來也被證實是超前的設計。在angular 和現(xiàn)在微信開發(fā)依舊可以看到一些縮影。微信wxml會傾向于React native的方案。采取數(shù)據(jù)data綁定視圖變化也是傳統(tǒng)的mvc方式。 
類似input這些組件，在過去我們經(jīng)常使用$(“#id”).val().獲取id值去調用文本輸入框內容是判斷否為空。而采用數(shù)據(jù)的方式，則先定義一個文本變量。然后通過輸入事件獲得內容，再用這個方式去和數(shù)據(jù)進行判斷。

內容會通過這個事件通知來得到當前的值。

<view class="container2">
  <view class="panel">
      <label class="title">請輸入查詢內容</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%;
}

我們可以不用理會樣式先，關注是文本框如何獲取到內容。input支持事件獲取。有這個字段就可以獲得用戶輸入的內容了。

2.如何觸發(fā)按鈕點擊

大部分想在測試過程調用一個接口，這個調用方式是最直接也是最傻瓜。在小程序提供案例請求了個人微信信息，返回后可以獲取到小頭像和名字的基礎信息。  好了，按鈕是如何點擊處理？  同樣

 <button bindtap='onRequest' type="primary" class="searBtn">查詢</button>

• 1

• 1

定義按鈕綁定一個點擊觸控行為bindtap=’onRequest’，通過這個點擊事情獲取文本輸入的內容。然后在me.js里面進行對代碼編輯。加入onRequest的函數(shù)處理。

Page({
  data: {
      inputValue:""
  },
  onInput:function(event){  
      inputValue = event.detail;//記錄輸入的值
  },
  onRequest:function(){
    console.log("我點擊了"+inputValue );
 });

3.點擊后我希望調用接口

網(wǎng)絡請求支持https 和websocket。方法API如下  wx.request(OBJECT)

這里提供了相應參數(shù)說明文檔。

我們嘗試調用豆瓣的電影接口，返回一些數(shù)據(jù)回來。它可以處理成功的函數(shù)調度，同時在錯誤的時候，也可以進行輸出反饋。

  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("接口調用失敗");
      }
    })

通過點擊這個按鈕后，出現(xiàn)了我們想要的數(shù)據(jù)。 

效果圖展示。 

 

這幾天斷斷續(xù)續(xù)查看小程序的開發(fā)。在熟悉的過程，發(fā)現(xiàn)微信提供的這個開發(fā)工具還沒完善，提示代碼幾乎無法玩。這套東西也是基于vscode。為何不在單獨的vscode完善一下？對于維護這套ide而言，對web開發(fā)工具還需要時間完善。

4.選擇圖片

微信小程序提供了一個選擇圖片的接口，查看了一些圖片選擇的接口。熟悉這個接口，可以查看如下鏈接

wx.chooseImage(OBJECT)

    wx.chooseImage({
    count: 1, // 默認9
    sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
    sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
    success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
      var tempFilePaths = res.tempFilePaths;
      console.log(JSON.stringify(res));
    }

選擇圖片的時候，發(fā)生了一個奇怪事情，在選擇項目外的圖片不行。而選擇項目內的圖片是可以的。返回的一個叫res的參數(shù)，通過json化可以看到內容。臨時的路徑tempFilePaths，通過綁定一個圖片后，可以顯示其選取的內容。設置多張圖片會返回一個組列。

{"errMsg":"chooseImage:ok","tempFilePaths":["apptmpfile__880781730_o6zAJs-Eqx6eMblKlbSsiLa1FgnY_1474972522650"]}

5.綁定圖片，視圖更新

這個框架似乎嚴格執(zhí)行了mvc的設計。使用數(shù)據(jù)驅動方式來驅動視圖變化。在普通賦值，視圖并不會改變。需要使用setData的內置方法來驅動。

<view class="container2">
  <view class="tabtab">
     <label>首頁</label>
     <label>最新</label>
     <label>最熱</label>
  </view>
   <view class="panel">
    <button bindtap='onRequest' type="primary" class="searBtn">查詢</button>
     <image src="{{imagesrc}}" class="icon"/>
   </view> 
</view>

下面程序，通過點擊一個按鈕，選取一個圖片。圖片的鏈接，我們需要聲明一個變量來保存。變量綁定在視圖中

 <image src="{{imagesrc}}" class="icon"/>
   </view> 

js代碼

//index.js
//獲取應用實例
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, // 默認9
    sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
    sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
    success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
       //imagesrc = tempFilePaths;

       self.setData({ imagesrc: tempFilePaths})

        console.log(JSON.stringify(res));
    }
   })
  }

})

在更新視圖過程，需要調用setData的方式，由于受到作用域的問題，this需要定義一個臨時值  var self = this;

在編輯器提供的機制里面，對寫不寫分號似乎沒有嚴格限制。習慣了分號寫起來還是會忍不住添加上了。

選擇圖片后，我們可以提供json化處理對象，查看返回的對象信息。目前文檔里面返回的對象信息并沒有提供。這也是文檔所缺陷。

console.log(JSON.stringify(res));

發(fā)現(xiàn)選取圖片的時候，要是不在項目內提供的，返回不到。顯示不出來，不知道為什么會這樣。

效果圖展示：選取后可以展示一張圖片。