template能力增强 - WXOPEN Club | 微信小程序专业社区

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

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

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

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

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

5 回复

ming121 楼6 年前

模板样式可以用@import导入

jie842 楼6 年前

@import模板样式后，模板样式会干扰主页面的样式，期望模板的样式只作用在模板中；

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

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

leijun3 楼6 年前

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

tao444 楼6 年前

@兔龙

模板样式定义后，需要在主页面的WXSS文件使用@import引入才行，否则不起作用；另外，通过@import引入模板的样式会，会对主页面的样式定义有冲突（class名称污染）.

想要的效果是：

1. 不需要开发者使用@import引入模板样式, 当主页面通过template引用模板时，自动引入模板的样式文件；

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

guiyingxiong5 楼6 年前

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