微信小程序开发手册

目录：

1. 数据绑定

2. 条件渲染

3. 列表渲染

4. API

FAQ：

<block wx:for> 和 <view wx:for>的区别

wx:if 什么情况下判断为假

坑列表：

微信版本6.3.29没有wx:showModal方法

数据为null时页面会呲

input组件发生输入事件后，其“数据绑定机制”不再工作

image组件不支持hidden属性

---

数据绑定

字符串运算

  <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>hello</view> 　　<view>world</view> </block>	<view wx:for="{{[1,2]}}"> 　　<view>hello</view> 　　<view>world</view> </view>
<view>hello</view> <view>world</view> <view>hello</view> <view>world</view>	<view> 　　<view>hello</view> 　　<view>world</view> </view> <view> 　　<view>hello</view> 　　<view>world</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>