So übergeben Sie Daten an eine Vorlage im WeChat-Applet

In diesem Artikel wird hauptsächlich die Art und Weise vorgestellt, wie das WeChat-Applet die Datenübertragung zu verschachtelten Vorlagenvorlagen implementiert. Er fasst die Definition, den Aufruf, die Parameterübertragung und die damit verbundenen Verwendungsfähigkeiten verschachtelter Vorlagenvorlagen im WeChat-Applet zusammen wird benötigt Freunde können sich darauf beziehen

Das Beispiel in diesem Artikel fasst die Art und Weise zusammen, wie das WeChat-Applet die Datenübertragung in verschachtelte Vorlagen implementiert. Geben Sie es wie folgt als Referenz an alle weiter:

1 Wenn die von der Vorlage aufgerufenen Daten in einer einzigen Form vorliegen:

indexTemplate-Vorlage:

<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-Vorlage:

<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>

Die Referenz der indexTemplate-Vorlage in index.wxml:

  <block wx:for="{{newsData}}" wx:for-item="newsItem">
   <view class="item">
    <template is="indexTemplate" data="{{...newsItem}}" />
   </view>
  </block>

Die entsprechende index.js-Schreibmethode für index.wxml :

var newsDataList = require("../index-data.js");
Page({
  data: {
  },
  onLoad: function (option) {
    this.setData({
      newsData: newsDataList.dataList
    });
  }
})

Verwenden Sie eine einzige Datenform in der Vorlage:

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
}

Wenn Sie mehrere Daten in einer verschachtelten Vorlage übergeben müssen, können Sie die einzelnen Daten durch Kommas trennen.

2. Die aufrufende Methode, wenn verschachtelte Vorlagenaufrufe Objektobjekte umfassen:

Die in der Vorlage verwendete Datenüberprüfung und das Aussehen sind im Formular von Objekten Wenn präsentiert:

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 template

<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:

<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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

So implementieren Sie die Webversion des Rechners in JS

Wie Sie JS verwenden, um die parabolische Flugbahn zu implementieren einer kleinen Kugel

So implementieren Sie domänenübergreifende Cookies in Axios

So implementieren Sie Binärbaum-Traversal mit JavaScript

In JavaScript So erzielen Sie einen elastischen Effekt

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Daten an eine Vorlage im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!