微信小程序自定义模板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


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

目录
相关文章
|
1月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
455 1
|
1月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
64 0
微信小程序:自定义关注公众号组件样式
|
3月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
137 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
1月前
|
小程序
java--微信小程序发送模板消息
java--微信小程序发送模板消息
115 0
|
4月前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
108 4
|
4月前
|
小程序 前端开发
网络祭祀人物微信小程序模板源码
网络祭祀人物微信小程序模板源码
48 5
|
4月前
|
小程序
医院门诊预约挂号小程序模板源码
医院门诊预约挂号小程序模板源码
46 4
|
4月前
|
小程序
乐器培训课程报名小程序模板源码
乐器培训课程报名小程序模板源码
40 3
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
245 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
下一篇
无影云桌面