微信小程序视图层(xx.xml)和逻辑层(xx.js)详细介绍

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

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

小程序视图层(xx.xml)和逻辑层(xx.js)

整个系统分为两个部分：视图层和应用服务层

该框架使得保持数据与视图同步变得非常简单。修改数据时，逻辑层只需要修改数据，视图层也会相应更新。

看看这个简单的例子：

！-这是我们的视图-视图您好{{name}}！/viewbutton bindtap='changeName '单击我！/按钮//这是我们的应用服务。//这是我们的数据. var helloData={ name: '微信' }//注册一个页面。Page({ data: helloData，changename 3360 function(e){//发送数据更改查看此。setdata ({name:' mina'})})开发者通过框架将逻辑层数据中的名称与视图层中的名称绑定，这样打开页面就会显示Hello微信！点击按钮时，视图层会将changeName的事件发送到逻辑层，逻辑层会找到对应的事件处理函数，执行setData的操作，将名称从微信改为MINA，因为数据与视图层绑定，所以视图层会自动改为Hello MINA！视图层是xx.xml

逻辑层是xx.js

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

逻辑层(应用服务)

小程序开发框架的逻辑层由JavaScript编写。

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

添加应用程序和页面方法来注册程序和页面。提供丰富的API，如扫码、支付等微信特有的功能。每个页面都有一个独立的范围，并提供模块化。因为框架不在浏览器中运行，所以web中JavaScript的一些功能无法使用，比如文档、窗口等等。开发人员编写的所有代码最终都将被打包到一个JavaScript中，该JavaScript将在小程序启动时运行，直到小程序被销毁。与ServiceWorker类似，逻辑层也称为应用服务。初始化数据

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

渲染层可以通过WXML绑定数据。

示例代码：

查看{{text}}/viewview{{array[0]。msg } }/viewPage({ data : { text : ' init data '，array: [{msg: '1'}，{ msg : ' 2 ' } } })page . prototype . setdata()

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

注意：

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

SetData()参数格式

接受一个对象，并将与此. data中的键对应的值更改为键和值形式的值。

其中密钥可以以数据路径的形式给出，如数组[2]。消息，a.b.c.d，不需要在此数据中预先定义.

示例代码：

！-index . wxml-view { { text } }/view button bind tap=' Change text '更改普通数据/buttonview{{array[0]。text } }/view button bind tap=' changeItemInArray ' Change Array data/button view { { obj . text } }/view button bind tap=' changeItemInObject ' Change Object data/button view { { new field . text } }/view button bind tap=' addNewField ' Add new data/button//index . js page({ data : { text : ' init data '，Array 3:[{ text 3: ' init data ' })，Object 33: { text 3360 }text':'changed data' }) }，changeItemInObject:函数(){ this . setdata({ ' object . text ' : ' changed data ' })；}，添加newfield :函数(){ this . setdata({ ' new field . text ' : ' new data ' })})视图层

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

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

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

WXSS(微信样式表)用于描述页面的样式。

组件是视图的基本单元。

什么是事件

事件是从视图层到逻辑层的通信模式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定到组件，当到达触发事件时，将执行逻辑层中相应的事件处理功能。事件对象可以携带附加信息，如id、数据集、触摸。如何使用事件

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

例如，当用户点击组件时，相应的事件处理函数将在页面对应的页面中找到。

视图id='tapTest '数据-hi='MINA' bindtap='tapName '点击我！/view在对应的Page定义中写入对应的事件处理函数，参数为event。page({ tap name : function(event){ console . log(event)} })基本组件

该框架为开发人员提供了一系列基本组件，可以组合起来进行快速开发。

什么是组件：

组件是视图层的基本单元。组件自带一些功能和微信风格。一个组件通常包括一个开始标签和一个结束标签。属性用于修改组件，内容在两个标签内。标记名属性=“值”内容在这里./tagname注意：所有组件和属性都是小写的，并且用连字符连接。

感谢您的阅读，希望对大家有所帮助，感谢您对本网站的支持！