終于，經(jīng)過大概一周時(shí)間，磕磕絆絆地提交審核了，一個(gè)移動(dòng)猿開發(fā)小程序，也算有了些心得，也遇到了些坑，這里和大家一起分享下。

怎么樣調(diào)布局

先說一個(gè)題外話，最后引入正題。 
如果翻看過一些資料，大家肯定很容易會(huì)發(fā)現(xiàn)一件事，那就是關(guān)于image標(biāo)簽的默認(rèn)寬高，幾乎是異口同聲地說是320px*240px，哥們兒一直很納悶，文檔上沒有的東西，為么大家都這么肯定的。 
終于一次，一個(gè)前端的兄弟給我解了惑，下面來個(gè)例子。 

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

很簡(jiǎn)單，就是2張圖片，一張網(wǎng)絡(luò)圖片，一張本地圖片，并沒有設(shè)置圖片大小，注意，這就是整個(gè)wxml的全部了，再?zèng)]有其它標(biāo)簽了。  網(wǎng)絡(luò)圖片是我隨便找的，可以看出，2張圖片的顯示大小是一致的，可以推定有一個(gè)默認(rèn)大小，那么這個(gè)默認(rèn)大小怎么看，下面是關(guān)鍵，來張動(dòng)圖，high一下。 

選擇調(diào)試，中間的窗口上面選中Wxml，然后點(diǎn)擊其中一個(gè)標(biāo)簽，在右面的窗口就能看到它的動(dòng)態(tài)布局，可以看到，默認(rèn)的圖片寬高就是320px*240px！  并且，我們還可以手動(dòng)更改這里的屬性，能夠快速看到效果，不用每次想看效果，都要編譯（或者保存）一次，多么地簡(jiǎn)單??！  最重要的是，很多樣式的問題，都可以通過點(diǎn)擊有問題的標(biāo)簽，查看它的樣式，到底哪里不對(duì)。

運(yùn)行在手機(jī)上，怎么看log

真機(jī)上請(qǐng)求接口，有一個(gè)bug，但在開發(fā)工具上是正常的，為了調(diào)試，只能將自己懷疑有問題的值，不斷用彈窗彈出來…  后來知道，原來小程序也是有自己的工具的，叫vConsole。  下面我們來說一下打開vConsole的步驟。 

第一張圖中，點(diǎn)擊右上角的3個(gè)點(diǎn)，就會(huì)彈出下面的彈窗，之后點(diǎn)擊下面的【打開調(diào)試】，會(huì)退出當(dāng)前小程序，等再進(jìn)來時(shí)，就是第二張圖了。  第二張圖的右下角，有一個(gè)綠色的按鈕，點(diǎn)擊它，就可以看調(diào)試信息，彈出第3個(gè)彈窗，第3個(gè)彈窗滑到底部就是第4張圖，可以看到有一個(gè)輸入框，可以在里面輸入命令。

掌握了這4步，就可以在手機(jī)上調(diào)試了，high不high！

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

先看一個(gè)wxml

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

一看就知道，這個(gè)布局，跟最上面的布局幾乎一毛一樣，只是在第一張圖上添加了點(diǎn)擊事件，還加了一個(gè)data-url的屬性。  其實(shí)data-url并沒有規(guī)定在文檔里，規(guī)定的是data-,后面接什么都可以，開心就好。這個(gè)值，會(huì)在點(diǎn)擊的時(shí)候，當(dāng)做參數(shù)傳入。  那么，我們?cè)趺传@取這個(gè)傳入的參數(shù)，參數(shù)就是我們需要的url嗎？并不是，它是經(jīng)過封裝的，封裝規(guī)律沒搞清楚，不過，我可以分享一下，我是怎么獲取到正確的參數(shù)的。  下面是點(diǎn)擊事件的js方法

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

然后我們運(yùn)行程序，并觸發(fā)一次點(diǎn)擊事件，查看一下打印值，如下圖。 

可以發(fā)現(xiàn)，我們需要的url的路徑為currentTarget.dataset.url，如果再加上參數(shù)args的話，就是args.currentTarget.dataset.url。我們來改變一下打印語(yǔ)句，并打印一下args.currentTarget.dataset.url，看看是不是我們需要的。

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

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

復(fù)用代碼

一個(gè)移動(dòng)猿，面向?qū)ο蟮乃枷肷钊牍撬?，總想抽取出一些方法來，在小程序中?zhàn)戰(zhàn)兢兢地試了試發(fā)現(xiàn)，也可以?。?nbsp; 來個(gè)簡(jiǎn)單的。  布局還是上面的布局，2張圖片，第1張圖片上加了個(gè)點(diǎn)擊事件，主要看下點(diǎn)擊事件，如下

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

上面，我們自定義了一個(gè)printUrl方法，并且有一個(gè)輸入?yún)?shù)args。來看下打印結(jié)果 

perfect?。?！  可以看出，我們自定義的方法被調(diào)用了。  不過有一個(gè)細(xì)節(jié)不知道大家注意到?jīng)]有，調(diào)用的時(shí)候，我在方法名前加了this.，如果不加會(huì)怎么樣，來看下結(jié)果 

看，會(huì)報(bào)錯(cuò)，說printUrl方法是未定義的，所以說，調(diào)用自定義方法，必須加上this.（如果是在其它方法的回調(diào)中調(diào)自定義方法，則要加that.（如果你寫的是var that = this的話））