Implémentation fonctionnelle de modèles définis par l'utilisateur pour les mini-programmes WeChat

Cet article présente principalement l'utilisation des modèles définis par l'utilisateur de l'applet WeChat et analyse en détail la définition, l'appel de données, les paramètres de mise en page et d'autres techniques d'utilisation simples des modèles personnalisés d'applet WeChat sous forme d'exemples. à cela.

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

/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éez 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 de page

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

4. >

@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. index.wxml

脚本之家在线工具

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

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

Le contenu ci-dessus est la fonction du modèle défini par l'utilisateur. du mini programme WeChat Réalisé, j'espère que cela aidera tout le monde.

Recommandations associées :

Comment modifier dynamiquement la largeur et la hauteur des étiquettes de vue via l'applet WeChat

Exemple d'introduction du développement d'applets WeChat

Comment implémenter la fonction d'aperçu de l'agrandissement de l'image dans l'applet WeChat

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!