oven小区
oven小区

一个 android 程序员的小程序入门实录（二）

小程序开发之框架初览，视图层 WXML 与 WXSS 的基本用法

概要

经过 上篇 的操作，我们已经得到一个小程序的 Hello World，那么这一篇就来进一步了解微信小程序的开发框架。
有很长一段时间，我都误以为前端所说的”框架“类似 android 开发中第三方库，可以直接被引入到项目中，并且其代码结构是独立于其他项目代码的。
其实，这里的开发框架还是指框架（Framework），即是整个或部分系统的可重用设计，阐明应用结构间各部件的协助关系，相当于应用骨架。那么，小程序框架完成了那些工作，以及我还需要做什么才能实现一个完整的符合业务需求的小程序呢？
先看看微信官方文档中对小程序开发框架的描述。

小程序框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

也就是说，对于小程序框架，我需要了解wxml 与 wxss的基本构成与使用方法，JavaScript 的基础语法，了解视图层与逻辑层的数据通信机制。

视图层与逻辑层.png

本篇先从视图层 wxml 与 wxss 开始。

视图层之 wxml

wxml 类似 android 中的 XML，为构建页面服务，但语法更类似于 HTML。

wxml 之数据绑定

  • 简单绑定
    将对应页面的.js文件中 data 中的数据绑定到页面对应位置。

{{ message }}

//index.js
Page({
  data: {
    message: 'Hello World!'
  }
})

还可以对组件的属性绑定，关键字绑定，if 条件绑定等，以及进行简单的运算，组合与拆分新的对象和数组等。
只要符合以上形式，.wxml文件中，用双括号包围变量名，.js文件中写明变量值即可
注意： wxml 中双引号和括号间最好不要有空格。

wxml之列表渲染

使用 wx:for="{{array}}"，可以用该数组数据反复渲染子项，构建列表 。
子项默认下表名index,默认变量名item，使用 wx:for-item ， wx:for-index 可修改



  {{no}}: {{each.message}}


//index.js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

注意：不设置 wx:key 会出现 warning
如果列表会动态改变而且希望保留列表各子项的状态，可以设置 wx:key作为子项的唯一标识。
当子项为唯一字符串或数字时，可以使用"*this"作为 key 的值；或者可以使用子项的某个属性名作为 key 的值，该属性值必须是唯一字符串或者数字，而且不能动态改变
如果是静态列表，或顺序无所谓，可以忽略此 warning

wxml之条件渲染

只有值为真时，内容才会被渲染，相比 hidden，无论是否为真都会渲染，更节约初次渲染时间，但 if 的切换消耗较大。因此，如果值不会发生频繁的切换用 if 较好，否则应使用 hidden。

True

wxml 之模板

使用模板可以提高代码复用性，在开发中是大家都喜闻乐见的一种做法。

  1. 定义模板，使用name为模板命名
  1. 使用模板，利用 is 属性声明所使用的模板，如模板不在当前目录，需要使用 标签引入