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

官方文档：javascript

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

template和component的区别

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

区别在于：html

template模块与component组件，是小程序中组件化的方式。两者的区别是，template模块主要是展现，方法须要在使用template的页面中定义。而component组件，则拥有本身的js文件，整个component组件相似一个page页面。简单来讲，只是展现用，建议使用template，组件中涉及到较多的逻辑，建议使用component。java

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

实例

功能

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

实现的功能是：点击按钮弹窗。弹窗的样式同样，功能也同样，可是内容不同。小程序

工程结构

这样的需求，实际上能够直接使用component中的slot实现弹框中的不一样内容。可是，在实际项目中，协议每每几千字，并不利于管理。因此，把协议内容直接作成template。svg

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</text>
  </view>
</template>

<!--rules.wxml-->
<template name="rules">
  <text class="header">活动规则</text>
  <view>
    <text class="content">活动规则1</text>
    <text class="content">活动规则2</text>
  </view>
</template>

//overlayContent.scss .header{
  display: block;
  font-size: 40rpx;
  line-height: 1.4em;
  color: #ffffff;
  text-align: center;
}
.content{
  display: block;
  font-size: 24rpx;
  color: #ffffff;
  line-height: 1.2em;
  margin-top: 1em;
}

component

使用template：须要将template文件import进来，经过is指定template的名称，需对应template定义时的name。组件化

<!--overlay.wxml-->
<import src="../../template/overlayContent/policy.wxml" />
<import src="../../template/overlayContent/rules.wxml" />

<view class="overlay-component" hidden="{{!isShow}}">
  <template is="{{name}}" />
  <button class="close" bindtap="closeOverlay">x</button>
</view>

//overlay.scss
@import "../../template/overlayContent/overlayContent.scss";

.overlay-component{
  position: fixed;
  z-index: 1;
  background-color: #000;
  width: 100%;
  height: 100vh;
  padding: 15% 10%;
  box-sizing: border-box;
}
.close{
  position:fixed;
  right:3%;
  top:0;
  color:#ffffff;
  background-color:#000;
  border-radius:0;
  font-size:60rpx;
}

properties和data看上去都是属性，区别以下：

// overlay.js
Component({
  /** * Component properties */
  properties: {
    name:{
      type: String,
      value: 'policy'
    }
  },

  /** * Component initial data */
  data: {
    isShow: null,
  },

  /** * Component methods */
  methods: {
    closeOverlay:function(){
      this.setData({
        isShow: false
      })
    },
    showOverlay:function(){
      this.setData({
        isShow: true
      })
    }
  }
})

//overlay.json
{
  "component": true,
  "usingComponents": {}
}

index页

在index页面使用overlay组件以下：

<!--pages/index/index.wxml-->
<overlay id="policy" name="policy"/>
<overlay id="rules" name="rules"/>
<view>
  <button bindtap="showPolicy">查看隐私条款</button>
  <button bindtap="showRules">查看活动规则</button>
</view>

须要在json里配置使用组件：

//index.json
{
  "usingComponents":{
    "overlay":"../../component/overlay/overlay"
  }
}

// pages/index/index.js
Page({
  showPolicy:function(){
    this.selectComponent("#policy").showOverlay();
  },
  showRules:function(){
    this.selectComponent("#rules").showOverlay();
  }
})