微信小程序用戶自定義模版用法實(shí)例分析

第微信小程序用戶自定義模版用法實(shí)例分析本文實(shí)例講述了微信小程序用戶自定義模版用法。分享給大家供大家參考，具體如下：

1、新建一個(gè)wxml（為測(cè)試方便，這里將wxml文件建立在home目錄下）

/home/home/botmenu.wxml：

templatename="bottommenu"

view

navigatorurl="../home/home"

imagesrc="../img/sy.png"/image

text首頁(yè)/text

/navigator

navigatorurl="/pages/home/home"

imagesrc="../img/xx.png"/image

text消息/text

/navigator

navigatorurl="/pages/home/home"

imagesrc="../img/lz.png"/image

text工具/text

/navigator

navigatorurl="/pages/home/home"

imagesrc="../img/wo.png"/image

text我/text

/navigator

/view

/template

2、新建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:1rpxsolid#dadada;

.item_info{

width:25%;

height:100%;

display:flex;

align-items:center;

flex-direction:column;

justify-content:center;

.item_infoimage{

width:20px;

height:20px;

.item_infotext{

margin-top:5px;

font-size:12px;

.infolist{

margin:10px;

padding:010px;

font-size:12px;

3、頁(yè)面引用

importsrc="../home/home.wxml"/

view

templateis="bottommenu"/template

/view

4、頁(yè)面樣式引用

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

5、index.js中的data數(shù)據(jù)：

data:{

tool_list:[{

name:"在線JavaScript代碼美化、格式化工具",

url:"/code/js"

name:"json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具",

url:"/code/jsoncodeformat"

name:"中文繁體字簡(jiǎn)體字轉(zhuǎn)換(繁簡(jiǎn)轉(zhuǎn)換)工具",

url:"/transcoding/convertzh"

name:"正則表達(dá)式在線生成工具",

url:"/regex/create_reg"

name:"XML代碼在線格式化美化工具",

url:"/code/xmlcodeformat"

name:"在線科學(xué)計(jì)算器",

url:"/jisuanqi/jsqkexue"

name:"BASE64編碼解碼工具",

url:"/transcoding/base64"

6、index.wxml

!--index.wxml--

view在線工具/view

viewwx:for="{{tool_list}}"

text{{}}-{{item.url}}/text

/view

importsrc="../home/home.wxml"/