Heim >WeChat-Applet >Mini-Programmentwicklung >Funktionale Umsetzung benutzerdefinierter Vorlagen für WeChat-Miniprogramme

Funktionale Umsetzung benutzerdefinierter Vorlagen für WeChat-Miniprogramme

小云云
小云云Original
2018-05-24 16:07:313250Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung benutzerdefinierter WeChat-Applet-Vorlagen vorgestellt und die Definition, der Datenaufruf, die Layouteinstellungen und andere einfache Verwendungstechniken benutzerdefinierter WeChat-Applet-Vorlagen anhand von Beispielen detailliert analysiert dazu.

1. Erstellen Sie eine neue WXML (zum Testen wird die WXML-Datei hier im Home-Verzeichnis erstellt)

/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. Neues wxss erstellen

/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. Seitenreferenz

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

4 🎜>

@import "../home/home.wxss";
5. Datendaten in 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>
Der obige Inhalt ist die Funktion des Benutzers Vorlage des WeChat-Miniprogramms Realisiert, ich hoffe, es hilft allen.

Verwandte Empfehlungen:

So ändern Sie dynamisch die Breite und Höhe von Ansichtsbeschriftungen über das WeChat-Applet

Einführungsbeispiel für die WeChat-Applet-Entwicklung

So implementieren Sie die Vorschaufunktion zur Bildvergrößerung im WeChat-Applet

Das obige ist der detaillierte Inhalt vonFunktionale Umsetzung benutzerdefinierter Vorlagen für WeChat-Miniprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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