微信小程序中自定义模板

2024-04-17 14:16:15

文章目录

小程序项目
- templates/temp/temp.wxml
- templates/temp/temp.wxss
- pages/test/test.json
- pages/test/test.wxml
- pages/test/test.wxss
- pages/test/test.js
相关链接

小程序项目

1. 定义模板。
项目根目录下新建文件夹：templates，用于存放模板。
文件夹templates下新建文件夹：temp，temp下新建文件：temp.wxml和temp.wxss。
temp.wxml中，通过 <template name=""></template> 定义模板。
2. 新建页面。
小程序根目录下新建文件夹：test，在文件夹test下新建Page：test。
3. 目标页面中使用模板。
目标页面的wxml文件通过<import src=""/>引入模板的wxml文件。
目标页面的wxml文件通过 <template is=""></template> 使用模板。
目标页面的wxss文件得通过@import ""引入模板的wxss文件。

代码涉及的主要文件有：

templates/temp/temp.wxml
templates/temp/temp.wxss
pages/test/test.json
pages/test/test.wxml
pages/test/test.wxss
pages/test/test.js

templates/temp/temp.wxml

<!-- 定义模板 -->
<template name="my-template"><view class="user-box"><image class="avatar" src="{{avatarUrl}}"/><view class="username">{{username}}</view></view>
</template>

templates/temp/temp.wxss

.user-box{text-align: center;
}
.user-box .avatar{width: 300rpx;height: 300rpx;border-radius: 50%;
}
.user-box .username{font-size: 48rpx;font-family:fantasy;color: #1761d8;height: 80rpx;line-height: 80rpx;
}

pages/test/test.json

{"usingComponents": {},"navigationBarBackgroundColor": "#eee","navigationBarTextStyle": "black","navigationBarTitleText": "我的"
}

pages/test/test.wxml

<import src="/templates/temp/temp.wxml"/><view class="test-container"><template is="my-template" data="{{...user}}"></template>
</view>

pages/test/test.wxss

@import "/templates/temp/temp.wxss";.test-container{height: 100%;background: #eee;
}

pages/test/test.js

Page({data:{user:{username:"Mr Duck",avatarUrl:"/static/images/avatar.png"}}
})

相关链接

小程序中自定义组件
WXML语法参考>模板
WXML语法参考>引用

微信小程序中自定义模板相关推荐

微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
微信小程序中template模板使用
小程序官方使用简介模板 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板使用 name 属性,作为模板的名字.然后在内定义代码片段,如: <! ...
《十》微信小程序中自定义组件的组件模板和样式
组件 WXML 模板: 组件模板的写法与页面模板相同. 模板数据绑定: 与普通的 WXML 模板类似,可以使用数据绑定.  &l ...
微信小程序中自定义函数的学习使用
新手,最近在给学校搞个党费计算器.需要自己定义函数来实现某个功能. 1.无参函数: 函数都是写在js文件里面的. Page({data:{income1:'0',},cal:function(e){t ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
手把手教你开发微信小程序中的插件
继上次手把手教你实现微信小程序中的自定义组件已经有一段时间了(不了解的小伙伴建议去看看,因为插件很多内容跟组件相似),今年3月13日,小程序新增了小程序**「插件」功能,以及开发者工具新增「 ...
html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...
https://blog.csdn.net/small_lack/article/details/80959278 在一个微信小程序中想要用到两种不同的tabbar样式,需要在app.js中自定义,在 ...

最新文章

热门文章