全局公共模板

用户可以将各个页面中相同部分抽离成公共模块,通过全局公共模板的方式将这些模块进行统一维护和套用生成,以便于在各个页面中复用起来,也有助于代码维护。

举例

用户使用 Min 的 init 指令初始化一个 Min小程序项目 ,项目里默认使用了 全局公共模板。通过小程序开发者工具里预览项目,我们可以在图示上看到标识着 头部模板底部模板 的两个公共模块,所有的页面都会直接套用它,而中间这部分才是页面真正的内容。

首页

此时,如果你新建一个页面,将会发现新的页面也已经直接套用公共模板。(这里假设新建一个about页面举例)关于

如何使用

在 app.wxa 小程序配置项文件,template 标签里的内容定义为全局公共模板,用于生成页面套用的模板,而模板内的 <page></page> 标签就是页面内容占位符。模板内容可以是任意的原生或自定义组件,自定义组件支持引用外部NPM包。

app.wxa 文件结构

  1. <template>
  2. <!-- 公共模板 - start -->
  3. <view>
  4. <layout-head></layout-head>
  5. <!-- page页面占位符 -->
  6. <page></page>
  7. <layout-foot></layout-foot>
  8. </view>
  9. <!-- 公共模板 - end -->
  10. </template>
  11. <script>
  12. export default {
  13. config: {
  14. // 公共组件
  15. usingComponents: {
  16. 'layout-head': 'layout/head',
  17. 'layout-foot': 'layout/foot'
  18. },
  19. ...
  20. },
  21. onLaunch () { },
  22. onShow () { },
  23. onHide () { }
  24. }
  25. </script>
  26. <style> ... </style>

page.wxp 页面文件

  1. <template>
  2. <wxc-toast></wxc-toast>
  3. </template>
  4. <script>
  5. export default {
  6. config: {
  7. usingComponents: {
  8. 'wxc-toast': '@minui/wxc-toast'
  9. },
  10. ...
  11. }
  12. }
  13. </script>
  14. <style></style>

经 Min 的 dev 指令编译后,page.wxp 文件将会生成4个原生小程序文件(.js、.wxml、.wxss、.json),而其中的 page.wxml 结构文件 是由 page.wxp 和 app.wxa 的 <template></template> 标签进行模板套用后生成的

  1. <view>
  2. <layout-head></layout-head>
  3. <wxc-toast></wxc-toast>
  4. <layout-foot></layout-foot>
  5. </view>

同时 page.json 配置文件 是由 page.wxp 与 app.wxa 的 <script></script> 标签中 config 对象的 usingComponents 字段合并生成的

  1. {
  2. "usingComponents": {
  3. "layout-head": "./you/path/layout/head",
  4. "layout-foot": "./you/path/layout/foot",
  5. "wxc-toast": "./you/path@minui/wxc-toast"
  6. }
  7. }