微信小程序（三）开发框架

基本构成：

　　

数据绑定:

例：

<!--index.hxml-->
<view>
    <text data-name="{{theName}}"></text>
</view>
--------------------------------------------------------------------
// index.js 文件
Page({
    data:{
         theName:"Jack"
   }
})

结果：

<page>
    <view>
        <text data-naem="Jack"></text>
    </view>
<page>

例：

<!--index.hxml-->
<view hidden="{{flag ? true : false}}">
    HI
</view>
--------------------------------------------------------------------
// index.js 文件
Page({
    data:{
        flag : false
   }
})

属性：

　　id　　String　　组件的唯一标识　　保持整个页面唯一

　　class　　String　　组件的样式表　　在对应的 wxss 中定义的样式类

　　style　　String　　组件的内联样式　　可以动态设置的内联样式

　　hidden　　Boolean　　组件是否显示　　所有组件默认显示

　　data-*　　Any　　 自定义属性　　组件上触发的事件时，会发送给事件处理函数

　　bind* / catch*　　EventHandler　　组件的事件　　

列表渲染：　

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

// index.js 文件
Page({
    data:{
         items:[
            {name:"A"},
            {name:"B"},
            {name:"C"},
            {name:"D"},
            {name:"E"}
        ]
   }
})    

条件渲染：　

<!--index.wxml-->
<view>今天吃什么？</view>
<view wx:if="{{condition == 1}}">米粉</view>
<view wx:elif="{{condition == 2}}">粉</view>
<view wx:else>饭</view>

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

模版引用：

<!--index.wxml-->
 <template name="tempItem">
    <view>
        <view>姓名：{{name}}</view>
        <view>电话：{{phone}}</view>
        <view>地址：{{address}}</view>
    </view>
</template>
<template is="tempItem" data="{{...item}}"></tempItem>

// index.js
Page({
    data:{
            item:{
                name:"小贤"，
                phone:"13838385438",
                address:"中国旮旯省旮旯市旮旯区旮旯镇旮旯村旮旯街191号"
            }
        }
})

<!--index.wxml-->
<import str="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<view>Hello</view>
<template name="a">Hello</template>

(已经避免模版引用死循环。)

区别：

<!--index.wxml-->
<include str="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<template name="a">
    <view>This is a.wxml</view>
</template>
<view>Hello</view>

<!-- 结果： Hello -->

---------------------------------------------------------------------------------------------------------------------------------

wxss：

　　一套样式语言，用于描述wxml 的组件样式