前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【愚公系列】2022年02月 微信小程序-数据绑定

【愚公系列】2022年02月 微信小程序-数据绑定

作者头像
愚公搬代码
发布2022-12-01 09:12:02
3760
发布2022-12-01 09:12:02
举报
文章被收录于专栏:历史专栏

文章目录


前言

1.小程序页面结构

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

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

2.数据绑定的定义

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

一、数据绑定

1.简单绑定

代码语言:javascript
复制
//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>
代码语言:javascript
复制
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通信的基础。 数据绑定主要分为

  • 数据的简单绑定
  • 组件属性绑定
  • 运算绑定
  • 控制属性的绑定
  • 列表渲染绑定
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 前言
    • 1.小程序页面结构
      • 2.数据绑定的定义
      • 一、数据绑定
        • 1.简单绑定
        • 总结
        相关产品与服务
        云开发 CloudBase
        云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档