WeChat 미니 프로그램에서 wxml 파일을 참조하고 템플릿을 보는 방법

이 글에서는 WeChat 미니 프로그램에서 wxml 파일을 참조하고 템플릿을 보는 방법을 설명합니다. WXML 파일을 참조하는 방법에는 두 가지가 있습니다. 이를 통해 반복되는 내용을 포함시켜 웹페이지 내용과 논리적 구조를 더 간단하고 명확하게 만들 수 있습니다. 더 가볍습니다.
또한 두 번째 방법에서는 템플릿을 사용하여 WXML 파일을 참조하는 방법을 배울 수 있습니다.
마지막으로, 미니 프로그램의 라이프사이클 소개를 통해 앞으로 각 단계에서 미니 프로그램의 이벤트를 정리하고 정리해야 할 경우를 모두가 명확하게 알 수 있습니다. 다양한 단계에서 다양한 작업을 수행하면 해당 이벤트에 쓸 수 있습니다.

핵심 내용

wxml 파일에 대한 두 가지 참조 유형(include, import)

템플릿 활용

미니 프로그램 생활 사이클

예제 1: 포함 모드에서 header.wxml 파일 참조

파일 참조는 코드 재사용에 매우 중요합니다. public을 사용할 수 있습니다. 머리글 부분, 바닥글 및 기타 부분을 추출한 다음 필요한 곳에 인용하십시오.
WeChat 애플릿에는 포함 및 가져오기와 같은 참조 기능이 포함되어 있습니다. 파일을 참조하기 위해 이 두 태그를 사용하는 방법은 기본적으로 동일합니다.
WeChat의 참조 뷰 파일은 렌더링되지 않습니다. 기본적으로 참조 파일을 참조 위치에 직접 복사하는 것과 유사하므로 다시 렌더링해야 합니다.
설명 예시

여기서 기본적으로 생성된 사용자 아바타 정보는 header.wxml에 헤더 참조로 추출되며, 이는 각각 index2.wxml과 index3.wxml에서 참조됩니다. 참조 방법은 include입니다.
예제 코드

페이지에 common/header.wxml 생성
시스템에서 기본으로 생성한 사용자 정보 구조를 index.wxml에서 header.wxml로 복사합니다.
header.wxml 코드:

<!--pages/common/header.wxml-->
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>

두 페이지 모두 header.wxml을 포함해야 하므로 스타일 파일을 반복해서 작성할 필요는 없습니다. 여기서는 스타일을 app.wxss에 직접 복사합니다.
app.wxss 코드:

/**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;
}

index/index2 및 index/index3 만들기

index2.wxml 콘텐츠:

<!--pages/index/index2.wxml-->
<view class="container">
    <include src="../common/header.wxml" />
 
    <view class="myBtn">
        <button type="primary" bindtap="goIndex3">进入index3</button>
    </view>    
</view>

index2.wxml과 index3.wxml 모두 userInfo 데이터가 필요하므로 index2가 데이터를 얻은 후 로컬 저장소를 사용하여 이를 저장하고 index3.wxml은 로컬 저장소를 읽습니다.

index2.js 코드:

// pages/index/index2.js
var app = getApp()
 
Page({
  data: {
    userInfo: {},
  },
 
  goIndex3:function(){
    wx.navigateTo({
      url: 'index3'
    })
  },
 
  onLoad: function () {
    console.log('onLoad')
    var that = this
    app.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      })
 
      //本地存储
      wx.setStorageSync('userInfo', userInfo)
    })
  }

index3.wxml 코드:

<!--pages/index/index3.wxml-->
 
<view class="container">
    <include src="../common/header.wxml" />
 
    <text>pages/index/index3.wxml</text>
</view>

index3.js 코드:

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

인스턴스 효과

예제 2: 가져오기를 사용하여 footer.wxml 파일 참조

이 예에서는 가져오기를 사용하여 파일을 참조합니다. 가져오기는 나중에 포함보다 훨씬 강력합니다. . 비교해보자.

가져오기 참조 방법에는 WeChat 템플릿(템플릿)에 대해 먼저 이야기하겠습니다.

WeChat 보기 템플릿(템플릿)

템플릿도 .wxml로 작성된 다음... 태그를 사용하여 템플릿 정보를 지정합니다.

<template name="msgItem">
    视图代码...
</template>

name 속성을 템플릿 이름으로 사용하세요.

템플릿 사용:

<template is="msgItem" data="{{...item}}"/>

data는 템플릿에 전달되는 데이터입니다.

설명 예

템플릿을 사용하여 바닥글 보기 코드 조각을 만든 다음 가져오기 및 템플릿을 사용하여 코드를 호출합니다.
예제 코드

footer.wxml 만들기

footer.wxml 코드:

index2.wxml 코드:

인스턴스 효과

예 3: 애플릿 종료 시 로컬 데이터 지우기

이는 미니 프로그램의 수명 주기와 관련됩니다. 미니 프로그램의 수명 주기는 app.js에 정의되어 있습니다.
[tr] 속성 유형 설명 트리거 시간[/ tr]

페이지 수명 주기:
[tr] 속성 유형 설명[/tr]

여기에서는 onUnload 이벤트가 사용됩니다.
index2.js 코드:

import는 이 파일의 대상 파일에서 정의한 템플릿을 사용할 수 있습니다.
include는 대상 파일을 제외한 전체 코드를 가져올 수 있습니다. , 꽤 그렇군요. 그래서 include 위치에 복사하세요

가져오기 범위

가져오기는 범위 개념을 가지고 있습니다. 즉, 대상 파일에 정의된 템플릿만 가져오지만, 대상 파일에서 가져온 템플릿이 아닙니다.
예: C import B, B import A, C에서는 B가 정의한 템플릿을 사용할 수 있고, B에서는 A가 정의한 템플릿을 사용할 수 있지만 C는 A가 정의한 템플릿을 사용할 수 없습니다.

위 내용은 WeChat 미니 프로그램에서 wxml 파일을 참조하고 템플릿을 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!