미니 프로그램 템플릿 활용 방법에 대한 심층 분석

이 글이 미니 프로그램 템플릿의 사용법을 자세히 이해하는 데 도움이 되기를 바랍니다!

WXML은 코드 조각을 정의한 다음 다른 위치에서 호출할 수 있는 템플릿을 제공합니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

서문

얻을 내용

• 미니 프로그램 템플릿 사용 방법

• 미니 프로그램 템플릿 데이터 및 이벤트 처리

• 미니 프로그램 일부 템플릿 메모 및 최적화

템플릿의 기본 사용법

템플릿 파일 생성

페이지에 템플릿 폴더를 생성하세요. 미니 프로그램 개발 도구인 [새 페이지]를 사용하면 파일을 빠르게 생성할 수 있습니다

참고 : 템플릿 호출 시 wxml, wxss 파일만 작동하며, 템플릿 내 JS 파일은 작동하지 않습니다. 템플릿의 로직은 에 의해 호출되는 파일에서 처리되어야 합니다.

Create 파일은 자신의 프로젝트에 따라 디자인할 수 있지만 항상 그런 것은 아닙니다.

템플릿 정의

<template></template>에서 코드 조각을 정의하고 이름을 사용하세요. 속성을 템플릿 이름으로 사용합니다.

<template name="msgItem">
    <view>
        <text class="info">这是一个msg模板</text>
    </view>
</template>

템플릿 사용<template/>内定义代码片段，使用 name 属性，作为模板的名字。

<!-- index.wxml -->

<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>

<!--使用-->
<template is="msgItem"/>

使用模板

在wxml中要使用模板，有两步

1）、声明，关键 import 标签

2）、使用，关键 is属性

/**index.wxss**/
@import "../template/template.wxss";

这里is的名字和模板name命名的保持一致

模板的wxss

如果模板有自己的wxss，如我们的template.wxss文件，则需要在调用模板的文件（如示例的index.wxss）导入，否则不会生效

<!-- index.wxml -->

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

归纳：

• wxss导入wxss中
• wxml导入wxml中
• js无效

模板的数据传递

【调用的wxml】通过data给模板传值

<!-- index.js -->

Page({
  data: {
    item: {
       title: &#39;模板&#39;,
       msg: &#39;this is a template&#39;,
    }
  }
})

item是在调用的js中定义好的

<!-- template.wxml -->

<template name="msgItem">
    <view>
        <text class="info">
            {{title}}: {{msg}}
        </text>
    </view>
</template>

在模板直接使用

<template is="msgItem" data="{{data1, data2}}"/>

如果有传递多个参数，则用逗号隔开

<!--template.wxml-->

<template name="msgItem">
    <view>
        <text class="info" bindtap="handleTap">
            {{title}}: {{msg}}
        </text>
    </view>
</template>

模版文件中的事件处理

模板使用的是【调用模板的js文件】里的事件。

• 定义在自己的template.js
wxml에서 템플릿을 사용하려면 두 단계가 있습니다

1) 키 가져오기 태그를 선언하고

2) 키 is 속성을 사용합니다

<!-- index.js -->

handleTap() {
    console.log(&#39;template 模版 click&#39;)
  },

여기의 이름은 템플릿 이름과 일치합니다template模板不能直接使用自己的js，但是我们可以把方法统一写在template.js文件里，然后在使用模板的文件js里面引入一下。）

在任意js文件统一定义方法

<!-- template.js -->

const template = {
    handleTap() {
        console.log(&#39;template 模版 click&#39;)
    }
}

export default template;

在需要使用的地方导入即可

// index.js
import template from '../template/template';

Page({
  handleTap:template.handleTap
})

关于js文件中的数据传递

在template.js里可以直接拿到index.js

템플릿의 wxss

템플릿에 와 같은 자체 wxss가 있는 경우 template.wxss</ code> 파일을 사용하려면 템플릿을 호출하는 파일(예: <code>index.wxss 예)에서 이를 가져와야 합니다. 그렇지 않으면 적용되지 않습니다

C import B import A

//C能用B，B能用A，但是C不能用A

요약 :

wxss import wxss

wxml import wxml
• js가 유효하지 않습니다

템플릿의 데이터 전송

[wxml이라고 함]이 값을 datarrreee

item을 통한 템플릿은 호출된 js에 정의된

rrreee가 템플릿에서 직접 사용됩니다rrreee

여러 매개변수가 전달되는 경우 쉼표로 구분하세요
rrreee

템플릿 file

템플릿에서 이벤트 처리는 [템플릿을 호출하는 js 파일]의 이벤트를 사용합니다.

자신의 template.js에 정의된 내용은 적용되지 않습니다

rrreeerrreee
• 템플릿 이벤트 최적화
  템플릿에 공개된 메서드인 경우 해당 메서드는 각 템플릿에 포함되어야 합니다. 라는 파일을 다시 작성하게 되면 반복되는 코드가 많아지게 되는데, 아래와 같이 개선할 수 있습니다. (template 템플릿이 자체 js를 직접 사용할 수는 없지만 template.js 파일에 메소드를 균일하게 작성한 다음 이를 사용하는 js 파일에 도입할 수 있습니다. )

모든 js 파일에서 메소드를 균일하게 정의하세요

rrreee

필요한 곳에 가져오기만 하면 됩니다

rrreee

js 파일의 데이터 전송 정보템플릿에서. jsindex.js 파일의 전체 데이터를 직접 얻을 수 있습니다

템플릿과 컴포넌트 컴포넌트의 유사점과 차이점🎜🎜🎜동일점🎜🎜🎜 🎜 모두 코드 재사용을 달성하기 위한 것입니다. 🎜🎜 단독으로 표시할 수 없으며 페이지에 표시되어야 합니다. 🎜🎜🎜🎜차이 🎜🎜🎜🎜template🎜: 구성 파일(.json) 및 비즈니스 로직 파일(.json)이 없고 주로 표시용으로 가볍습니다. .js)이므로 템플릿 템플릿의 변수 참조 및 비즈니스 로직 이벤트는 [템플릿을 참조하는 페이지 js] 파일에 정의되어야 합니다. 🎜🎜🎜Component🎜: 페이지와 유사한 4개의 파일로 구성된 자체 비즈니스 로직이 있습니다. , 하지만 js 파일과 json 파일은 페이지와 다릅니다. 🎜🎜🎜Choose🎜🎜🎜🎜🎜디스플레이용이라면 템플릿을 사용하는 것으로 충분합니다. 🎜🎜🎜🎜비즈니스 로직 상호 작용이 많이 포함된 경우 구성 요소 구성 요소를 사용하는 것이 가장 좋습니다. 🎜🎜import 범위 개념이 있습니다. 즉, 대상 파일에 정의된 템플릿만 가져오지만 대상 파일에서 가져온 템플릿은 가져오지 않습니다. 🎜rrreee🎜🎜🎜🎜🎜참조: WeChat 미니 프로그램 템플릿🎜🎜https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html🎜

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 미니 프로그램 템플릿 활용 방법에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!