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

1.開發思維需要轉變

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

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

<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.如何觸發按鈕點擊

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

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

• 1

• 1

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

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

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

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

這里提供了相應參數說明文檔。

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

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

通過點擊這個按鈕后，出現了我們想要的數據。 

效果圖展示。 

 

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

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

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

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

5.綁定圖片，視圖更新

這個框架似乎嚴格執行了mvc的設計。使用數據驅動方式來驅動視圖變化。在普通賦值，視圖并不會改變。需要使用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));

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

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