出于兴趣爱好，今天六月份开始学习H5和小程序开发，在此之前我一直都是从事iOS原生开发的，所以对于H5开发，也算是零基础开始。前期我花了两周时间进行基础知识的学习和简单的界面实践，学习内容主要是JS+CSS3。其中过程在这就不做讨论了。写这篇文章的原因是因为我在开始接收小程序开发工作后，由于项目中比较多的界面是需要弹窗显示的。而在开发过程中我发现代码里并没有一个公共的弹窗样式，只是那个界面用到就在那个界面写一个弹窗样式，这对于长期从事iOS开发的我来说是一种非常难受的事，因为对于iOS来说，我通常都会把经常需要重复使用的的东西放在指定的类里统一管理。对于项目里的弹窗和遮盖层更是如此。查看微信小程序开发文档，是可以自定义模板和组件实现的。本篇文章我只介绍使用模板自定义小程序弹窗，实现起来也比较简单。步骤如下：
1.新建弹窗文件：此处命名为hub（.wxml、.wxss、.js、.json）
在hub.wxml文件中进行弹窗UI布局，布局内容写在template标签里面
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
在hub.wxss中书写样式，这里跟正常布局是一样的。
2.弹窗模板的使用
（1）在需要弹窗的地方的wxml文件中引入弹窗模板，用import引入
<import src="../../template/hub.wxml"/>
<template data="{{item}}"></template>----》使用
（2）在对应需要弹窗的界面的wxss文件中引入弹窗的样式
@import "./template/hub.wxss";
(3)注意，如果弹窗的界面是需要做事件处理的，如页面跳转，按钮点击，这里只需要在模板绑定对应的事件，然后在需要弹窗的界面的js文件里实现对应的方法即可。
