微信小程序用户自定义模版的功能实现

本文主要介绍微信小程序用户自定义模版用法,结合实例形式较为详细的分析了微信小程序自定义模板的定义、数据调用、布局设置等简单使用技巧,需要的朋友可以参考下。

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

/home/home/botmenu.wxml：

 template name= bottommenu 
 view >
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、页面引用
 import src= ../home/home.wxml / 
 view >
4、页面样式引用
@import ../home/home.wxss 
5、index.js中的data数据：
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 >
以上内容就是微信小程序用户自定义模版的功能实现，希望能帮助到大家。
相关推荐：
微信小程序实现动态改变view标签宽度和高度的方法
微信小程序开发入门实例
微信小程序如何实现图片放大预览功能
以上就是微信小程序用户自定义模版的功能实现的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！