小程序

wxml：页面的内容

wxss：页面的样式

javascript：页面的交互逻辑和数据通信

wxs：wxml的脚本增强 filter等操作

wxml范例

<view class="className" data-name="A">

    Hello,World!

    <view>

        Hello,China!

    </view>

</view>

wxml语言特性：

1.数据绑定

<!--index.wxml-->

<view>

    <text>{

{message}}</text>

</view>

Page({

    date: {

        message:"hello,world"

    }

})

属性

id:        string            组件的唯一标示        保持整个页面唯一

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

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

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

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

bind*    eventhandler     组件的事件            详见事件

2.列表渲染

<!--index.wxml-->

<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"}

        ]

    }

})

3.条件渲染

<!--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)

    }

})

4.模板引用

<!--index.wxml>

<template name="tempItem">

    <view>

        <view>收件人：{

{name}}</view>

        <view>联系方式：{

{phone}}</view>

        <view>地址:{

{address}}</view>

    </view>

</template>

<template is="tempItem" data="{

{...item}}"></template>

Page({

    data:{

        item:{

            name:"张三",

            phone:"1888888888",

            address:"中国"

            }

        }

})

import 和 include的应用