美文网首页
微信小程序中的templete

微信小程序中的templete

作者: DASH_1024 | 来源:发表于2019-10-27 11:48 被阅读0次

微信小程序开发中经常会根据业务需求封装一些组件,避免重复写一些代码,提高程序的可维护性。对于业务逻辑比较复杂的,我们可以采用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";

相关文章

网友评论

      本文标题:微信小程序中的templete

      本文链接:https://www.haomeiwen.com/subject/gnppvctx.html