详解微信小程序开发中的“数据绑定”和代码样例

news2024/7/4 5:41:44

简介

首先需要区分微信小程序的运行环境和框架系统。运行环境为小程序在手机当中运行的时候,微信客户端所能提供的环境支持,也就是在这种环境下如何进行数据渲染工作;框架系统则是微信小程序在进行开发的过程中,如何通过代码实现数据绑定,以及在这种框架下,是如何进行层级划分。

框架系统 - 逻辑层和视图层

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

运行环境 - 逻辑层和渲染层

小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程,这两个线程的通信会经由微信客户端(下文中也会采用 Native 来代指微信客户端)做中转,逻辑层发送网络请求也经由 Native 转发,小程序的通信模型下图所示。
在这里插入图片描述

数据绑定:渲染层和逻辑层的通信

通过上述的介绍,我们可以简单理解为:逻辑层为视图层提供数据,而将这些数据渲染从逻辑层显示到视图层的过程称之为渲染,那么为渲染层工作的由wxml 和 wxss进行;而为逻辑层工作的为由js编写的代码。而上述进行渲染的过程就需要进行数据的绑定。

框架的核心是一个响应的数据绑定系统,可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

下面来看一个简单的代码样例:

代码样例

1)视图层的数据初始化
比如在pages里面当前只有一个页面index,在index.js中(逻辑层)的数据对象data,有一个数据msg ,其初始化为一个字符串。
在这里插入图片描述
然后在视图层通过双层大括号(Mustache语法:mustache 是“胡子”的意思,因为它的嵌入标记 {{ }} 非常像胡子。 {{ }} 的语法也被 vue 沿用)来进行数据渲染和展示:
在这里插入图片描述
当启动小程序的时候,就会将数据自动渲染到页面中:
在这里插入图片描述
这样,逻辑层的数据就和视图层的变量进行了双向绑定。也就是说:’ WXML 中的动态数据均来自对应 Page 的 data’ 。
通过调试器的AppData 可以查看每个页面所绑定的数据:
在这里插入图片描述

2)数据的修改和动态响应
和大部分前端框架,比如React和Vue,都是响应式框架,当数据在逻辑层进行修改之后,数据会同步渲染到视图层的界面上。
比如:在index.js 的页面实例生命周期的钩子函数中:比如onLoad(), onReady() 等:
在这里插入图片描述
这里再onLoad回调函数中,首先打印msg数据,但是如何去获取msg呢?我们使用this对象(当前页面的实例对象)。
通过console打印出的this对象为:
在这里插入图片描述
我们可以看到this 对象中包含data数据。所以我们可以直接通过:
console.log(this.data.msg);
直接获取msg数据:
在这里插入图片描述
同步修改数据:
在这里插入图片描述
通过setData() 函数来进行数据的修改,修改之后的数据会同步渲染到视图层的界面上:

在这里插入图片描述

3)非钩子函数也可进行数据的同步修改
在这里,设置了一个定时函数,两秒后就会自动更新界面中的数据。
在这里插入图片描述
因为操作的都是this对象,所以会进行同步更新。

总结

微信小程序开发中的一大核心就是数据的绑定和渲染,如果对这一部分充分理解,后面的代码开发将会变得顺利很多,加油!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/173792.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数字逻辑理论——组合电路

利用数据选择器设计组合逻辑电路 m:组合电路输入变量个数 n:数据选择器的控制端个数 (1)mn 利用8选1数据选择器设计函数:FAB’A’CBC’ 待设计卡诺图: F∑(1,2,3,4,5,6) (2)m&g…

【每日一题】【LeetCode】【第十九天】【Python】汇总区间

解决之路 题目描述 测试案例&#xff08;部分&#xff09; 第一次 没有想到什么更快的方法&#xff0c;先用两个循环来写出来思路。 class Solution(object):def summaryRanges(self, nums):res []index 0n len(nums)while index < n:if index n - 1:res.append(str…

Spring_FrameWork_07(SpringMVC与SSM整合)

SpringMVC&#xff08;一种基于java实现的轻量级web框架&#xff09; 请求与响应 REST风格 SSM整合 拦截器 public class ServletContainersInitConfig extends AbstractDispatcherServletInitializer {Overrideprotected WebApplicationContext createServletApplicationCont…

【工具】用AI辅助论文/博客的写作:Obsidian+Text Generator的详细安装教程

目录 前言 介绍 Obsidian Text-Generator 使用教程 安装Obsidian 安装Text Generator 插件安装 获取开放 AI API 密钥 插件选项配置 初体验 前言 对于作家、博主和学生来说&#xff0c;这是一个很好的工具&#xff0c;它通过使用最强大的语言模型之一&#xff1a;Ope…

[数据结构基础]链式二叉树的几个典型的基础oj问题

今年是农历腊月二十九&#xff0c;提前祝大家新春快乐。这是我壬寅虎年最后一篇文章&#xff0c;感谢大家的阅读。祝大家兔年吉祥&#xff0c;身体健康、阖家幸福、学业有成、事业如意、财源滚滚&#xff01; 前置说明 本文中所有用到的二叉树及二叉树节点&#xff0c;都是由…

Fabric中的txid exists问题

Fabric 默认配置中tls证书有效期为一年&#xff0c;相信挖了不少的坑&#xff0c;我前段时间写了篇文章介绍了下解决的思路&#xff0c;但是自己真解决起来还是没解决问题&#xff0c;这种分布式企业架构太复杂。 最近有遇到一个奇怪的问题&#xff0c;小伙伴写的存证数据&…

plt自定义水平线和垂直线、水平区域和垂直区域

一、添加x轴y轴垂直辅助线 1、函数 axvline函数&#xff1a;绘制垂直线。axhline函数&#xff1a;绘制水平线。 2、参数 plt.axvline(x0, ymin0, ymax1, c"g", ls"--", lw2, labelNone)。axhline类似 x&#xff1a;垂直线在x轴上的位置。浮点数&#xf…

AcWing1227.分巧克力——学习笔记

目录 题目 代码 AC结果 思路&#xff1a; 一、设置全局变量 二、获取数据 三、当前大小可得到的巧克力数是否满足每个小朋友至少分到一块 四、二分法找每个小朋友可得到的最大大小 题目 1227. 分巧克力 - AcWing题库https://www.acwing.com/problem/content/descripti…

Python---函数相关知识

专栏&#xff1a;python 个人主页&#xff1a;HaiFan. 专栏简介&#xff1a;本专栏主要更新一些python的基础知识&#xff0c;也会实现一些小游戏和通讯录&#xff0c;学时管理系统之类的&#xff0c;有兴趣的朋友可以关注一下。 函数前言函数的使用函数的语法格式函数的参数函…

Python脚本集成SQLite3数据库

文章目录一、Sqlite3数据库的基本使用1.数据库是什么2.数据库分类二、正式开始使用SQLite3&#xff08;Python&#xff09;1.基础sql命令2.Python连接SQLite3①查询②增加③更新一、Sqlite3数据库的基本使用 1.数据库是什么 借用百科上的话&#xff0c;数据库是“按照数据结构…

yolo v8 解决了 v5 的问题嘛?

文章大纲 yolo v8 简介网络结构yolo v8 准确率的提升yolo v8 的速度提升参考文献与学习路径yolo v8 简介 官网: https://ultralytics.com/yolov8https://github.com/triple-Mu/YOLOv8-TensorRT详细介绍: https://learnopencv.com/ultralytics-yolov8/网络结构 yolo v8 准确率…

I.MX6ULL裸机开发笔记3:SDK烧录镜像

目录 一、获取NXP官方SDK 二、Linux安装SDK 三、SDK中相关工具 四、烧录工具 一、获取NXP官方SDK 官方网站MCIMX6ULL-EVK_i.MX6ULL评估套件_NXP 半导体 二、Linux安装SDK ./XXX.run 这里如果提示sudo ./XXX.run 找不到命令&#xff0c;就可以用ls -l查看当前文件夹文件的…

VVDocumenter-Xcode github README.md 中英文翻译

最近在学习 Xcode 的使用&#xff0c;查到有一款用于生成注释文档的插件&#xff1a;VVDocumenter-Xcode 进入其 github 页面之后看 README&#xff0c;看到两句话&#xff1a; 1. Goodbye World&#xff1a; 再不更新了&#xff1f; 2. 从 Xcode 8 之后Apple官方提供了插件做…

Python爬虫---爬虫介绍,实战案例

目录标题1、爬虫介绍1.1 爬虫的合法性1.2 网络爬虫的尺寸1.3 robots.txt协议1.4 http&https协议1.5 requests模块1.5.1 request库的异常2、实战案例2.1 百度页面2.2 爬取京东商品页面2.3 爬取亚马逊商品页面-更改headers2.4 百度/360搜索关键词提交-params2.5 网络图片的爬…

Nacos 报Statement cancelled due to timeout or client request

1. 问题&#xff1a;nacos 启动报错&#xff0c;启动失败&#xff0c;全部报错下面贴出。 2. 结论&#xff1a;排查结果为服务器带宽不够&#xff0c;mysql 查询的数量量太大&#xff0c;传输时间损坏在网络io上&#xff01; 3. 下面开始回溯事故起因&#xff1a; 前期config…

2022年一年级入学小结

2022年即将过去&#xff0c;在这里&#xff0c;简单回顾一下Richard同学进入小学一学期后的成长经历和小结。先说说学校生活Richard很喜欢目前的学校&#xff0c;喜爱给他授课的每一位老师&#xff0c;也和老师和同学们相处得不错&#xff0c;自诩自己现在的”粉丝“蛮多。从我…

C++设计模式(6)——适配器模式

亦称&#xff1a; 封装器模式、Wrapper、Adapter 意图 适配器模式是一种结构型设计模式&#xff0c; 它能使接口不兼容的对象能够相互合作。 问题 假如你正在开发一款股票市场监测程序&#xff0c; 它会从不同来源下载 XML 格式的股票数据&#xff0c; 然后向用户呈现出美…

9.框架SpringMVC

一、基本概念 Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架&#xff0c;本质上相当于 Servlet。Spring MVC 使用 MVC 架构模式的思想&#xff0c;将 Web 应用进行职责解构&#xff0c;把一个复杂的 Web 应用划分成模型&#xff08;Model&#xff09…

HashMap的使用:put、remove和get方法原理

关联项目需求进行FeatureAB上报的时候&#xff0c;我们使用HashSet的add方法存key值&#xff0c;如果key已存在&#xff0c;则add失败&#xff0c;返回false&#xff0c;如果key不存在&#xff0c;add成功&#xff0c;返回true。看源码中HashSet的add(E e)方法实现&#xff1a;…

【Git】IDEA 集成 GitHub

8、IDEA 集成 GitHub 8.1、设置 GitHub 账号 如果出现 401 等情况连接不上的&#xff0c;是因为网络原因&#xff0c;可以使用以下方式连接&#xff1a; 然后去 GitHub 账户上设置 token。 点击生成 token。 复制红框中的字符串到 idea 中。 点击登录。 8.2、分享工程到 GitHu…