争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

微信小程序:样式模板的使用

时间:2024/3/30作者:未知来源:争怎路由网人气:

微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。
在小程序的开发过程中,我们很可能会遇到多个页面部分布局代码相同的情况,界面与界面之间可能会有很多重复的样式,然而这些样式的代码,每次都要重新写就很麻烦了,而且也浪费资源,微信小程序像其他开发一样,也有样式模板的使用方式。我们今天要介绍的就是样式模板的使用方法(include和import)。

1.使用include的方式包含模板样式
例如:<include src="../templates/myText" /> 首先我们需要创建一个文件夹用来存放样式模板,我们以text组件模板为例:

微信小程序:样式模板的使用

然后我们在需要引用改模板的页面中使用<include src="../templates/header" />导入即可。我们可以看到显示结果如下图所示:

微信小程序:样式模板的使用

使用这种方式引用模板,实际上就是等同于把templates中的header的代码全部复制到include这里


2.使用import的方式引用模板

<!--模板样式的使用  底部样式-->
<import src="../templates/footer"  />
<template is="footer1" />

同样,我们在templates下创建一个footer.wxml,我们创建两个底部布局,其代码如下

<template name="footer1">
51小程序-底部布局1
</template>

<template name="footer2">
51小程序-底部布局2
</template>

微信小程序:样式模板的使用

我们在newvip.wxml页面中导入这两个底部样式的方法如下,(因为有两个样式,所以我们需要用template is来指定使用哪一个样式)

<!--模板样式的使用,底部样式-->
<import src="../templates/footer" />
<template is="footer1" />
<!--模板样式的使用,底部样式-->
<import src="../templates/footer" />
<template is="footer2" />

调试运行后的结果如下:

微信小程序:样式模板的使用

小结:
1.通过include调用,相当于把被调用文件里面的内容全部都复制进来。
2.import需要用is声明调用哪个样式,不是全部复制

本节注意:

1.<include />结尾处有/

2.<template is="footer2" />结尾也要有/

更多微信小程序:样式模板的使用相关文章请关注PHP中文网!


小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。



关键词:微信小程序:样式模板的运用




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版