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

我们知道前端有些时候有些html代码块是重复使用的，所以会使用一些方式方法封装一段html代码，以便在样式格式重复的地方引用模版。一下来介绍几种不同的开发环境使用到引用公共页面的方法。
一、php中引用公共模版如果不是vue项目，我们可以利用php的【include】方式在引用html模版，这个方式可以在任何html位置引用html文件，不过毕竟php是后端语言，前端没什么特殊情况一般不用写。不过这里还是介绍一下：
例如：

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

二、script承放html模版【4种不同环境中引用公共模版的方式方法——vue和微信小程序】除了以上这种方法之外，我们还可以用另外一种方式，使用< 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值，要一致。
例如：