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

Funktionale Umsetzung benutzerdefinierter Vorlagen für WeChat-Miniprogramme

小云云
Freigeben: 2018-05-24 16:07:31
Original
3246 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

3. Seitenreferenz

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

4 🎜>

@import "../home/home.wxss";
Nach dem Login kopieren
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"
 }]
 },
Nach dem Login kopieren
6. index.wxml


脚本之家在线工具

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

<import src="../home/home.wxml"/>
<view class="info">
 <template is="bottommenu"></template>
</view>
Nach dem Login kopieren
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!

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