微信小程序配置视图层数据绑定相关示例

目录

官方文档一、小程序结构目录1.1 小程序文件结构和传统web对比1.2 基本的项目目录二、配置介绍2.1 配置介绍2.2 全局配置app.json2.3 page.json三、视图层3.1 数据绑定3.1.1 普通写法3.1.2 组件属性3.1.3 bool类型3.2 运算3.2.1 三元运算3.2.2 算数运算3.2.3 逻辑判断3.2.4 字符串运算3.2.5 注意3.3 列表渲染3.3.1 wx:for3.3.2 wx:for3.3.3 wx:key3.4 条件渲染3.4.1 wx:if3.4.2 hidden

官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/

一、小程序结构目录

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

小程序框架提供了自己的视图层描述语言WXML和WXSS，以及javascript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

官网

1.1 小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	css	WXSS
逻辑	javascript	Javascript
配置	无	JSON

通过以上对比得出，传统web是三层结构。而微信小程序 是四层结构，多了一层配置.json

1.2 基本的项目目录

{ array: [{ name: 'foo', age: 18, }, { name: 'bar' 'age': 20, }] }})

3.3.2 wx:for

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">  <view> {{index}}: </view>  <view> {{item}} </view></bloIgWmVck>

3.3.3 wx:key

提高效率使用的

3.4 条件渲染

3.4.1 wx:if

在框架中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

3.4.2 hidden

<view hidden="{{condition}}"> True </view>

类似wx:if

频繁切换 用hidden

不常使用 用wx:if

以上就是微信小程序配置视图层数据绑定相关示例的详细内容，更多关于微信小程序配置视图层数据绑定的资料请关注我们其它相关文章！