template能力增强
发布于 7 年前 作者 guiying92 10846 次浏览 来自 问答

当前, 微信小程序中的template机制允许将一个页面片段抽取成一个独立的文件进行定义,达到重用的目的。

但template有个限制:  只能将展现模板抽取出来,模板不能有自己的js和wxss文件?

       具体体现在: 根据官方的文档和测试结果, 在template中的数据绑定只能使用传入的data, 事件绑定只能使用主页面(模板最终生存的页面)的方法, 样式只能使用主页面(模板最终生存的页面)。

      期望的结果: 模板拥有自己的js和wxss文件, 数据绑定可以使用自己js的data和传入的data, 事件绑定可以使用自己js中的方法, 样式可以使用自己的wxss文件中定义的class;

期望官方能提供类似需求的解决方案。

5 回复

模板样式可以用@import导入

[@import](/user/import)模板样式后,模板样式会干扰主页面的样式, 期望模板的样式只作用在模板中;

import模板的js后, 需要自己将模板js的方法添加到主页面的js中, 模板中事件绑定才能使用相应的方法;

期望的效果是: 模板不仅拥有自己的data使用域(当前在使用模板时传入的data属性), 同时样式和事件绑定也拥有自己的作用域(类似reactjs中的组件, 每个组件有自己的state和js方法,样式, 同时可以接收props)

可以定义模板单独的样式. js 只能在父级写了. 或者也做成工具包

@兔龙

模板样式定义后, 需要在主页面的WXSS文件使用[@import](/user/import)引入才行, 否则不起作用; 另外, 通过[@import](/user/import)引入模板的样式会, 会对主页面的样式定义有冲突(class名称污染).

想要的效果是

1.  不需要开发者使用[@import](/user/import)引入模板样式, 当主页面通过template引用模板时, 自动引入模板的样式文件; 

2.  模板的样式文件只作用于模板内的元素, 不会影响到主页面;

在import模板的页面对应的js中require模板js

回到顶部