How to reference wxml files and view templates in WeChat applets

This article will show you how to reference wxml files and view templates in small programs. you can reference WXML files in two ways to include duplicate content, this makes the webpage content and logic structure simpler, clearer, and more lightweight. This article will show you how to reference wxml files and view templates in small programs. you can reference WXML files in two ways to include duplicate content, this makes the webpage content and logic structure simpler, clearer, and more lightweight.
In addition, in the second method, you can see that WXML files are referenced using templates.
Finally, when the program exits, how can we clean it up? through the introduction of the life cycle of the applet, we can clearly understand the events of the applet in various stages, in the future, you need to schedule different tasks in different stages, which can be written into corresponding events.

Core content

Two types of wxml file references (include, import)

Template usage

Applet lifecycle

Example 1: reference the header. wxml file in the include mode

File reference is very important for code reuse. for example, in web development, we can extract common header parts and footer parts and then reference them as needed.
In the applet, the include and import functions are included in the reference function. The labels of these two referenced files are similar in usage. here we will talk about include.
The referenced view file is not rendered. it is similar to directly copying the referenced file to the reference location. Therefore, we need to re-render it.
Instance description

Here, the user profile information created by default is extracted to header. wxml for header reference, which is referenced by index2.wxml and index3.wxml respectively. the reference method is include.
Instance code

Create common/header. wxml in pages
Copy the user information structure created by default from index. wxml to header. wxml.
Header. wxml code:

   
     
      
  
   {{userInfo.nickName}}
    
 

Because both pages must contain header. wxml, the style file will not be re-written. copy the style directly to app. wxss.
App. wxss code:

/**app.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;} .userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;} .userinfo-nickname {  color: #aaa;}

Create index/index2 and index/index3

Index2.wxml content:

 
     
       
          
   Enter index3    
      
 

Because both index2.wxml and index3.wxml require userInfo data, you can use local storage to store the data obtained in index2. index3.wxml reads data from local storage.

Index2.js code:

// Pages/index/index2.jsvar app = getApp () Page ({data: {userInfo :{},}, goIndex3: function () {wx. navigateTo ({url: 'input3'})}, onLoad: function () {console. log ('onload') var that = this app. getUserInfo (function (userInfo) {that. setData ({userInfo: userInfo}) // store wx locally. setStorageSync ('userinfo', userInfo )})}

Index3.wxml code:

  
     
       
  
   pages/index/index3.wxml
  
 

Index3.js code:

// pages/index/index3.jsPage({  data:{    userInfo: {},  },  onLoad:function(options){        this.setData({      userInfo: wx.getStorageSync('userInfo')    })  },})

Instance effect

The template is also written in. wxml, and the specified template information is marked with.... the template is defined as follows:

 
  
View code...
 

Use the name attribute as the template name.

Template:

Data is the data passed into the template.

Instance description

Create a footer View code snippet using a template, and call the code using import and template.
Instance code

Create footer. wxml

For example, C import B, B import A. in C, the template defined by B can be used. in B, the template defined by A can be used, but in C, the template defined by A cannot be used.

The preceding section describes how to reference wxml files and view templates in small programs. For more information, see other related articles in the first PHP community!