第7课 微信小程序实现图片搜索器案例：

第7课 微信小程序实现图片搜索器案例：

效果图如下：

手机运行效果：

来我们来看看代码的全局样式：

首先在app.json内的pages把需要的index1、index2页面注册
之后我们只需写index1、index2两个页面 即可实现图片搜索小案例

首先我们来看以下index1页面内的代码：

index1.js代码：

// pages/index1/index1.js
Page({
  data: {
    // value: ""
  },
  search(){
    //wx.navigateTo跳转页面方法
    if (this.data.value){
      wx.navigateTo({
        url: `/pages/index2/index2?value=${this.data.value}`,
      })
    }else{
      wx.showToast({
        title: "求输入需要查询的图片名称",
        icon: "none",		//加载旋转icon 可填：loading
        duration: 3000,	//弹窗显示时间
      });
    }
  },
  record(e){
    this.data.value = e.detail.value
  }
})

index1.json代码：

“navigationStyle”: “custom” //页面标题头部隐藏
切记json代码内不能写注解不然报错

{
  "component": true,
  "usingComponents": {},
  "navigationStyle": "custom"
}

index1.wxml代码：

<!-- index1.html 内搜索输入 -->
<view class="title">图片搜索</view>
<view class='sous'>
  <view class="btn" bindtap='search'>搜索</view>
  <!-- bindinput:键盘输入时触发  bindconfirm:按下键盘完成按钮时触发 -->
  <input class='input' bindinput="record" bindconfirm="search"></input>
</view>

index1.wxss代码：

page{
  background: linear-gradient(to bottom right,#f829ff, #09cff7)
}
.title{
  margin-top: 30vh;
  padding-bottom: 20px; 
  color: #fff;
  font-size: 40px;
  text-align: center;
}
.sous{
  width: 80vw;
  height: 30px;
  margin: auto;
  border-radius: 15px; 
  border: 1px solid #fff;
}
.btn{
  float: right;
  width: 20vw;
  height: 30px;
  line-height: 30px;
  border-left: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  box-sizing: border-box;
}
.input{
  width: 60vw;
  height: 30px;
  padding-left: 1rem; 
  color: #fff;
  box-sizing: border-box;
}

我们来看以下index2的代码：

index2.js代码：

// pages/index2/index2.js
Page({
  data: {
    value: "",  //存放需要查询的内容
    picList: [] //存放图片数据
  },
  //onLoad生命周期函数 options：跳转传递过来的value参数
  onLoad: function (options){
    if (options.value){
      this.data.value = options.value;  //数据不需要渲染页面就不必this.setData
    }
    wx.showLoading({
      title: '加载中',
    }),
    //请求 后台 服务器发送请求获取数据
    wx.request({
      url: `https://image.baidu.com/search/acjson?tn=resultjson_com&ipn=rj&word=${this.data.value}&pn=90&rn=10`,//请求地址
      success:(res)=>{  //请求成功的回调
        this.setData({
          picList: res.data.data
        })
        wx.hideLoading()
      },
      fail(){  //请求失败的回调
        //uni.showToast弹窗
        wx.showToast({
          title: "当前网络不给力,请检查网络设置",
          icon: "none",		//加载旋转icon 可填：loading
          duration: 3000,	//弹窗显示时间
        });
      },
      complete() { //请求无论成功与失败都会执行的回调

      }
    })
  },
  //点击图片预览
  preview(e){
    //图片浏览方法
    wx.previewImage({
      urls: this.data.picList.map(i=>i.middleURL),
      current: e.target.dataset.src
    })
  },
  //点击按钮下载图片
  download(e){
    let url = e.currentTarget.dataset.src
    //将图片下载
    wx.downloadFile({
      url: url,
      success(res) {
        //将图片保存到图库
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
        })
      }
    })
  }
})

index2.json代码：

{
  "navigationBarTitleText": "图片",
  "usingComponents": {},
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true
}

index2.wxml代码：

<!-- pages/index2/index2.wxml -->
<view class='list-item' wx:for="{{picList}}">
  <view>
    <!-- bindtap设置点击事件 lazy-load='true'开启懒加载 data-src设置data的src属性 -->
    <image bindtap='preview' mode="widthFix" src="{{item.middleURL}}" 
    lazy-load='true' data-src="{{item.middleURL}}"></image>
    <view class='download' data-src="{{item.middleURL}}" bindtap='download'>
      <image src='/sourse/icon/xz.png'></image>
    </view>
  </view>
</view>

index2.wxss代码：

/* pages/index2/index2.wxss */
.list-item{
  position: relative;
}
image{
  width: 100vw;
}
.download{
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 100rpx;
  height:100rpx;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 5px 0 #777;
}
.download>image{
  width: 80rpx;
  height:80rpx;
  margin: 10rpx;
}

把以上代码都复制到index1与index2两个页面即可实现效果图效果的搜索案例！

简单教你学微信小程序！

有疑问可以评论留言哦，作者将第一时间解答！