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