Modèle d'applet WeChat modèle de référence exemple de partage

Cet article vous présente principalement les informations pertinentes sur les exemples détaillés référencés par le modèle de vue d'applet WeChat. J'espère que cet article pourra vous aider. Les amis dans le besoin pourront s'y référer.

Exemples détaillés de référence de modèle de vue d'applet WeChat

WXML fournit deux méthodes de référence de fichiers, l'importation et l'inclusion.

include peut importer l'intégralité du code à l'exception du fichier cible, ce qui équivaut à copier vers l'emplacement d'inclusion

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>

référence redirect.wxml

<import src="template/template.wxml" />

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
}

référence redirect.js

var content_data=require('../../template/template.js')
// pages/redirect/redirect.js
Page({

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

 },

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

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

 }

});

wxml

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

fichier template.wxss

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

Le fichier redirect.wxss fait référence au style ci-dessus

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

swiper{
 width:100%;
 height:500rpx;
}
swiper image{
  width:100%;
 height:500rpx;
}

Recommandations associées :

Comment résoudre le problème de compilation de modèles dans Vue.js

Conseils pour démarrer avec template.js

Dans les éléments et les modèles Explication détaillée de l'utilisation de l'instruction v-if

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!