微信小程序开发进阶 - 数据绑定与模块化

   <p>微信小程序的 UI 层如何与控制层交互， 以及怎么样响应用户操作事件， 这次咱们来聊聊。</p>    <h2><strong>WXML</strong></h2>    <p>微信小程序使用 WXML 文件作为 UI 视图。 WXML 其实就是 WeiXin Markup Language 的缩写。 是一种类似 XML 语法结构的 UI 定义方式。</p>    <p>它可以进行数据绑定， 显示 Page 中相应的属性：</p>    <pre>  <code class="language-javascript"><!--   <view> {{message}} </view>   -->  </code></pre>    <p>两对括号中的 message 对应 Page 中 data 属性中的 message：</p>    <pre>  <code class="language-javascript">Page({    data: {      message: 'Hello World'    }  })  </code></pre>    <p>当然， 我们还可以进行循环显示， 这个语法可能会和大家平时使用过的模板语法不太相同：</p>    <pre>  <code class="language-javascript"><!--   <view wx:for="{{array}}"> {{item}} </view>   -->  </code></pre>    <p>wx:for 是微信定义的一个特殊属性， 其实相当于一个 for 循环， 重复显示 View 空间， 然后将数组中的每一个元素都遍历一遍， 下面是 array 在 Page 中的定义：</p>    <pre>  <code class="language-javascript">Page({    data: {      array: ["Swift", "Objctive-C", "Javascript"]    }  })  </code></pre>    <p>上面 WXML 例子中的 代表我们 data 中的 array 数组， 而 表示的就是数组遍历中的每一个元素， 编译运行后的界面显示如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/940275b0f2e9db4a1de8eae1a7fb76e2.png"></p>    <p>除了 <strong>wx:for</strong> 这种循环遍历语法之外， 微信还提供了另外一种， wx:if, 大家从名称中应该就可以想到， 它是一个条件判断， 只有当条件判断成立， 才会显示这个 View。 除了 wx:if 之外， 还提供了了 wx:elif, wx:else</p>    <pre>  <code class="language-javascript"><!--   <view wx:if="{{false}}" >Hello Title</view>  <view wx:elif="{{false}}" >Hello World</view>  <view wx:else >Hello Wechat</view>  -->  </code></pre>    <p>注意这三个属性的用法， wx:if 和 wx:elif 这两个属性后面需要跟随一个布尔表达式用于判断， 而 wx:else 后面不需要跟随任何表达式。 这三个属性的逻辑和我们平时开发中的 if else 判断逻辑完全一样，也比较好理解。</p>    <p>关于 wx:else 微信官方的示例中是给他指定了表达式属性的。 但我在真实环境上测试了一下， wx:else 无论是否指定后面的属性值，最终的输出结果都是一样的， 所以这可能是官方示例的一个笔误。 按照 if 表达式正常的逻辑来看，应该不需要给它再设属性了。 大家可以留意一下。</p>    <h2><strong>模板</strong></h2>    <p>说完了循环和条件判断语法， WXML 还支持模板定义, 比如这样：</p>    <pre>  <code class="language-javascript"><!--   <template name="hello" >    <view>      Hello, {{name}}    </view>  </template>    <template is="hello" data="{{...swift}}" ></template>  <template is="hello" data="{{...objc}}" ></template>  -->  </code></pre>    <p>简单解释一下， 第一个 template 标签是模板定义， name 属性定义了它的名字，在两个标签之间是它的内部结构。 然后紧接着的后两个 template 标签是模板的引用， is 属性代表要引用哪个模板。 我们这里填入的都是 hello， 也就是我们最开始定义的这个模板结构。 然后就是 data 属性，通过它传入模板需要的相关数据。 先来开一下 swift 和 objc 这两个数据的定义：</p>    <pre>  <code class="language-javascript">Page({    data: {          swift: { name: "Swift"},       objc: { name: "Objective-C"}    }  })  </code></pre>    <p>swift 和 objc 都是两个 JSON 对象， 都包含一个 name 属性。 大家注意看我们前面模板引用 data 属性的方式：</p>    <pre>  <code class="language-javascript"><!-- <template is="hello" data="{{...swift}}" ></template> -->  </code></pre>    <p>这里我们在一对大括号中的变量名前面还写了三个点 —— …</p>    <p>… 其实是一个操作符， 用于将 swift 变量内部的值 “展开”， 这么说可能不太好理解， 咱们还回到模板的定义中：</p>    <pre>  <code class="language-javascript"><!--   <template name="hello" >    <view>      Hello, {{name}}    </view>  </template>  -->  </code></pre>    <p>我们看到， template 内部使用 来引用我们传入对象的属性。 这就需要我们 “展开” 传入的对象， 才能让模板找到对应 key 的值。 简单来说， 如果我们不适用 … 这个操作符，而是直接像这样传入对象：</p>    <pre>  <code class="language-javascript"><!--   <template is="hello" data="{{swift}}" ></template>   -->  </code></pre>    <p>如果这样运行程序的话， 模板是不能正确读取到 name 属性的。</p>    <h2><strong>模板的引用</strong></h2>    <p>当然， 我们可以不用把模板的定义和引用它的代码写到一起， 我们可以把模板的定义单独写在一个 WXML 文件中， 然后在另外一个文件中使用 import 来引入它。 这也是一个结构良好的项目的通常做法。 比如我们刚才的模板存放到 hello.wxml 中， 我们就可以这样引用它：</p>    <pre>  <code class="language-javascript"><!--  <import src="hello.wxml" />  <template is="hello" data="{{...swift}}" ></template>  <template is="hello" data="{{...objc}}" ></template>  -->  </code></pre>    <p>这样我们可以比较好的进行模块划分。 当然， 除了 import 之外， 微信还给我们提供了另外一种引用方式， include。 简而言之， 他们之间的区别是这样， import 只能引入目标文件中的 template 定义， 不会引入具体的 UI 内容。 而 include 正好相反， 它只会引入目标文件中的内容，不会引入 template 定义, 比如我们有一个文件，叫做 header.wxml：</p>    <pre>  <code class="language-javascript"><!--   <view>Header Title</view>  -->  </code></pre>    <p>然后我们在 index.wxml 中这样引用：</p>    <pre>  <code class="language-javascript"><!--  <include src="header.wxml" />  <view>Hello world!</view>  -->  </code></pre>    <p>这样就会引入 header.wxml 中定义的内容了， 最后的输出结果就是他们两个文件中所有 UI 组件的整合了。 这就是 import 和 include 的区别了。</p>    <p> </p>    <p> </p>    <p>来自：http://www.swiftcafe.io/2016/09/28/wx-app3/</p>    <p> </p>