完成首页页面

首页页面，使用说明，一个搜索框，三个快捷按钮。当用户点击快捷按钮，或者搜索时，展示文章列表。

技术要点：

• 搜索框、按钮、列表、文本
• 界面交互
• 网络请求、数据存储

在微信开发者工具，app.json 文件中配置首页，配置后会自动生成首页模板页面。

"pages": [
    "pages/index/index"
  ],

在 pages/index/index.wxml 文件中，编写首页内容。包含标题，描述，搜索框，以及快捷按钮。

<view class="page">
  <view class="page__hd">
    <view class="page__title">使用说明</view>
    <view class="page__desc">收集了很多经典的代码片段和库，是学习编程的好工具。可通过关键字查找内容，用于解决开发中遇到的问题。</view>
  </view>
  <view class="page__bd page__bd_spacing">
    <!-- 搜索框-->
    <view class="weui-search-bar {{inputShowed ? 'weui-search-bar_focusing' : ''}}" id="searchBar">
      <form class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="text" confirm-type="search" class="weui-search-bar__input" placeholder="请输入您要查找的内容" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindconfirm="search" />
        </view>
        <label class="weui-search-bar__label" bindtap="showInput">
          <i class="weui-icon-search"></i>
          <span class="weui-search-bar__text">搜索</span>
        </label>
      </form>
      <view class="weui-search-bar__cancel-btn" bindtap="hideInput">取消</view>
    </view>

    <!-- 查询快捷按钮-->
    <view class="weui-flex">
      <view class="weui-flex__item">
        <view class="placeholder" id="btnHot" bindtap="bindBtn" hover-class="placeholder-hover">最火</view>
      </view>
      <view class="weui-flex__item">
        <view class="placeholder" id="btnNew" bindtap="bindBtn" hover-class="placeholder-hover">最新</view>
      </view>
      <view class="weui-flex__item">
        <view class="placeholder" id="btnCold" bindtap="bindBtn" hover-class="placeholder-hover">最冷</view>
      </view>
    </view>
    <!-- 内容-->
  </view>
</view>

当我们使用模拟器预览时，发现首页内容是正确的，但是样式非常丑，我们现在使用 WeUI 来美化一下。

从 Github 搜索 weui-wxss，下载后，将 weui.xss 中的内容复制到项目中的 app.wxss 中。复制后，这个 weui 样式就在整个项目中生效。如果要某个页面单独调整样式，可以在页面中 wxss 中单独修改样式。

例如，我后面的章节中会添加的广告，就是单独在这个页面设置的样式。

下一节，讲首页数据交互。