微信小程序(三)开发框架
发布时间:2021-08-19 09:13:58作者:顺晟科技点击:
基本构成:

数据绑定:

例:
<!--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 -->
- 上一篇 : 微信开发小程序Taro框架
- 下一篇 : 微信小程序学习笔记


