微信小程序配置视图层数据绑定的方法
导读:本文共2982字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、小程序结构目录小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。小程序框架提供了自己的视图层描述语言WXML和WXSS,以及JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。官网1.1 小程序文件结构和传统web对比结构传统web微信小程序结构HTMLWXML样式... ...
目录
(为您整理了一些要点),点击可以直达。一、小程序结构目录
小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
小程序框架提供了自己的视图层描述语言WXML
和WXSS
,以及JavaScript
,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
官网
1.1 小程序文件结构和传统web对比
通过以上对比得出,传统web是三层结构。而微信小程序 是四层结构,多了一层配置.json
1.2 基本的项目目录
二、配置介绍
2.1 配置介绍
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json
和 页面自己的page.json
注意:配置文件中不能出现注释
2.2 全局配置app.json
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的app.json
配置
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
字段的含义
pages息请参考app.json配置
2.3 page.json
这里的page.json其实用来表示页面目录下的page.json这类和小程序页面相关的配置。
开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等。
页面的配置只能设置app.json
中部分window
配置项的内容,页面中配置项会覆盖app.json
的window
中相同的配置项。
三、视图层
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
3.1 数据绑定
3.1.1 普通写法
<view>{{message}}</view>Page({data:{message:'HelloMINA!'}})
3.1.2 组件属性
简直和上面没区别啊
<viewid="item-{{id}}"></view>Page({data:{id:0}})
3.1.3 bool类型
不要直接写 checked="false",其计算结果是一个字符串
<checkboxchecked="{{false}}"></checkbox>
3.2 运算
3.2.1 三元运算
<viewhidden="{{flag?true:false}}">Hidden</view>
3.2.2 算数运算
<view>{{a+b}}+{{c}}+d</view>Page({data:{a:1,b:2,c:3}})
3.2.3 逻辑判断
<viewwx:if="{{length>5}}"></view>
3.2.4 字符串运算
<view>{{"hello"+name}}</view>Page({data:{name:'MINA'}})
3.2.5 注意
花括号和引号之间如果有空格,将最终被解析成为字符串
3.3 列表渲染
3.3.1 wx:for
项的变量名默认为item
wx:for-item
可以指定数组当前元素的变量名
下标变量名默认为index
wx:for-index
可以指定数组当前下标的变量名
<viewwx:for="{{array}}">{{index}}:{{item.name}}:{{item.age}}</view>Page({data:{array:[{name:'foo',age:18,},{name:'bar''age':20,}]}})
3.3.2 wx:for
渲染一个包含多节点的结构块 block最终不会变成真正的dom元素
<blockwx:for="{{[1,2,3]}}"><view>{{index}}:</view><view>{{item}}</view></block>
3.3.3 wx:key
提高效率使用的
3.4 条件渲染
3.4.1 wx:if
在框架中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:
<viewwx:if="{{condition}}">True</view>
3.4.2 hidden
<viewhidden="{{condition}}">True</view>
类似wx:if
频繁切换 用hidden
不常使用 用wx:if
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
微信小程序配置视图层数据绑定的方法的详细内容,希望对您有所帮助,信息来源于网络。