微信小程序（9）：模板及引入

快来打我* 2023-01-04 13:22 136阅读 0赞

#### 1. 新建 template 文件夹，再右键点击 新建page ####

![在这里插入图片描述][20210110101848644.png]

#### 2. template.wxml 和 template.wxss 文件代码如下： ####

.header{ 
      height: 80rpx;
      background-color: #ccc;
      text-align: center;
      line-height: 80rpx;
    }
    
    .footer{ 
      height: 100rpx;
      background-color: pink;
      text-align: center;
      line-height: 100rpx;
    }

#### 3. 分别在index.wxml 和 index.wxss 文件中引入： ####

其中 footer 要写在最下面。

@import "/pages/template/template.wxss";

#### 4. 效果如下： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

#### 5. 还可以进行传值，如下示例 ####

template.wxml 文件：

index.wxml文件：

效果：  
![在这里插入图片描述][20210110105911195.png]

[20210110101848644.png]: /images/20221119/7ac47a8209284fd6b7bb280de12a1ed2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210110104348722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20210110105911195.png]: https://img-blog.csdnimg.cn/20210110105911195.png