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

Home

WeChat Applet

WeChat Development

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

零下一度

May 26, 2017 am 10:51 AM

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;
  })
 }
})

Copy after login

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!
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
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.

Add App and Page methods to register programs and pages.
Provides rich API, such as scanning, payment and other WeChat-specific capabilities.
Each page has an independent scope and provides modular capabilities.
Since the framework does not run in the browser, some JavaScript capabilities cannot be used in the web, such as document, window, etc.
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;}]
 }
})

Copy after login

Page.prototype.setData()

## The setData function is used to set data Sent from the logic layer to the view layer, while changing the corresponding value of this.data.

Note:

1. Directly modifying this.data is invalid and cannot change the

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

Accepted An object, in the form of

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

The key can be very flexible and given in the form of a data path, such as array[2].message, a.b.c.d, and does not need to be predefined in this.data.

Sample code:

<!--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;
  })
 }
})

Copy after login

View layer

The view layer of the framework is written by WXML and

WXSS, written by components for display.

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

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

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

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

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如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)
 }
})

Copy after login

基础组件

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

什么是组件：

组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

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

Copy after login

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

【相关推荐】

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7767

Java Tutorial

1644

CakePHP Tutorial

1399

Laravel Tutorial

1293

PHP Tutorial

1234

Related knowledge

PHP WeChat development: How to implement message encryption and decryption May 13, 2023 am 11:40 AM

PHP is an open source scripting language that is widely used in web development and server-side programming, especially in WeChat development. Today, more and more companies and developers are starting to use PHP for WeChat development because it has become a truly easy-to-learn and easy-to-use development language. In WeChat development, message encryption and decryption are a very important issue because they involve data security. For messages without encryption and decryption methods, hackers can easily obtain the data, posing a threat to users.

Using PHP to develop WeChat mass messaging tools May 13, 2023 pm 05:00 PM

With the popularity of WeChat, more and more companies are beginning to use it as a marketing tool. The WeChat group messaging function is one of the important means for enterprises to conduct WeChat marketing. However, if you only rely on manual sending, it is an extremely time-consuming and laborious task for marketers. Therefore, it is particularly important to develop a WeChat mass messaging tool. This article will introduce how to use PHP to develop WeChat mass messaging tools. 1. Preparation work To develop WeChat mass messaging tools, we need to master the following technical points: Basic knowledge of PHP WeChat public platform development Development tools: Sub

PHP WeChat development: How to implement user tag management May 13, 2023 pm 04:31 PM

In the development of WeChat public accounts, user tag management is a very important function, which allows developers to better understand and manage their users. This article will introduce how to use PHP to implement the WeChat user tag management function. 1. Obtain the openid of the WeChat user. Before using the WeChat user tag management function, we first need to obtain the user's openid. In the development of WeChat public accounts, it is a common practice to obtain openid through user authorization. After the user authorization is completed, we can obtain the user through the following code

PHP WeChat development: How to implement group message sending records May 13, 2023 pm 04:31 PM

As WeChat becomes an increasingly important communication tool in people's lives, its agile messaging function is quickly favored by a large number of enterprises and individuals. For enterprises, developing WeChat into a marketing platform has become a trend, and the importance of WeChat development has gradually become more prominent. Among them, the group sending function is even more widely used. So, as a PHP programmer, how to implement group message sending records? The following will give you a brief introduction. 1. Understand the development knowledge related to WeChat public accounts. Before understanding how to implement group message sending records, I

Steps to implement WeChat public account development using PHP Jun 27, 2023 pm 12:26 PM

How to use PHP to develop WeChat public accounts WeChat public accounts have become an important channel for promotion and interaction for many companies, and PHP, as a commonly used Web language, can also be used to develop WeChat public accounts. This article will introduce the specific steps to use PHP to develop WeChat public accounts. Step 1: Obtain the developer account of the WeChat official account. Before starting the development of the WeChat official account, you need to apply for a developer account of the WeChat official account. For the specific registration process, please refer to the official website of WeChat public platform

PHP WeChat development: How to implement voting function May 14, 2023 am 11:21 AM

In the development of WeChat public accounts, the voting function is often used. The voting function is a great way for users to quickly participate in interactions, and it is also an important tool for holding events and surveying opinions. This article will introduce you how to use PHP to implement WeChat voting function. Obtain the authorization of the WeChat official account. First, you need to obtain the authorization of the WeChat official account. On the WeChat public platform, you need to configure the API address of the WeChat public account, the official account, and the token corresponding to the public account. In the process of our development using PHP language, we need to use the PH officially provided by WeChat

PHP WeChat development: How to implement customer service chat window management May 13, 2023 pm 05:51 PM

WeChat is currently one of the social platforms with the largest user base in the world. With the popularity of mobile Internet, more and more companies are beginning to realize the importance of WeChat marketing. When conducting WeChat marketing, customer service is a crucial part. In order to better manage the customer service chat window, we can use PHP language for WeChat development. 1. Introduction to PHP WeChat development PHP is an open source server-side scripting language that is widely used in the field of Web development. Combined with the development interface provided by WeChat public platform, we can use PHP language to conduct WeChat

How to use PHP for WeChat development? May 21, 2023 am 08:37 AM

With the development of the Internet and mobile smart devices, WeChat has become an indispensable part of the social and marketing fields. In this increasingly digital era, how to use PHP for WeChat development has become the focus of many developers. This article mainly introduces the relevant knowledge points on how to use PHP for WeChat development, as well as some of the tips and precautions. 1. Development environment preparation Before developing WeChat, you first need to prepare the corresponding development environment. Specifically, you need to install the PHP operating environment and the WeChat public platform

See all articles