微信小程序——template模板和component组件实战

官方文档：

template模板：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html
component自定义组件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

template和component的区别

• template（DOM+样式）: 我理解的模板主要是wxml，定义代码片段，方便在不同的地方调用。附带有模板样式，需要在使用模板的地方import。
• component（DOM+样式+功能交互）: 是一个完整的功能组件。跟page类似，只是不代表一个页面，而是一个功能模块。

区别在于：

template模块与component组件，是小程序中组件化的方式。二者的区别是，template模块主要是展示，方法需要在使用template的页面中定义。而component组件，则拥有自己的js文件，整个component组件类似一个page页面。简单来说，只是展示用，建议使用template，组件中涉及到较多的逻辑，建议使用component。

摘自：https://www.jianshu.com/p/99c61f42122c

实例

功能

下面这个例子同时使用了template和component，实现一个页面弹出框的功能。

实现的功能是：点击按钮弹窗。弹窗的样式一样，功能也一样，但是内容不一样。

工程结构

这样的需求，实际上可以直接使用component中的slot实现弹框中的不同内容。但是，在实际项目中，协议往往几千字，并不利于管理。所以，把协议内容直接做成template。

template

template文件（可以在一个wxml中写多个template，但由于实际项目中内容太长，则分开两个文件便于管理）：

<!--policy.wxml-->
<template name="policy">
  <text class="header">隐私条款</text>
  <view>
    <text class="content">隐私条款1</text>
    <text class="content">隐私条款2</text>
    <text class