微信小程序用户自定义模版用法实例分析

微信小程序用户自定义模版用法实例分析

本文实例讲述了微信小程序用户自定义模版用法。分享给大家供大家参考，具体如下：

1、新建一个wxml（为测试方便，这里将wxml文件建立在home目录下）

/home/home/botmenu.wxml：

首页

&pIKEOlt;navigator class="item_info" url="/pages/home/home">

消息

工具

我

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: 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、页面引用

4、页面样式引用

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

5、index.js中的data数据：

data: {

tool_list:[{

name:"在线javascript代码美化、格式化工具",

url:"httphttp://://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}}

页面测试效果：

希望本文所述对大家微信小程序开发有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。