个性化阅读
专注于IT技术分析

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"/>

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

赞(0)
未经允许不得转载:srcmini » 4种不同环境中引用公共模版的方式方法——vue和微信小程序

评论 抢沙发

评论前必须登录!