微信小程序中的templete

微信小程序开发中经常会根据业务需求封装一些组件,避免重复写一些代码,提高程序的可维护性。对于业务逻辑比较复杂的,我们可以采用Component。Component与Page类似,可以将一些组件内部的逻辑写在对应的js文件中。对于没什么业务逻辑,只是显示一下,我们可以采用模板templete。比如一些缺省页面、提示信息、弹窗等。

模板创建

一般建议将模板文件放入templete文件夹下,便于管理。在templete文件夹下新建wxml文件和wxss样式文件。对于多个模板的项目,每个模板新建一个文件夹,再在每个文件夹下创建所需的模板文件。
1.模板文件

<!--templates/toast/toast.wxml-->
<template name="toast">
  <view>
    <text class="toast-msg">提示信息</text>
  </view>
</template>

2.样式文件

 /* templates/toast/toast.wxss */
 .toast{
   width:50%;
   height:100rpx
 }

模板使用

1.在需要使用的位置引入toast.wxml,is填templete的name即可。

<import src="../template/toast/toast.wxml"/> 
<template is='toast' />

2.在对应的样式文件中导入模板的wxss文件

@import "../template/toast/toast.wxss";
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 什么是微信小程序 1. 小程序介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取...
    呆毛和二货阅读 876评论 0 1
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,479评论 0 9
  • 从今天开始每天记录一点东西,这里就是我的自留地,会记录各种无聊,有趣,隐秘,公开,深刻,浅显,政治不正确的各种东西...
    孬蛋不撸阅读 155评论 0 0
  • 在众多的社群里,你更倾向于帮助什么样的人? 帮助别人,大部分的时候我都是很乐意的。那些急切需要你帮助的人,而且又在...
    在身边在你身边阅读 101评论 0 1
  • Good morning dear students, today is Monday Wish you will...
    宝宝怡阅读 176评论 0 0