微信小程序引入公共页面

1、不带参数

首先在pages文件夹中新建一个trl文件夹，文件夹中新建一个tpl.wxml文件，代码如下
tpl.wxml:

<template name="loading">
  <view class="col" style="background:rgba(0, 0, 0, 0.4);width:100%;height:100%; position:fixed;left:0;right:0;top:0;bottom:0;z-index:10000;display:flex;justify-content: center;align-items: center;">
    <view>
    <view id='loading_svg'>
      <text style="animation:shuck1 0.75s infinite;transform: translate(34px,6px);"></text>
      <text style="animation:shuck2 0.75s infinite;transform: translate(54px,14px);"></text>
      <text style="animation:shuck3 0.75s infinite;transform: translate(62px,34px);"></text>
      <text style="animation:shuck4 0.75s infinite;transform: translate(54px,54px);"></text>
      <text style="animation:shuck5 0.75s infinite;transform: translate(34px,62px);"></text>
      <text style="animation:shuck6 0.75s infinite;transform: translate(14px,54px);"></text>
      <text style="animation:shuck7 0.75s infinite;transform: translate(6px,34px);"></text>
      <text style="animation:shuck8 0.75s infinite;transform: translate(14px,14px);"></text>
    </view>
    <text id='loading_txt'>加载中,请稍后...</text>
  </view>
  </view>
</template>

tpl.wxss:

@keyframes shuck1 {
  0% {opacity: .85;}
  12.5% {opacity: .7;}
  25% {opacity: .4;}
  37.5% {opacity: .3;}
  50% {opacity: .3;}
  62.5% {opacity: .3;}
  75% {opacity: 1;}
  87.5% {opacity: .9;}
  100% {opacity: .85;}
}
@keyframes shuck2 {
  0% {opacity: 0.9;}
  12.5% {opacity: 0.85;}
  25% {opacity: 0.7;}
  37.5% {opacity: 0.4;}
  50% {opacity: 0.3;}
  62.5% {opacity: 0.3;}
  75% {opacity: 0.3;}
  87.5% {opacity: 1;}
  100% {opacity: .9;}
}
@keyframes shuck3 {
  0% {opacity: 1;}
  12.5% {opacity: 0.9;}
  25% {opacity: 0.85;}
  37.5% {opacity: 0.7;}
  50% {opacity: 0.4;}
  62.5% {opacity: 0.3;}
  75% {opacity: 0.3;}
  87.5% {opacity: 0.3;}
  100% {opacity: 1;}
}
@keyframes shuck4 {
  0% {opacity: 0.3;}
  12.5% {opacity: 1;}
  25% {opacity: 0.9;}
  37.5% {opacity: 0.85;}
  50% {opacity: 0.7;}
  62.5% {opacity: 0.4;}
  75% {opacity: 0.3;}
  87.5% {opacity: 0.3;}
  100% {opacity: 0.3;}
}
@keyframes shuck5 {
  0% {opacity: 0.3;}
  12.5% {opacity: 0.3;}
  25% {opacity: 1;}
  37.5% {opacity: 0.9;}
  50% {opacity: 0.85;}
  62.5% {opacity: 0.7;}
  75% {opacity: 0.4;}
  87.5% {opacity: 0.3;}
  100% {opacity: 0.3;}
}
@keyframes shuck6 {
  0% {opacity: 0.3;}
  12.5% {opacity: 0.3;}
  25% {opacity: 0.3;}
  37.5% {opacity: 1;}
  50% {opacity: 0.9;}
  62.5% {opacity: 0.85;}
  75% {opacity: 0.7;}
  87.5% {opacity: 0.4;}
  100% {opacity: 0.3;}
}
@keyframes shuck7 {
  0% {opacity: 0.4;}
  12.5% {opacity: 0.3;}
  25% {opacity: 0.3;}
  37.5% {opacity: 0.3;}
  50% {opacity: 1;}
  62.5% {opacity: 0.9;}
  75% {opacity: 0.85;}
  87.5% {opacity: 0.7;}
  100% {opacity: 0.4;}
}
@keyframes shuck8 {
  0% {opacity: 0.7;}
  12.5% {opacity: 0.4;}
  25% {opacity: 0.3;}
  37.5% {opacity: 0.3;}
  50% {opacity: 0.3;}
  62.5% {opacity: 1;}
  75% {opacity: 0.9;}
  87.5% {opacity: 0.85;}
  100% {opacity: 0.7;}
}
#loading_mask {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading_box {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#loading_svg {
  width: 80px;
  height: 80px;
  position: relative;
  margin:0 auto;
}
#loading_svg text{
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 50%;
  display: block;
  position: absolute;
}
#loading_txt{
  max-width: 130px;
  font-size: 30rpx;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
}

然后在需要的页面调用tpl.wxml页面

<import src ="tpl.wxml路径"/>
<view>
	<template is="loading"/>
</view>

调用tpl.wxss

@import 'tpl.wxss路径';

注意：

（1）index.wxml中tpl标签的is属性与tpl.wxml中tpl标签的name属性值相同

（2）index.wxml文件中要通过import标签声明需要使用的模板文件

2、携带参数

tpl.wxml:

<template name="header">
  <view class="title">
    <text>{{title.title}}</text>
  </view>
</template>

接下来在需要的wxml文件引入

<import src="../tpl/tpl.wxml" />
<template is="header" data="{{title}}" />
Page({
  data: {
    title: {
      title: '动态'
    },
    bannerList:[],
    dynamicsList:[],
    page:1,
  },
})