Detailed explanation of the view layer (xx.xml) and logic layer (xx.js) in WeChat development

This article mainly introduces the relevant information about the detailed introduction of the view layer (xx.xml) and logic layer (xx.js) of the WeChat applet. Friends in need can refer to it

WeChat applet can understand For the concept of cloud OS, the WeChat ecosystem itself is an OS. In addition, the WeChat public platform and the WeChat development platform themselves are already very mature structures, which can perfectly match the functions of Apps. At the same time, they can also achieve the ultimate in interactive experience, and have the potential to replace Apps. The significance of the Apple App Store model is to provide third-party software providers with a convenient and efficient software sales platform. The fees paid by users to purchase apps are split 3:7 between Apple and app developers. If the WeChat mini program mall also adopts a similar commission model, the more than 800 million users will be a very large intangible asset and become another source of gold for Tencent after games, memberships, and advertising.

WeChat mini programs allow people to use apps without downloading and installing them. Users can scan the QR code on WeChat to open the program. WeChat applet can be applied on different systems such as Android and iOS, and can also be shared on different platforms, because it itself is similar to a website page.

Mini program view layer (xx.xml) and logic layer (xx.js)

The entire system is divided into two parts The view layer (View) and logic layer (App Service)

framework allows data and views to be synchronized very simply. When modifying data, you only need to modify the data in the logical layer, and the view layer will update accordingly.

Look at this simple example:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
 name: &#39;WeChat&#39;
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: &#39;MINA&#39;
  })
 }
})

1. The developer binds the name in the logic layer data to the name in the view layer through the framework, so in When the page is opened, it will display Hello WeChat!

2. When the button is clicked, the view layer will send the changeName event to the logic layer, and the logic layer will find the corresponding event processing function

3. The logic layer performed the setData operation and changed the name from WeChat to MINA. Because the data has been bound to the view layer, the view layer will automatically change to Hello MINA!.

The view layer is xx.xml

The logic layer is xx.js

Read It will first look at the initial data of the logic layer to populate the view layer. The view layer triggers events in the logic layer, and the logic layer returns and changes the content of the view layer.

Logic layer (App Service)

The logic layer of the small program development framework is written by JavaScript.

The logic layer processes the data and sends it to the view layer, and at the same time accepts event feedback from the view layer. Based on JavaScript, we made some modifications to facilitate the development of small programs.

1. Add App and Page methods to register programs and pages.

2. Provides rich API, such as scanning, payment and other WeChat-specific capabilities.

3. Each page has an independent scope and provides modular capabilities.

4. Since the framework does not run in the browser, some JavaScript capabilities cannot be used in the web, such as document, window, etc.

5. All the code written by the developer will eventually be packaged into a JavaScript and run when the mini program starts until the mini program is destroyed. Similar to ServiceWorker, so the logic layer is also called App Service.
   

Initialization data

Initialization data will be used as the first rendering of the page. The data will be transmitted from the logic layer to the rendering layer in the form of JSON, so the data must be in a format that can be converted into JSON: strings, numbers, Boolean values, objects, and arrays.

The rendering layer can bind data through WXML.

Sample code:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})

Page.prototype.setData()

Note:

status of the page. It will also cause data inconsistency. 2. The data set at a time cannot exceed 1024kB. Please try to avoid setting too much data at one time.

setData() parameter format

key, value, represents changing the value corresponding to the key in this.data to value.

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{text: &#39;init data&#39;}],
  object: {
   text: &#39;init data&#39;
  }
 },
 changeText: function() {
  // this.data.text = &#39;changed data&#39; // bad, it can not work
  this.setData({
   text: &#39;changed data&#39;
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   &#39;array[0].text&#39;:&#39;changed data&#39;
  })
 },
 changeItemInObject: function(){
  this.setData({
   &#39;object.text&#39;: &#39;changed data&#39;
  });
 },
 addNewField: function() {
  this.setData({
   &#39;newField.text&#39;: &#39;new data&#39;
  })
 }
})

View layer

WXSS, written by components for display.

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

1. 事件是视图层到逻辑层的通讯方式。

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

3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

4. 事件对象可以携带额外信息，如id, dataset, touches。
   

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基础组件

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

什么是组件：

1. 组件是视图层的基本组成单元。

2. 组件自带一些功能与微信风格的样式。

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

<tagname property="value">
 Content goes here ...
</tagename>

注意：所有组件与属性都是小写，以连字符-连接

【相关推荐】

1. 微信小程序之页面传值详解

2. 微信小程序开发样式常见的问题整理

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

4. 小程序开发之利用co处理异步流程的实例教程

The above is the detailed content of Detailed explanation of the view layer (xx.xml) and logic layer (xx.js) in WeChat development. For more information, please follow other related articles on the PHP Chinese website!