当前, 微信小程序中的template机制允许将一个页面片段抽取成一个独立的文件进行定义,达到重用的目的。
但template有个限制: 只能将展现模板抽取出来,模板不能有自己的js和wxss文件?
具体体现在: 根据官方的文档和测试结果, 在template中的数据绑定只能使用传入的data, 事件绑定只能使用主页面(模板最终生存的页面)的方法, 样式只能使用主页面(模板最终生存的页面)。
期望的结果: 模板拥有自己的js和wxss文件, 数据绑定可以使用自己js的data和传入的data, 事件绑定可以使用自己js中的方法, 样式可以使用自己的wxss文件中定义的class;
期望官方能提供类似需求的解决方案。
@兔龙
模板样式定义后, 需要在主页面的WXSS文件使用@import引入才行, 否则不起作用; 另外, 通过@import引入模板的样式会, 会对主页面的样式定义有冲突(class名称污染).
想要的效果是:
1. 不需要开发者使用@import引入模板样式, 当主页面通过template引用模板时, 自动引入模板的样式文件;
2. 模板的样式文件只作用于模板内的元素, 不会影响到主页面;
可以定义模板单独的样式. js 只能在父级写了. 或者也做成工具包
@import模板样式后,模板样式会干扰主页面的样式, 期望模板的样式只作用在模板中;
import模板的js后, 需要自己将模板js的方法添加到主页面的js中, 模板中事件绑定才能使用相应的方法;
期望的效果是: 模板不仅拥有自己的data使用域(当前在使用模板时传入的data属性), 同时样式和事件绑定也拥有自己的作用域(类似reactjs中的组件, 每个组件有自己的state和js方法,样式, 同时可以接收props)
模板样式可以用@import导入
在import模板的页面对应的js中require模板js