想要自定义一个模板在别的地方使用，引用太繁琐 - WXOPEN Club

现在我需要定义一个模板（例如nav），

通常要定义结构（nav.wxml）、样式（nav.wxss）、交互（nav.js），

为了代码整齐我将所有组件放到了根目录下template文件夹中

而在某个page（例如index）中想要用某个模板时，需要以下步骤：

1、在index.wxml里面引入<import src="…/…/template/nav/nav.wxml">，

2、在index.wxss里引入@import “…/…/template/nav/nav.wxss”，

3、在index.js里面引入import “…/…/template/nav/nav.js”，

为了使用一个模板，居然需要做3次引用，有没有什么简单的方式避免这么多的引用？

xiajun 1楼•5 年前

是的，按照您提供的思路，如果只引用<import src="…/…/template/nav/nav.wxml">的话，这个组件相关的样式和交互（wxss和js）就都需要写到该组件所在的页面中，假如我有10个页面都用到了这个组件，是不是得在这10个页面中把样式都写一遍呢？我希望把和组件相关的样式和js抽离出来，这样方便一些

lei01 2楼•5 年前

这样做确实可以，我脑中也瞬间闪现过这种做法，但立刻丢弃，因为这样一来，app.wxss将会成为大杂烩，所有组件的wxss都写在这里面，这样真的好吗？

yuxiuying 3楼•5 年前

假如有10个的话``````

还真的遇到过这种需求.

我的解决方案是: 把通用的wxss都写在根目录下的app.wxss中, 成为全局属性. 这样模板就只引用一次就行了.

qtian 4楼•5 年前

我觉得你误解了。<import src="…/…/template/nav/nav.wxml">你引用这个就可以。

其余的nav.wxss nav.js是nav.wxml用到的一些样式和js。你可以不引用进来。但是你得把nav.wxml这个模板需要的样式和js得写出来就行了。引用三个无非就是为了和当前页面区分出来。

yeping 5楼•4 年前

确实很繁琐, 如果可以类似.vue文件的模板写法就会省事很多.

不过话说回来, 这样可以更方便的组合, 比如同一个wxml 对应不同wxss.