详细讲解微信开发中的视图层（xx.xml）和逻辑层（xx.js）。

本文主要介绍微信小程序的视图层(xx.xml)和逻辑层(xx.js)的详细信息，有需要的朋友可以参考一下。

微信小程序可以理解为云OS的概念，微信生态系统本身就是一个OS。另外，微信公众平台和微信开发平台已经是非常成熟的架构，可以完美匹配App的功能，同时在交互体验上也能做到极致，很有可能取代App。苹果的App Store模式的意义在于为第三方软件提供商提供一个便捷高效的软件销售平台。用户购买应用所支付的费用由苹果和应用开发者按3: 7分成。如果微信小程序商城也采取类似的佣金模式，8亿多用户将是一笔非常庞大的无形资产，成为腾讯继游戏、会员、广告之后的又一个吸金来源。

微信小程序让人们不用下载安装就能使用app。用户可以扫描微信上的二维码打开程序。微信小程序可以应用于Android、iOS等不同系统，也可以在不同平台共享，因为它类似于一个网站页面。

Applet视图层(xx.xml)和逻辑层(xx.js)

整个系统分为两层:视图层和应用服务层。

框架可以非常简单地保持数据和视图同步。修改数据时，只需要修改逻辑层的数据，视图层就会相应更新。

通过这个简单的例子:

& lt！这是我们的观点。& lt视图& gt你好{{name}}！& lt/view & gt；& ltbutton bindtap = & quotchangeName & quot& gt点击我！& lt/button & gt；//这是我们的App服务。//这是我们的数据，var hello data = { name:& amp；#39;微信和；#39;}//注册一个页面。Page({ data: helloData，changeName: function(e) { //发送数据更改以查看this . setdata({ name:& amp；#39;米娜& amp#39;})}})开发者已经通过框架将逻辑层数据中的名称与视图层中的名称绑定，所以一打开页面就会显示Hello微信！

点击按钮，视图层会将changeName的事件发送到逻辑层，逻辑层会找到相应的事件处理程序。

逻辑层执行setData的操作，把名字从微信改成米娜。因为数据和视图层已经绑定了，所以视图层会自动变成Hello MINA！。

视图层是xx.xml

逻辑层是xx.js

读取时，视图层将填充逻辑层的初始数据。视图层会触发逻辑层的事件，逻辑层会返回并更改视图层的内容。

逻辑层(应用服务)

小程序开发框架的逻辑层是用JavaScript写的。

逻辑层处理数据并发送给视图层，同时接受视图层的事件反馈。在JavaScript的基础上，我们做了一些修改，方便小程序的开发。

添加App和Page方法来注册程序和页面。

提供丰富的API，比如扫描、支付等微信独有的能力。

每个页面都有一个独立的范围，并提供模块化。

因为框架不在浏览器中运行，所以web中的JavaScript的一些功能无法使用，比如文档和窗口。

开发者写的所有代码最终都会打包成一个JavaScript，在小程序启动时运行，直到小程序被销毁。类似于ServiceWorker，所以逻辑层也叫App Service。

初始化数据

初始化数据将被用作页面的第一次呈现。数据会以JSON的形式从逻辑层传到渲染层，所以它的数据必须是可以转换成JSON的格式:字符串、数字、布尔值、对象、数组。

呈现层可以通过WXML绑定数据。

示例代码:

& lt视图& gt{ { text } } & lt/view & gt；& lt视图& gt{ {数组[0]。msg } } & lt/view & gt；page({ data:{ text:& amp；#39;初始化数据。#39;，数组:[{ msg:& amp；#39;1 & amp#39;}，{ msg:& amp；#39;2 & amp#39;}] }})Page.prototype.setData()

setData函数用于将数据从逻辑层发送到视图层，并更改this.data的相应值。

注意:

1.直接修改this.data是无效的，不能改变页面的状态，造成数据不一致。2.数据集一次不能超过1024kB。请尽量避免一次设置太多数据。

SetData()参数格式

接受一个对象，将this.data中的键对应的值以键和值的形式改为value。

密钥可以非常灵活，以数据路径的形式给出，比如array[2]。消息，a.b.c.d，不需要在此数据中预定义

示例代码:

& lt！--index.wxml-->& lt视图& gt{ { text } } & lt/view & gt；& ltbutton bindtap = & quot更改文本& quot& gt更改正常数据& lt/button & gt；& lt视图& gt{ {数组[0]。text } } & lt/view & gt；& ltbutton bindtap = & quotchangeItemInArray & quot& gt更改数组数据& lt/button & gt；& lt视图& gt{ { obj.text } } & lt/view & gt；& ltbutton bindtap = & quotchangeItemInObject & quot& gt更改对象数据& lt/button & gt；& lt视图& gt{ { newField.text } } & lt/view & gt；& ltbutton bindtap = & quotaddNewField & quot& gt添加新数据& lt/button & gt；//index . JSP page({ data:{ text:& amp；#39;初始化数据。#39;，数组:[{ text:& amp；#39;初始化数据。#39;}]，对象:{ text:& amp；#39;初始化数据。#39;} }，change text:function(){//this . data . text = & amp；#39;更改数据& amp#39;//坏了，这样不行，setdata({ text:& amp；#39;更改数据& amp#39;}) }，changeItemInArray:function(){//可以用这种方式修改动态数据路径this . setdata({ & amp；#39;数组[0]。文本& amp#39;:& amp#39;更改数据& amp#39;}) }，changeItemInObject:function(){ this . setdata({ & amp；#39;object.text & amp#39;:& amp#39;更改数据& amp#39;});}，addNewField:function(){ this . setdata({ & amp；#39;新领域。#39;:& amp#39;新数据与信息。#39;})}})视图层

框架的视图层用WXML和WXSS编写，用组件显示。

将逻辑层的数据反映到视图中，并将视图层的事件发送到逻辑层。

WXML(微信标记语言)用于描述页面的结构。

WXSS(微信样式表)用来描述页面的风格。

组件是视图的基本单位。

什么是事件？

事件是从视图层到逻辑层的通信方式。

事件可以将用户的行为反馈给逻辑层进行处理。

事件可以绑定到组件，当到达触发事件时，将执行逻辑层中相应的事件处理函数。

事件对象可以携带额外的信息，比如id、数据集、触摸。

如何使用事件。

在组件中绑定事件处理程序。

比如bindtap，当用户点击这个组件时，会在这个页面的对应页面中找到对应的事件处理函数。

& lt视图id = & quottapTest & quotdata -hi = & quot；米娜& quotbindtap = & quottapName & quot& gt点击我！& lt/view & gt；在对应的页面定义中写对应的事件处理程序，参数为event。page({ tap name:function(event){ console . log(event)})基本组件。

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件快速开发。

什么是组件:

组件是视图层的基本单位。

组件自带一些功能和微信风格。

一个组件通常包括一个开始标签和一个结束标签，属性用于修饰组件，内容在两个标签内。

& lt标记名属性= & quot价值& quot& gt内容放在这里...& lt/tagename & gt；注意:所有组件和属性都是小写的，用连字符-连接

[相关建议]

1.微信小程序页面价值转移详解

2.微信小程序开发风格常见问题梳理

3.利用组件开发微信小程序日历的详细方法。

4.小程序开发中使用co处理异步进程的示例教程。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：详细讲解微信开发中的视图层（xx.xml）和逻辑层（xx.js）。 https://zhujicankao.com/113357.html