小程序
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的应用





扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。