#yyds干货盘点#【愚公系列】2022年10月 微信小程序-数据绑定

时间：2022-10-26 21:54:40

前言

1.小程序页面结构

微信小程序的页面结构主要是分别由四个文件组成：

  • js(逻辑处理文件)：负责页面逻辑内容的处理，遵循js语言框架。
  • json(配置文件)：用来设置页面的窗口内容，遵循JSON语法规范。
  • wxml（页面结构文件或视图文件）：用于页面可视化组件的组织和描述，语法结构类似于xml，与html格式差别较大。
  • wxss(样式文件)：兼容CSS语法规范。

2.数据绑定的定义

数据绑定：视觉层数据与逻辑层数据通信的方法，也就是将一个用户界面元素的属性绑定到一个逻辑文件的对象实例上的某个属性的方法。在用户与视觉界面进行交互时，视觉界面数据改变，由视觉界面传递至逻辑层面更改数据（如输入框输入数据）。相反，当逻辑层数据更改后，也会即使更改视觉层数据（如网络数据的获取和展示）。数据绑定使用一种叫做Mustache语法的形式，是将属性变量用双层花括号（{{}}）括起来的形式进行绑定，可以作用于内容、组件属性、控制属性、关键字的绑定。

一、数据绑定

1.简单绑定

//Hello MINA!
<view> {{ message }} </view>
//item-0
<view id="item-{{id}}"> </view>
//false
<view wx:if="{{condition}}"> </view>
//关键字(需要在双引号之内)不要直接写 checked="false"
<checkbox checked="{{false}}"> </checkbox>
//false
<view hidden="{{flag ? true : false}}"> Hidden </view>
//true
<view wx:if="{{length > 5}}"> </view>
//Hello  MINA
<view>{{object.key}} {{array[0]}}</view>
//[0, 1, 2, 3, 4]
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
//{foo: 'my-foo', bar:'my-bar'}
<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
  data: {
    message: 'Hello MINA!'，
    id: 0，
    condition: true，
    flag :null,
    length : 6,
    object: {
      key: 'Hello '
    },
    array: ['MINA'],
    zero: 0,
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

总结

数据的展示和绑定时小程序最主要的一部分，也是和后端api通信的基础。 数据绑定主要分为

  • 数据的简单绑定
  • 组件属性绑定
  • 运算绑定
  • 控制属性的绑定
  • 列表渲染绑定
标签：

相关文章