위 챗 애플 릿 은 템 플 릿 템 플 릿 에 데 이 터 를 전달 하 는 방식 으로 정 리 됩 니 다.
1.template 템 플 릿 에서 호출 된 데이터 가 단일 형태 일 때:
indexTemplate 템 플 릿:
<import src="../lookAndCollect-template/lookAndCollect-template.wxml" />
<template name="indexTemplate">
<view class="user-info">
<image class="avatar" src="{{avatar}}"></image>
<text class="name">{{name}}</text>
<text class="date">{{date}}</text>
</view>
<view class="news">
<text class="news-title">{{title}}</text>
<image class="news-img" src="{{newsImg}}"></image>
<text class="news-content">{{content}}</text>
</view>
<template is="reviewAndCollect" data="{{review,look}}"></template>
</template>
lookAndCollect 템 플 릿:
<template name="lookAndCollect-template">
<view class="lookAndCollect-template">
<view class="lookAndCollect-template-review">
<image src="/smallApp/images/icon/view.png"></image>
<text>{{look}}</text>
</view>
<view class="lookAndCollect-template-look">
<image src="/smallApp/images/icon/chat.png"></image>
<text>{{collect}}</text>
</view>
</view>
</template>
index Template 템 플 릿 이 index.wxml 에서 의 참조:
<block wx:for="{{newsData}}" wx:for-item="newsItem">
<view class="item">
<template is="indexTemplate" data="{{...newsItem}}" />
</view>
</block>
index.wxml 에 대응 하 는 index.js 쓰기:
var newsDataList = require("../index-data.js");
Page({
data: {
},
onLoad: function (option) {
this.setData({
newsData: newsDataList.dataList
});
}
})
템 플 릿 에서 단일 형식의 데 이 터 를 사용 합 니 다:
var news_data = [
{
listId: "0",
avatar: "/smallApp/images/avatar/1.png",
name: " ",
date: "16 ",
title: " ? ",
newsImg: "/smallApp/images/post/crab.png",
content: " , , 《 》 , (DGSE) 2019 600 , 、 , , 。",
review: "0",
look: "30"
},
{
listId: "1",
avatar: "/smallApp/images/avatar/2.png",
name: " ",
date: "1 ",
title: " 4 ",
newsImg: "/smallApp/images/post/bl.png",
content: " , , ( “ ”), 64.58%, 4 ( )…",
review: "100",
look: "380"
}
];
module.exports = {
dataList: news_data
}
끼 워 넣 은 템 플 릿 에 여러 개의 데 이 터 를 전송 해 야 한다 면 모든 데 이 터 를 쉼표 로 구분 할 수 있 습 니 다.2.포 함 된 템 플 릿 호출 은 object 대상 을 포함 한 호출 방법 입 니 다.
템 플 릿 에 사 용 된 데이터 review 와 look 가 대상 으로 표 시 될 때:
var news_data = [
{
listId: "0",
avatar: "/smallApp/images/avatar/1.png",
name: " ",
date: "16 ",
title: " ? ",
newsImg: "/smallApp/images/post/crab.png",
content: " , , 《 》 , (DGSE) 2019 600 , 、 , , 。",
reviewAndCollect {
review: "0",
look: "30"
}
},
{
listId: "1",
avatar: "/smallApp/images/avatar/2.png",
name: " ",
date: "1 ",
title: " 4 ",
newsImg: "/smallApp/images/post/bl.png",
content: " , , ( “ ”), 64.58%, 4 ( )…",
reviewAndCollect {
review: "120",
look: "300"
}
}
];
module.exports = {
dataList: news_data
}
indexTemplate 템 플 릿
<import src="../lookAndCollect-template/lookAndCollect-template.wxml" />
<template name="indexTemplate">
<view class="user-info">
<image class="avatar" src="{{avatar}}"></image>
<text class="name">{{name}}</text>
<text class="date">{{date}}</text>
</view>
<view class="news">
<text class="news-title">{{title}}</text>
<image class="news-img" src="{{newsImg}}"></image>
<text class="news-content">{{content}}</text>
</view>
<template is="reviewAndCollect" data="{{reviewAndCollect}}"></template>
</template>
lookAndCollect 템 플 릿:
<template name="lookAndCollect-template">
<view class="lookAndCollect-template">
<view class="lookAndCollect-template-review">
<image src="/smallApp/images/icon/view.png"></image>
<text>{{reviewAndCollect.look}}</text>
</view>
<view class="lookAndCollect-template-look">
<image src="/smallApp/images/icon/chat.png"></image>
<text>{{reviewAndCollect.collect}}</text>
</view>
</view>
</template>
ps:index Template 템 플 릿 이 index.wxml 에서 인용 되 고 index.wxml 에 대응 하 는 index.js 의 작성 방법 은 첫 번 째 와 같 습 니 다.본 논문 에서 말 한 것 이 여러분 의 위 챗 애플 릿 개발 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.