一点小小的声明：学习笔记，若有不妥之处还望指正，Thanks♪(･ω･)ﾉ
参考视频微信小程序实例——从入门到精通
效果展示：
步骤：
首先需要建立一个存放图片的文件夹images，该文件夹放置在最外层。将此图放入文件夹。后续需要使用的图片也都可以放入此文件夹中。
当然也可以去阿里巴巴矢量图标库找寻并下载你所需要的图标哦~
接下来在需要添加顶部搜索框的页面文件夹中添加如下代码：
wxml代码：
<!-- 顶部搜索框实现 --><view id="searchOuterView"><view id="searchInnerView"><image src="/images/search.png"></image><text> 搜索</text></view></view>
wxss代码：
/* 顶部搜索框样式 */#searchOuterView{/* 设置内边距 */padding: 15rpx;}#searchInnerView{/* 内容居中 */text-align: center;/* 设置宽高 */width: 720rpx;height: 58rpx;/* 设置背景颜色 */background: #f5f5f5;/* 设置边框 */border:2rpx solid #ECECEE;/* 设置边框圆角 */border-radius: 8rpx;/*设置行高*/line-height: 52rpx;/* 设置边框包含在宽高之内 */box-sizing: border-box;}#searchInnerView > image{/* 搜索图片宽高 */width: 32rpx;height: 32rpx;/* 设置垂直对齐 */vertical-align: middle;}#searchInnerView > text{/* 搜索文字大小颜色 */font-size:24rpx ;color: #B2B2B2;}
编写好以后就完成了一个顶部搜索框啦~
