目錄：
FAQ：
<block wx:for> 和 <view wx:for>的區別
坑列表：
數據綁定
字符串運算
<view class="price">{{info.name + info.family.addr}}</view>
- 如果info是空，不會報錯，生成的結果和JS相同。undefined + undefined = NaN
- 如果family是空，不會報錯，生成的結果和JS相同。string + undefined = stringundefined
- 如果屬性都有效，正常的字符串加法運算
之所以這樣的原因是因為微信的語法解析分三部分，優先級高的點引用在先，加法在后。是這樣的
var scr = "info.name + info.family.addr".split(' ')
var oper = scr[1];
"info.name".split('.').find in dataMap
"info.family.addr".split('.') find in dataMap
if(null) {
return undefined
}
//注意：想想oper是undefined會怎樣？
eval(a oper b) || ''
目前支持的operation有所有算術運算、位運算和邏輯運算，三目運算。所以就不難理解下面的寫法將會引發致命錯誤
<view class="price">{{info.name info.family.addr}}</view>
因為找不到operation，View Thread拋出錯誤。渲染失敗，頁面呲掉。
<view class="price">{{info.name}}{{info.family.addr}}</view>
這是最安全的寫法，不過很難看懂。它相當於輸出（渲染）
console.log(a||''); console.log(b||'');
然而下面的，哈哈，它就不是一個運算了，
<view class="price">{{info.name}} + {{info.family.addr}}</view>
而是輸出（渲染）
console.log(a||''); console.log('+'); console.log(b||'');
一個坑
<view class="price">${{v}}</view>
注意：上面的美元符號。這種情況下，頁面會拋出異常
Uncaught ReferenceError: $gwx is not defined
如果你知道這個錯的原因，請告訴我。。。
條件渲染
wx:if
<view wx:if="{{name}}">{{name}}</view>
- 當name是null,0,false，特別是空字符串''時，這些js判斷為假的值wx:if也判斷為假。
Tip: 此時的行為和js相同。
<view wx:if="{{obj.val.name}}">{{name}}</view>
- 當obj不存在的時候，即：
obj = undefined。不管引用了多少層。wx:if什么都不做，並不出錯。
Tip: 此時的行為和js不同，不過極可能正是你想要的效果。
- 但是，尤其要注意。當
obj = null的時候，上面的代碼會拋出異常。 原因是，微信小程序渲染線程中，把null當成object。 當嘗試訪問null的某個屬性（這里為val）時，發生了異常。 同樣，在wx:for中也會這樣。微信小程序渲染線程的本來目的是要容錯， 那么起碼在版本v0.11.112301之前，可以說這里的情況是其自身的一個bug。 - 除了null，NaN也是這樣。
列表渲染
wx:for
<block wx:for="{{obj}}"><view>{{item}}</view></block>
- 如果obj是null, '', false等js認為的空，什么都不做
- 如果obj是{},[]空對象，什么都不做
- 如果是字符串，則每個字符為一個元素
- 如果是個對象，則輸出value，item為value。比如{id:1, name:'abc'}，輸出1和abc
- 如果是個數組，則輸出每個元素，item為元素
Tip: 此時的行為和js相同。
<block wx:for="{{obj.data.name}}"><view>{{item}}</view></block>
當obj不存在的時候，即：obj=undefined。不管引用了多少層。wx:if什么都不做，並不出錯。
Tip: 此時的行為和js不同，不過極可能正是你想要的效果。
- 尤其要注意。當
obj = null時，頁面會異常。
<block wx:for> 和 <view wx:for>的區別
| <block wx:for> | <view wx:for> |
| <block wx:for="{{[1,2]}}"> |
<view wx:for="{{[1,2]}}"> |
| <view>hello</view> |
<view> |
API
wx.request(OBJECT)
- 客戶端超時
{"errMsg":"request:fail"}
- 服務器超時
{"errMsg":"request:fail"}
返回的err不是個Error對象，是個普通對象
- 成功返回
{errMsg: "request:ok", data: "", statusCode: 500}
@all，我剛才寫了一個服務端，制造各種錯誤，觀察wx.request API的行為。
發現，只要回調fail說明網絡異常（不管客戶端，服務端誰導致的）；success回調，說明網絡是通的（即使statusCode是500）。
我的意思是：大家統一下 ，如果要處理'網絡錯誤,請稍后重試' 這種錯誤，都放在fail中。
而像500，404這種錯，可以酌情給出應用相關的錯誤提示。
微信版本6.3.29沒有wx:showModal方法
發現一個坑：下面的例子，頁面會呲
Page({ data: { icons: null } }) <view data-src="{{icons.search}}">hello</view>
input組件發生輸入事件后，其“數據綁定機制”不再工作
fixed: 該問題在 2017-03-09 發現已經解決
這個問題非常詭異，我花了5個小時才解決它
問題是這樣的
<!--index.wxml-->
<input type="text" placeholder="請輸入關鍵字" bindinput="inputKeyword" value="{{keywords}}"/>
<view bindtap="clearInput">點我清空文本框</view>
//index.js
Page({
data: {
keywords: ''
},
clearInput: function(e) {
console.log('click');
this.setData({
keywords: ''
});
},
onLoad: function () {
console.log('onLoad')
}
});
上面的程序在運行時，會發現清除不能生效
--------------------------------------華麗的轉身-----------------------------------
下面是解決方法
<!--index.wxml-->
<input type="text" placeholder="請輸入關鍵字" bindinput="inputKeyword" value="{{keywords}}"/>
<view bindtap="clearInput">點我清空文本框</view>
//index.js
Page({
data: {
keywords: ''
},
clearInput: function(e) {
console.log('click');
this.setData({
keywords: '-'
});
this.setData({
keywords: ''
});
},
onLoad: function () {
console.log('onLoad')
}
});
其實是添加了下面的一句話。
image組件不支持hidden屬性
用微信自帶的例子說明，下面的程序不能生效
<image hidden="{{true}}" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
想要隱藏，需要用下面的方法
<view hidden="{{true}}"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> </view>