微信小程序开发02：开发框架

WXML

• WXML（WeiXin Markup Language）是程序设计的一套标签语言，结合组件、WXS和事件系统，可以构建出页面的结构
• WXML语法：<标签名 属性名=“属性值” 属性名=“属性值” …>…</标签名>
• WXML的作用：数据绑定、列表渲染、条件渲染、模板引用

数据绑定

helloworld.wxml

<view>{{msg}}</view> <!--Mustache语法-->

helloworld.js

Page({
    data: {
        msg: "hello ycom"
    }
});

• 小程序组件的共同属性
  

列表渲染

helloworld.wxml

<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
        <view>{{index}}:{{item.name}}</view>
    </block>
</view>

helloworld.js

Page({
    data: {
       items: [
           {name: "商品A"},
           {name: "商品B"},
           {name: "商品C"},
           {name: "商品D"},
           {name: "商品E"}
       ]    
    }
});

条件渲染

helloworld.wxml

<view>今天吃什么</view>
<view wx:if = "{{condition === 1}}">
    米饭
</view>
<view wx:if = "{{condition === 2}}">
    饺子
</view>
<view wx:else>
    面条
</view>

helloworld.js

Page({
    data: {
      condition: Math.floor(Math.random() * 3 + 1)
    }
});

WXSS

• WXSS支持的选择器
  
• 选择器的优先级权重