大亨的学习日记-微信小程序（第四天）

学习目标：

完成 首页 的设计

• 总目标：一周做完电商小程序并且写成毕业设计

---

学习内容：

1、 完成了搜索框

• 引入组件

引入组件三步走
1 创建组件
2 demo/json里声明组件
"usingComponents": { "SearchInput":"../../components/SearchInput/SearchInput" }
3 当做标签引入组件

• 搜索框组件添加跳转

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

• 编辑搜索框组件样式

.search_input{
  height: 90rpx;
  padding: 10rpx;
  background-color:var(--themeColor);

}  
.search_nav{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 15rpx;
    color: #666;
  }

效果图如下

---

学习时间：

1、 下午 1 点—下午 3 点
2、 晚上 8 点—晚上10点

---

学习产出：

CSDN 技术博客 1 篇