ITPub博客

首页 > IT职业 > IT生活 > 小程序中使用template模版

小程序中使用template模版

IT生活 作者:田野 时间:2021-09-09 09:37:41 0 删除 编辑

github原文

小程序的template

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

创建template

1.template模版目录:

图片描述

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

2.template的公共方法:

图片描述

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

使用template

3.在page页中引入模版:

图片描述

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

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

图片描述

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

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

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

图片描述

6.点击按钮调用template模版

图片描述

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

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3522/viewspace-2805340/ ,如需转载,请注明出处,否则将追究法律责任。

上一篇: Config FCKeditor_2.6.4
请登录后发表评论 登录
全部评论

注册时间:2019-07-09

  • 博文量
    80
  • 访问量
    759