fullcalendar自定义搜索框_手把手教你从零写微信小程序（2）主页搜索框

如有侵权，联系即删！

--------------------

前言

写这篇小程序主要有三个目的，一从项目实战学习小程序，遇到问题查问题，建立起对小程序的兴趣，避免学习繁琐的知识降低学习热度；二将视频与文档优点结合，减少视频学习时间，丰富文档学习内容，为观看此公众号的学者提供一种新鲜的学习方式；三为了挣点零花钱。跟我一起来学微信小程序吧！

---------------------

1 今日项目简单介绍

使用组件完成一个主页的搜索框。其最终界面如下图。

---------------------

2 新建自定义组件

(1)知识铺垫

app.json的"pages"声明的每一个页面均包含四个文件。

1)json 页面配置文件

2)js 页面逻辑文件(必需)

3)wxml 页面结构文件(必需)

4)wxss 页面样式文件

完善四个文件的编辑，一个完整的页面也就成功运行了。

自定义组件：开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。 微信小程序

自定义组件主要解耦小程序，提高代码可读性。因为搜索框后续在多个页面使用，因此我们使用组件完成搜索框。

(2)新建组件Compoent

先建两个嵌套的文件夹，起个名字，然后右键--新建Componet，结构如下图。

(3)在需要用到组件的页面进行引用

自己建立的组件，在未引用前，页面是不认识的，所以首先要在需要的页面引用。例如我们需要在 /pages/index 页面引用，则要在index.json中声明，代码很简单如下。

(4)引用组件

在index.wxml做一个简单的测试。

当编译后页面出现如下图示，表示自定义组件完成。

---------------------

3 编写自定义组件的样式

自定义组件是一个搜索框，点击搜索框可以跳转，因此可以使用"navigator"组件承担主体。

navigator，主要的属性url, open-type 

    url:当前小程序内的跳转链接

     open-type:跳转方式,这里跳转方式也有几个重点，后续讲解

微信小程序

自定义组件的 SearchInput.wxml 代码。

同时设置搜索框的样式 SearchInput.wxss代码。

.search_input{  height: 70rpx; /*设置框高*/  padding: 10rpx;  background-color: #ff7043; /* 背景颜色*/}.search_input navigator{  height: 100%;  /*继承父标签的高度*/  display: flex;  /*伸缩盒子格式*/  align-items: center;  /*字体水平居中*/  justify-content: center;  /*字体垂直居中*/  background-color: white;  border-radius: 10rpx; /*边框圆角*/  color: #666; /*字体颜色*/}

效果如图。

但是现在还存在点击搜索没有反应的问题，因此更改SearchInput.wxml，但在这之前还需要建立一个页面，使得点击“搜索”时能够跳转过去。

修改SearchInput.wxml。

class=    <navigator url="/pages/search/index" open-type="navigate">      搜索    navigator></view>

效果如下。

4 结束语

至此我们的第二个任务就完成了，再好的程序员也是从一个敲击键盘的工作做起，所以不要眼高手低，敲起来。

后续工作持续更新！如需要源码，联系即可。