Examples of User-Defined Template usage of WeChat applets, and analysis of Applet instances

Examples of User-Defined Template usage and Analysis of Applet instances

This document describes how to use a mini-program User-Defined Template. We will share this with you for your reference. The details are as follows:

1. Create a New wxml file (for test convenience, here the wxml file is created in the home directory)

/Home/botmenu. wxml:

<Template name = "bottommenu"> <view class = "bottomposition"> <navigator class = "item_info" url = ".. /home "> <image src = ".. /img/sy.png "> </image> <text> homepage </text> </navigator> <navigator class =" item_info "url ="/pages/home "> <image src = ".. /img/xx.png "> </image> <text> message </text> </navigator> <navigator class =" item_info "url ="/pages/home "> <image src = ".. /img/lz.png "> </image> <text> tool </text> </navigator> <navigator class =" item_info "url ="/pages/home "> <image src = ".. /img/wo.png "> </image> <text> mE </text> </navigator> </view> </template>

2. Create a wxss instance

/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. data in index. js:

Data: {tool_list: [{name: "online JavaScript code beautification, formatting tools", url: "http://tools.jb51.net/code/js"}, {name: "json code online formatting/beautification/compression/editing/Conversion Tool", url: "http://tools.jb51.net/code/jsoncodeformat"}, {name: "simplified Chinese Simplified Conversion Tool", url: "http://tools.jb51.net/transcoding/convertzh" },{ name: "Regular Expression online generation tool", url: "http://tools.jb51.net/regex/create_reg" },{ name: "XML code online formatting tool", url: "http://tools.jb51.net/code/xmlcodeformat" },{ name: "online scientific calculator", url: "http://tools.jb51.net/jisuanqi/jsqkexue" },{ name: "BASE64 encoding and decoding tool", url: "http://tools.jb51.net/transcoding/base64"}]},

6. index. wxml

<! -- Index. wxml --> <view class = 'userinfo'> online tool for helping customers </view> <view wx: for = "{tool_list}" class = "infolist"> <text >{{ item. name }}- {item. url }}</text> </view> <import src = ".. /home. wxml "/> <view class =" info "> <template is =" bottommenu "> </template> </view>

Page Test results:

I hope this article will help you develop small programs.