1.数据绑定:
在wxml里渲染文件
<view>{{message}}</view>
在js文件里初始化数据
Page({
data: {
message: 'Hello MINA!',
list: [
{ id: "1", name: "张三", flag: false },
{ id: "2", name: "李四", flag: true },
{ id: "3", name: "王二", flag: false}
],
}
})
2.列表渲染
<view wx:for=“{{list}}” wx:for-item="ite" wx:for-index="ind" wx:key="*this">
{{ite}}{{ind}}</view>
注:wx:for可以用来循环数组,默认元素是item,下标是index;可以通过wx:for-item和wx:for-index来修改元素和下标。在列表渲染的同事也需要绑定key
3.条件渲染
在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
//如果condition的值为真渲染该代码块否者不渲染代码块
wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意: 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
4.模板的创建和引入
1.创建
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用模板
2.引入:
<template src="模板的地址"/>
<template is="msgItem" data=“{{list}}”>
</template>
//引入模板外的内容
<includesrc="模板的地址">
模板通过属性data传值
5.wxs语法:
<wxs module="foo">
var some_msg = "hello world";
module.exports = {
msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>
更多细节可以参考官网:https://developers.weixin.qq.com/miniprogram/dev/framework/