豆瓣评分小程序Part-1

一、主要内容

搜索栏的实现（主页面是导航栏，点进去变成搜索栏）

导航栏图1：

:搜索栏图2：

二、实现

1、基本布局
首页是index，打出“我是首页”便于理解。windows中需要修改的语句已在图片中给出

2、建立searchbar组件
①和pages等文件夹并列建立components（组件）文件夹
②在components文件夹下添加searchbar（搜索栏）文件夹
③在searchbar文件夹内添加Component（生成四个文件）

3、配置index.json文件
主页面index想使用searchbar这个组件，必须在index.json配置文件中声明

4、显示searchbar组件
声明后，可以在index.wxml文件中去使用它了

5、给搜索栏进行布局

设置searchbar组件，在searchbar.wxml文件中一大盒子里套着导航小盒子
大盒子样式（searchBar）
导航小盒子（nav），通过点击小盒子可以导入search（搜索）页面

6、新建images文件夹
在上述组件中，我们在导航栏其中添加一个放大镜的背景图片，这里可以并列pages等文件新建images文件夹来存放图片

7、Base64转码
在css中设置背景图片时（以下url里内容方便理解，并非正确）

background-image:url("/images/放大镜.jpg/png等等等文件")

发现无法向wxml文件中插入图片一样使用这种路径，由于微信小程序为压缩空间，所以这里采用base64图片转换工具

（这里提供一款自用的base64图片在线转换工具网站）base64图片在线转换工具

8、设置searchbar组件样式
searchbar.wxss图1：

searchbar.wxss图2：

9、search问题
在我们点击主页面的导航栏后，发现跳转到search页面还是一样的场景，中间并不是输入框（前提：search.wxml中也使用searchbar组件）

10、增加searchbar属性
在searchbar.js文件中的properties（属性）对象中咱们新增isnavigator对象，类型：布尔类型，值：true（默认正确），方便后面导航栏还是搜索栏做选择

11、searchbar.wxml修改
由于上述问题，我们将该文件进行修改，增加其选择性
如果isNavigator（是导航栏），那么样式是nav，点击可导向search文件，否则就是输入栏

12、新增输入框样式
在searchbar.wxss文件中新增searchBox和searchInput样式

13、search文件声明
由于search文件采用searchbar组件的第二个导航选项，而searchbar.js中默认的是true（会选择第一个导航选项），所以这里增加条件，让search.wxml文件中引用时加入

<searchbar isNavigator="{{false}}"></searchbar>

三、效果图

1、首页面

2、搜索页面

四、结尾

有任何问题的话，欢迎各位指出~ ヾ(◍°∇°◍)ﾉﾞ