Heim > Web-Frontend > js-Tutorial > Hauptteil

Referenzbeispiel für die WeChat-Applet-Vorlage zum Teilen

小云云
Freigeben: 2018-02-07 14:08:02
Original
2494 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zu den detaillierten Beispielen vor, auf die in der WeChat-Applet-Ansichtsvorlage verwiesen wird. Ich hoffe, dass dieser Artikel Ihnen helfen kann.

Detaillierte Beispiele für WeChat-Applet-Ansichtsvorlagen-Vorlagenreferenzen

WXML bietet zwei Dateireferenzmethoden: Importieren und Einschließen.

include kann den gesamten Code mit Ausnahme der Zieldatei einführen, was dem Kopieren in den Include-Speicherort entspricht

temlate.wxml


<template name="tmp_data" >

   <view class="content">
    <!-- 头像 -->
    <view class="author-date"> 
      <image src="{{item.header_url}}" class="author"></image>
      <text class="date">{{item.date}}{{idx}}</text>
    </view>
    <!-- 标题内容 -->
     <text class="title">{{item.title}}</text>
     <image class="image" src="{{item.image_url}}"></image>
     <text class="article-content">{{item.content}}</text>
    <view >

     <image class="article-images" src="../../images/icon/chat.png"></image>
     <text class="article-text">66</text>

     <image class="article-images" src="../../images/icon/view.png"></image>
     <text class="article-text">88</text>

    </view>


  </view>

</template>
Nach dem Login kopieren

redirect.wxml-Referenz


<import src="template/template.wxml" />
Nach dem Login kopieren

template.js


var content_for = [
 {
  date: "2020年 10月 9日 ",
  title: "那年夏天",
  header_url: "/images/3.png",
  image_url: "/images/6.jpg",
  content: "天不言自高,地不言自厚,奇迹,是不会在容易的道路上绽放的。人生没有如果,只有后果和结果,过去的不再回来,回来的不再完美。",
 },
 {
  date: "2022年 10月 9日 ",
  title: "夏天",
  header_url: "/images/3.png",
  image_url: "/images/8.jpg",
  content: "人生没有如果,只有后果和结果,过去的不再回来,回来的不再完美。",
 },

]
//输出出口
module.exports={
 templates: content_for
}
Nach dem Login kopieren

redirect.js-Referenz


var content_data=require(&#39;../../template/template.js&#39;)
// pages/redirect/redirect.js
Page({

 /**
  * 页面的初始数据
  */
 data: {

 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

   this.setData({
     key: content_data.templates
   });

 }

});
Nach dem Login kopieren

wxml


 <block wx:for="{{key}}" wx:for-item="item" wx:for-index="idx">
     <!-- is就是模板名字name值 -->
     <template is="tmp_data" data="{{item}}" />
   </block>
Nach dem Login kopieren

template.wxss-Datei


.title{
 font-size: 34rpx;
 font-weight: 600;
 color:#333;
 margin-bottom: 20px;
}
Nach dem Login kopieren

Die Datei „redirect.wxss“ verweist auf den oben genannten Stil


@import "template/template.wxss" //使用import定义

swiper{
 width:100%;
 height:500rpx;
}
swiper image{
  width:100%;
 height:500rpx;
}
Nach dem Login kopieren

Verwandte Empfehlungen:

So lösen Sie das Vorlagenkompilierungsproblem in Vue.js

Tipps für den Einstieg mit template.js

In Elementen und Vorlagen Detaillierte Erläuterung der Verwendung der V-IF-Anweisung

Das obige ist der detaillierte Inhalt vonReferenzbeispiel für die WeChat-Applet-Vorlage zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage