Functional implementation of user-defined templates for WeChat mini programs

This article mainly introduces the usage of user-defined templates for WeChat Mini Programs. It analyzes in detail the definition, data calling, layout settings and other simple usage techniques of WeChat Mini Program custom templates in the form of examples. Friends in need can refer to it.

1. Create a new wxml (for the convenience of testing, the wxml file is created in the home directory)

/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. Create new 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, page reference

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

4, page style reference

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

5, index Data data in .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>

The above content is the function implementation of the user-defined template of the WeChat applet. I hope it can help everyone.

Related recommendations:

How to dynamically change the width and height of view labels in WeChat applet

Introduction example of WeChat applet development

How to implement the image enlargement preview function in WeChat applet

The above is the detailed content of Functional implementation of user-defined templates for WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!