위 챗 애플 릿 은 템 플 릿 템 플 릿 에 데 이 터 를 전달 하 는 방식 으로 정 리 됩 니 다.

본 고 는 위 챗 애플 릿 이 템 플 릿 템 플 릿 에 데 이 터 를 전달 하 는 방식 을 요약 했다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
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 의 작성 방법 은 첫 번 째 와 같 습 니 다.
본 논문 에서 말 한 것 이 여러분 의 위 챗 애플 릿 개발 에 도움 이 되 기 를 바 랍 니 다.