微信小程序(三)开发框架
发布时间: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框架
- 下一篇 : 微信小程序学习笔记