使用微信云开发一个微信小程序（二）：使用云存储、搜索页面的开发

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

书接上文。我们继续开发：

大家可以先看看效果：

gitee.com/fongfiafia/…

云存储保存图片

上面我们讲到了图片背景组件使用的图片不能是本地文件，这里我们会使用云存储存放一张图片上去，然后使用。

• 点击左上角云开发--->存储
• 新建一个images文件夹

• 上传一个图片hug.jpg，然后点击hug.jpg弹出侧边栏，复制一下下载链接

• 把刚刚复制的链接填入hot.wxml文件中的背景组件url中，参考下图。这样就大功告成了！

搜索search页面

开发搜索页面

页面形式很简单，就是用户输入关键字，然后点击搜索，我们去数据库查找keyWord相似的然后返回给页面，页面会做一个弹框来显示。很明显我们会使用colorUI的form组件，复制过来就是这样。

表单的使用很简单，我们讲讲modal模组的使用，模组我们需要设置showSecondView这个参数为true或者false来实现模组的展示和隐藏。很明显我们的逻辑是当搜索返回结果的时候，就把搜索结果显示在模组上会，当删除模组按钮的时候，就隐藏该模组。

<!--pages/search/search.wxml-->
<view class="padding radius text-center light bg-white">
    
  <!--form 表单组件 -->
  <view class="box">  
    <view class="cu-bar bg-white search">
      <view class="search-form radius">
        <text class="cuIcon-search"></text>
        <input type="text" placeholder="搜索关键词" confirm-type="search" bindinput="searchInput"></input>
      </view>
      <view class="action">
        <button class="cu-btn bg-yellow shadow" bindtap="showModal" data-target="Modal">搜索</button>
      </view>
    </view>
  </view>
    
  <!--model 弹窗组件 -->
  <view class="cu-modal {{modalName=='Modal'?'show':''}}">
    <view class="cu-dialog">
      <view class="cu-bar bg-grey justify-end">
        <view class="content">{{keyWord1}}</view>
        <view class="action" bindtap="hideModal">
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="padding-xl">
        {{description1}}
      </view>
    </view>
  </view>
  
  <view class="action invisible">
    <button class="cu-btn bg-white" bindtap="addKey">
    </button>
  </view>
  
</view>

然后我们需要手动调整一下样式，也就是调整一下按钮的长宽大小，复制下面内容到search.wxss文件中

/* 设置按钮大小 */
.action{
  width: 20%;
  height: 10px
}

/* 设置模组显示隐藏属性 */
.header_view_hide{
  display: none;
}
 
/* 设置模组显示隐藏属性 */
.header_view_show{
  display: block;
}

这样，我们的页面就是这个样子