終於，經過大概一週時間，磕磕絆絆地提交稽核了，一個移動猿開發小程式，也算有了些心得，也遇到了些坑，這裡和大家一起分享下。

怎麼樣調佈局

先說一個題外話，最後引入正題。
如果翻看過一些資料，大家肯定很容易會發現一件事，那就是關於image標籤的預設寬高，幾乎是異口同聲地說是320px*240px，哥們兒一直很納悶，文件上沒有的東西，為麼大家都這麼肯定的。
終於一次，一個前端的兄弟給我解了惑，下面來個例子。

<image src="{{url}}"></image>
<image src="../../images/index_bg.png"></image
 
>

很簡單，就是2張圖片，一張網路圖片，一張本地圖片，並沒有設定圖片大小，注意，這就是整個wxml的全部了，再沒有其它標籤了。
網路圖片是我隨便找的，可以看出，2張圖片的顯示大小是一致的，可以推定有一個預設大小，那麼這個預設大小怎麼看，下面是關鍵，來張動圖，high一下。

選擇除錯，中間的視窗上面選中Wxml，然後點選其中一個標籤，在右面的視窗就能看到它的動態佈局，可以看到，預設的圖片寬高就是320px*240px！
並且，我們還可以手動更改這裡的屬性，能夠快速看到效果，不用每次想看效果，都要編譯（或者儲存）一次，多麼地簡單啊！
最重要的是，很多樣式的問題，都可以通過點選有問題的標籤，檢視它的樣式，到底哪裡不對。

執行在手機上，怎麼看log

真機上請求介面，有一個bug，但在開發工具上是正常的，為了除錯，只能將自己懷疑有問題的值，不斷用彈窗彈出來…
後來知道，原來小程式也是有自己的工具的，叫vConsole。
下面我們來說一下開啟vConsole的步驟。

第一張圖中，點選右上角的3個點，就會彈出下面的彈窗，之後點選下面的【開啟除錯】，會退出當前小程式，等再進來時，就是第二張圖了。
第二張圖的右下角，有一個綠色的按鈕，點選它，就可以看除錯資訊，彈出第3個彈窗，第3個彈窗滑到底部就是第4張圖，可以看到有一個輸入框，可以在裡面輸入命令。

掌握了這4步，就可以在手機上除錯了，high不high！

wxml怎麼向js傳值，js怎麼獲取

先看一個wxml

<image src="{{url}}" bindtap="click" data-url="{{url}}"></image>
<image src="../../images/index_bg.png"></image>

一看就知道，這個佈局，跟最上面的佈局幾乎一毛一樣，只是在第一張圖上添加了點選事件，還加了一個data-url的屬性。
其實data-url並沒有規定在文件裡，規定的是data-,後面接什麼都可以，開心就好。這個值，會在點選的時候，當做引數傳入。
那麼，我們怎麼獲取這個傳入的引數，引數就是我們需要的url嗎？並不是，它是經過封裝的，封裝規律沒搞清楚，不過，我可以分享一下，我是怎麼獲取到正確的引數的。
下面是點選事件的js方法

click:function(args){
  console.log(args)
}

然後我們執行程式，並觸發一次點選事件，檢視一下列印值，如下圖。

可以發現，我們需要的url的路徑為currentTarget.dataset.url，如果再加上引數args的話，就是args.currentTarget.dataset.url。我們來改變一下列印語句，並列印一下args.currentTarget.dataset.url，看看是不是我們需要的。

 click:function(args){
   console.log(args)
   console.log(args.currentTarget.dataset.url)
 }

看到了吧，這正是我們需要的！

複用程式碼

一個移動猿，面向物件的思想深入骨髓，總想抽取出一些方法來，在小程式中戰戰兢兢地試了試發現，也可以啊！
來個簡單的。
佈局還是上面的佈局，2張圖片，第1張圖片上加了個點選事件，主要看下點選事件，如下

click:function(args){
  console.log(args)
  var url = args.currentTarget.dataset.url
  this.printUrl(url)
},
printUrl:function(args){
  console.log("--------------")
  console.log(args)
}

上面，我們自定義了一個printUrl方法，並且有一個輸入引數args。來看下列印結果

perfect！！！
可以看出，我們自定義的方法被呼叫了。
不過有一個細節不知道大家注意到沒有，呼叫的時候，我在方法名前加了this.，如果不加會怎麼樣，來看下結果

看，會報錯，說printUrl方法是未定義的，所以說，呼叫自定義方法，必須加上this.（如果是在其它方法的回撥中調自定義方法，則要加that.（如果你寫的是var that = this的話））

好了，今天說了一些與實現效果無關的東西，但都非常有用。下一篇，我們會說一下，專案中遇到的一些問題。