小程序template模板使用详解 |
您所在的位置:网站首页 › 微信小程序component的用法 › 小程序template模板使用详解 |
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。 本文同时参与 「掘力星计划」,赢取创作大礼包,挑战创作激励金 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。 前言你将收获 👉 小程序模板怎么用 👉 小程序模板数据和事件的处理 👉 小程序模板的一些注意事项及优化 模板的基本使用 创建模板文件在page里面创建一个template文件夹,可以利用小程序开发工具【新建Page】快速创建文件 注:调用模板的时候,起作用的只有wxml和wxss文件,模板中的JS文件是不起作用的。模板中的逻辑都要在调用的文件中处理。 创建文件可根据自己项目设计,并非固定如此 定义模板在内定义代码片段,使用 name 属性,作为模板的名字。 这是一个msg模板 使用模板在wxml中要使用模板,有两步 1)、声明,关键 import 标签 2)、使用,关键 is属性 这里is的名字和模板name命名的保持一致 模板的wxss如果模板有自己的wxss,如我们的template.wxss文件,则需要在调用模板的文件(如示例的index.wxss)导入,否则不会生效 /**index.wxss**/ @import "../template/template.wxss";归纳: wxss导入wxss中 wxml导入wxml中 js无效 模板的数据传递【调用的wxml】通过data给模板传值 item是在调用的js中定义好的 Page({ data: { item: { title: '模板', msg: 'this is a template', } } })在模板直接使用 {{title}}: {{msg}}如果有传递多个参数,则用逗号隔开 模版文件中的事件处理模板使用的是【调用模板的js文件】里的事件。 定义在自己的template.js并不会生效如果是模板公用的方法,在每个调用的文件都要把方法写一遍,会有很多重复的代码,我们可以如以下改进一下。 (虽然template模板不能直接使用自己的js,但是我们可以把方法统一写在template.js文件里,然后在使用模板的文件js里面引入一下。) 在任意js文件统一定义方法 const template = { handleTap() { console.log('template 模版 click') } } export default template;在需要使用的地方导入即可 // index.js import template from '../template/template'; Page({ handleTap:template.handleTap }) 关于js文件中的数据传递在template.js里可以直接拿到index.js文件的整个data 相同点 都是为了实现代码的复用 都不能单独呈现,必须依附显示在页面区别 template模板:轻量级,主要是展示,没有配置文件(.json)和业务逻辑文件(.js),所以template模板中的变量引用和业务逻辑事件都需要在【引用模板的页面js】文件中进行定义; Component组件:有自己的业务逻辑,由4个文件构成,与page类似,但是js文件和json文件与页面不同。 选择 如果只是展示,使用template就够了; 如果涉及到的业务逻辑交互比较多,最好使用component组件; import 的作用域import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。 C import B import A //C能用B,B能用A,但是C不能用A参考资料: 微信小程序template模板 🎨【点赞】【关注】不迷路,更多前端干货等你解锁 往期推荐 👉 小程序自定义组件Component超全实用指南 👉 小程序引入vant-Weapp保姆级教程及安装过程的问题解决 👉 最全的CSS阴影总结 👉 JavaScript干净编码的最佳实践 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |