为了账号安全,请及时绑定邮箱和手机立即绑定

小程序中使用template模版

github原文

小程序的template

template的方法对于一些重复的简单的模版比较适用。在之前的文章中大致讲解了小程序 小程序开发,现在这里专门讲解怎么调用template模版

创建template

1.template模版目录:

img1

对于template模版的存放目录,可以根据功能和项目而定。template模版的文件依然使用.wxml和.wxss扩展名, 其中js文件的作用是将template使用的公用方法抽离。其中name为模版的名称,其中的两个变量是调用template传入。

2.template的公共方法:

img2

使用 module.exports 暴露方法,便于其他page页面调用。后面将导入到page中,所以可以在这里可以直接使用 this。

使用template

3.在page页中引入模版:

im3

使用import引入模版,使用template调用,其中data中就是传入的参数。在template模版中中wxml文件使用的变量,在引入时的data中传入,此时的data既可以是数据,也可以是方法函数

4.在page中引入模版方法:

img4

小程序支持Es6/7的部分特性在之前说到过,可以使用import 引入方法,一定要将方法导入到Page中,否则是失效的。

别忘记在data中定义template需要的变量。

5.在page中引入模版样式:

img5

6.点击按钮调用template模版

img6

模版调用成功。这里只写出了调用的方法,记录下来,可以时刻回顾。

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消