4种不同环境中引用公共模版的方式方法——vue和微信小程序

我们知道前端有些时候有些html代码块是重复使用的，所以会使用一些方式方法封装一段html代码，以便在样式格式重复的地方引用模版。一下来介绍几种不同的开发环境使用到引用公共页面的方法。

一、php中引用公共模版

如果不是vue项目，我们可以利用php的【include】方式在引用html模版，这个方式可以在任何html位置引用html文件，不过毕竟php是后端语言，前端没什么特殊情况一般不用写。不过这里还是介绍一下：

例如：

<?php include 'menu.html'; ?>

二、script承放html模版

除了以上这种方法之外，我们还可以用另外一种方式，使用<script></script>定义一段可以在网站任何地方引用的html代码块，方法就是把type属性改为“type=”text/html”，以说明是html类型的，要注意的是，必须要有一个id属性和值，用于引用该模版和查找到模版。也可以在一个.js文件写好html代码之后像引用js文件那样引入。

例如：

<script type="text/html" id="temp">
      <div class="item">
        <p>早上</p>
        <p>晚上</p>
      </div>
    </script>

三、在vue中定义组件

在vue项目中，我们就可以很简单的把重复使用的模版定义成一个组件，在需要使用的页面调用就可以了，方法也是比较单间，使用import关键字引入组件，在export default中定义组件， 在<template></template>中使用组件的标签名，就成功的引入一个vue组件。

例如：

<template>
<div id="app">
<Header />
</div>
</template>


<script>
import Header from './components/Header'

export default {
name: 'App',
components: {
Header
}
}
</script>

四、小程序中引用公共页面

在小程序中是如何引用公共页面的呢？比如一个底部导航文件，无论在哪个子页面都是一样的，这里就需要把它定义为一个模版页，我用到的方法是在根目录中新建一个【template】文件夹，在文件夹中新建一个.wxml文件，在这个文件中书写模版，例如：

<template name="footer" class='footerbar'>
<view class='footer'>
<navigator class='item active' url="" hover-class="navigator-hover">
<text class='text'>首页</text>
</navigator>
<navigator class='item' url="" hover-class="navigator-hover">
<text class='text'>我的</text>
</navigator>
</view>
</template>

建好模版之后就是引用了，在需要使用的地方使用import 标签和template 标签，需要注意的是template 中的属性is的值是模版中的name值，要一致。

例如：

<!-- 公共尾部 -->
<import src ="../template/footer.wxml"/>
<template is="footer"/>

以上是在不同环境中开发项目的各种引用公共页面的方式方法，可能还有更加好用的等着我去发现，或者你可以留言告诉我哦。