Comment implémenter des modèles définis par l'utilisateur dans les mini-programmes WeChat

Cet article présente principalement l'utilisation de modèles définis par l'utilisateur pour les programmes WeChat Mini et analyse en détail la définition, les appels de données, les paramètres de mise en page et d'autres techniques d'utilisation simples des modèles personnalisés du programme WeChat Mini sous forme d'exemples. le besoin peut se référer à ce qui suit

L'exemple de cet article décrit l'utilisation de modèles définis par l'utilisateur pour les mini-programmes WeChat. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Créez un nouveau wxml (pour faciliter les tests, le fichier wxml est créé dans le répertoire personnel ici)

. /home/home/botmenu.wxml :

<template name="bottommenu">
  <view class="bottomposition">
   <navigator class="item_info" url="../home/home">
     <image src="../img/sy.png"></image>
     <text>首页</text>
   </navigator>
   <navigator class="item_info" url="/pages/home/home">
     <image src="../img/xx.png"></image>
     <text>消息</text>
   </navigator>
   <navigator class="item_info" url="/pages/home/home">
     <image src="../img/lz.png"></image>
     <text>工具</text>
   </navigator>
   <navigator class="item_info" url="/pages/home/home">
     <image src="../img/wo.png"></image>
     <text>我</text>
   </navigator>
  </view>
</template>

2. Créer un nouveau wxss

/home/home/botmenu.wxss :

.bottomposition{
 width: 100%;
 height: 10%;
 position: fixed;
 overflow: hidden;
 left: 0;
 top: 90%;
z-index: 1100;
 display: flex;
 border-top: 1rpx solid #dadada;
}
.item_info {
 width: 25%;
 height: 100%;
 display: flex;
 align-items: center;
 flex-direction: column;
 justify-content: center;
}
.item_info image {
 width: 20px;
 height: 20px;
}
.item_info text {
 margin-top: 5px;
 font-size: 12px;
}
.infolist{
 margin:10px;
 padding: 0 10px;
 font-size: 12px;
}

3. référence

<import src="../home/home.wxml"/>
<view class="info">
 <template is="bottommenu"></template>
</view>

4. Référence du style de page

@import "../home/home.wxss";

5. Données de données dans index.js :

data: {
 tool_list:[{
  name:"在线JavaScript代码美化、格式化工具",
  url:"http://tools.jb51.net/code/js"
 },{
  name:"json代码在线格式化/美化/压缩/编辑/转换工具",
  url:"http://tools.jb51.net/code/jsoncodeformat"
 },{
  name:"中文繁体字简体字转换(繁简转换)工具",
  url:"http://tools.jb51.net/transcoding/convertzh"
 },{
  name:"正则表达式在线生成工具",
  url:"http://tools.jb51.net/regex/create_reg"
 },{
  name:"XML代码在线格式化美化工具",
  url:"http://tools.jb51.net/code/xmlcodeformat"
 },{
  name:"在线科学计算器",
  url:"http://tools.jb51.net/jisuanqi/jsqkexue"
 },{
  name:"BASE64编码解码工具",
  url:"http://tools.jb51.net/transcoding/base64"
 }]
 },

6.

脚本之家在线工具

 {{item.name}} - {{item.url}}

<import src="../home/home.wxml"/>
<view class="info">
 <template is="bottommenu"></template>
</view>

Ce qui précède est que je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Opérations complexes sur MVC dans AngularJS

Comment utiliser CommonsChunkPlugin pour extraire des modules publics

Comment implémenter Toast à l'aide de ReactNative

Tutoriel d'installation de la CLI angulaire

Implémenté via nextTick() dans la file d'attente de mise à jour asynchrone de Vuejs

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!