如何能够实现搜索然后根据搜索的特定内容跳转到指定图片
自学编程，想要通过搜索跳转到图片，但是无法实现，看了很多教程依然无法处理
首先这个是全局的样子
接下来是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代码
{
"component": true,
"usingComponents": {},
"navigationStyle": "custom"
}
接下来是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代码
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;
}
```page{
第一个文档代码结束，接下来是index2代码
index2.js代码
```javascript
Page({
data: {
value: "../img/pkq.png", //存放需要查询的内容
picList: [] //存放图片数据
},
//onLoad生命周期函数 options：跳转传递过来的value参数
onLoad: function (options){
if (options.value){
this.data.value = options.value; //数据不需要渲染页面就不必this.setData
}
wx.showLoading({
title: '加载中',
}),
//请求 后台 服务器发送请求获取数据
wx.request({
url: `../img/pkq.png`,//请求地址
success:(res)=>{ //请求成功的回调
this.setData({
picList: res.data.data
})
wx.hideLoading()
},
fail(){ //请求失败的回调
//uni.showToast弹窗
wx.showToast({
title: "当前网络不给力,请检查网络设置",
icon: "loading", //加载旋转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代码
<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='../img/jxj.jpg'></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;
}
运行结果如下：
只是想要达到搜索，然后显示库存当中的图片，发现好难啊，大家帮帮忙
作为一名专业的前端开发来帮你分析一下问题：
page1跳转page2的逻辑都没问题，只在在请求这里没有处理清楚
这里就涉及到一个问题了，这边前端开发工作已经完成了，只是后台这一块工作还没完成：
两种解决方案：
方案一：不需要后台交互，前端模拟数据，在index2目录下，建一个serve.json
onLoad: function (options){
if (options.value){
this.data.value = options.value; //数据不需要渲染页面就不必this.setData
}
wx.showLoading({
title: '加载中',
}),
//请求 后台 服务器发送请求获取数据
wx.request({
url: `./serve.json`,//请求地址改成你新建的这个文件路径
success:(res)=>{ //请求成功的回调
this.setData({
picList: res.data.data
})
wx.hideLoading()
},
fail(){ //请求失败的回调
//uni.showToast弹窗
wx.showToast({
title: "当前网络不给力,请检查网络设置",
icon: "loading", //加载旋转icon 可填：loading
duration: 3000, //弹窗显示时间
});
},
complete() { //请求无论成功与失败都会执行的回调
}
})
},
//点
serve.json里面的内容按你需求来定， 作为一个模拟的后台返回数据，你请求后得到的就是这个结果
{
"code": 200,
"data": "https://img-mid.csdnimg.cn/release/static/image/mid/ask/317092031456182.png?%ra=link"
}
方案二：你想写后台，但是又不知道怎么写后台；
找一个模拟后台返回接口的网站，把你需要后台返回的结果，填写进去，访问那个接口
也可以实现，前后台联动的效果，看看你希望采取哪个方案
方案三：老老实实建数据库，写后台接口
请求后台的数据有返回吗？
大哥， 你这不是请求后台，你这是请求图片，肯定一直报错啊
//请求 后台 服务器发送请求获取数据
wx.request({
url: `../img/pkq.png`,//请求地址，得写真正后台数据，而且得是https开头的，而且还要添加微信小程序信任的网址
success:(res)=>{ //请求成功的回调
this.setData({
picList: res.data.data
})
wx.hideLoading()
},
fail(){ //请求失败的回调
//uni.showToast弹窗
wx.showToast({
title: "当前网络不给力,请检查网络设置",
icon: "loading", //加载旋转icon 可填：loading
duration: 3000, //弹窗显示时间
});
},
complete() { //请求无论成功与失败都会执行的回调
}
})
},
解决方法
拆分下步骤测试两步是否都正常
1、明确下接口返回数据是否正常，是否包含图片数据
2、直接给界面图片数据查看是否能正常显示。
如有问题及时沟通
你需要一步一步的测试通过，因为这是一个涉及前后端的具有应用，所以需要全面进行调试开发。
- 首先要保证搜索信息的接收处理是正常的，这需要后端配合
1.1 后端接口是正确的，能保证对前端请求有正确的返回
1.2 前端请求处理是正确的，这包括接收用户输入的处理、把用户输入信息包装为符合要求的后端请求、进行后端请求、接收到后端请求返回等4个子方向 - 对后端返回信息的进一步处理，显示结果的过程，这一步也可以细分
2.1 后端请求返回表示没有搜索到的处理
2.2 后端请求正确返回信息处理，这里又包括 从返回信息中提取到图片URL信息，再请求该URL来显示图片的具体过程
总之，这个应用是相对比较全面的考察对前后端知识掌握情况的，从现在的代码来看，看不见对后端处理联调的细节部分，需要关注这些内容，逐步实现。
把这个url改成服务器的，并不是图片路径
可能需要给你讲一下整体的开发流程：
1、你现在所做的这部分属于前端开发；
2、你使用wx.request内url是服务端（后端）开发提供的http(s)形式的url接口；
3、看起来你要自己做后端服务支持，可以使用node开发或者小程序云开发；
首先先排查请求后台数据的路径和方式是否正确，然后查看是否又数据返回，有返回就拿获取到的搜索数据渲染在页面上，接下来再进行跳转实现，获取当前点击的搜索结果的id或者其他唯一标识，然后携带当前的id跳转到展示图片的那个页面，再通过这个id传参请求后端数据，获取到对应的图片的路径，然后再渲染在页面上，大概思路就是这样子
现在我上传图片到了云开发控制台
得到几个参数
1：存储位置 /问题.png
2：下载地址 https://636c-cloud1-3gltpxoi7ba47e9b-1312216208.tcb.qcloud.la/%E9%97%AE%E9%A2%98.png?sign=7df1304b3786622e86720684afe27299&t=1654138851
3:File ID cloud://cloud1-3gltpxoi7ba47e9b.636c-cloud1-3gltpxoi7ba47e9b-1312216208/问题.png
请问我要如何实现通过搜索的词条让这张图片能显示出来？
最好是能带实际操作的讲解，人比较笨，直接讲理论我可能看不明白
首先你的代码有问题，图片对应的url你要换成后台获取图片路径的接口，拿到数据后你直接赋值到img标签的src属性即可（你可以先用网上实际存在的图片，然后把路径换成这个简单测试下）
基础版: 图片存储到本地, 然后用关键词命名, 并在本地用map缓存一份, 查询逻辑: 先判断本地map有没有这个关键词, 有的话直接返回对应图片, 没有报错;
进阶版: 使用es存储, 存入图片的多个关键词和图片地址; 查询逻辑: 直接es模糊查询, 有返回图片, 没有报错;
//请求 后台 服务器发送请求获取数据
wx.request({
url: `http://127.0.0.1/api/?keyword=搜索的关键字`,//请求地址
success:(res)=>{ //请求成功的回调
this.setData({
picList: res.data.data
})
wx.hideLoading()
},
fail(){ //请求失败的回调
//uni.showToast弹窗
wx.showToast({
title: "当前网络不给力,请检查网络设置",
icon: "loading", //加载旋转icon 可填：loading
duration: 3000, //弹窗显示时间
});
},
complete() { //请求无论成功与失败都会执行的回调
}
})
然后 这个后端地址http://127.0.0.1/api/?keyword=搜索的关键字要能正常访问，最后这个后端地址返回下面格式的结果：
{
"code": 200,
"data":"图片URL",
}