官方文档:
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。
实例
功能
下面这个例子同时使用了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="content">隐私条款3</