微信小程序自定义模板template

简介: 使用ES6...展开运算符,...person可以自动展开对象属性,这里的person对象在js里自己定义,:

示例:

创建目录和文件:

20210207215958235.png


mytemp.wxml:

<!-- 第一层必须是template标签,且name必须 -->
<template name="mytemp">
  <view>
    <view class="title">这是我自定的模板内容</view>
    <view class="userInfo">
      <view class="userName">用户名: {{username}}</view>
      <view class="age">年龄: {{age}}</view>
    </view>
  </view>
</template>


mytemp.wxss:

.title {
  font-size: 40rpx;
  color: greenyellow;
}

到这里模板已经创建好了。


开始导入使用:

<!-- 引入模板代码 -->
<import src="/template/mytemp/mytemp.wxml"></import>
<view>
    <!-- 测试模板 -->
  <view class="otherTitle">测试使用模板</view>
  <!-- is需要的就是需要模板定义时的name -->
  <template is="mytemp" data="{{...person}}"/>
</view>


使用ES6...展开运算符,...person可以自动展开对象属性,这里的person对象在js里自己定义,:

  data: {
    person: {
      username: 'curry',
      age: 33
    }
  },


需要注意wxss里也需要导入,否则样式不会生效:

/* 引入模板样式 */
@import "/template/mytemp/mytemp.wxss";
.otherTitle {
  font-size: 50rpx;
  font-weight: bold;
  color: red;
}


实现效果如下:

20210207220432401.png


最后需要注意的是如果模板里的类名和当前页面有相同类名,样式会被覆盖!!!

目录
相关文章
|
7月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
7月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
6月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
189 0
|
7月前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
254 8
|
9月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
1736 1
|
9月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
307 0
微信小程序:自定义关注公众号组件样式
|
11月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
517 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
9月前
|
小程序
java--微信小程序发送模板消息
java--微信小程序发送模板消息
303 0
|
11月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
3月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
249 12

热门文章

最新文章