uni-app--》打造个性化壁纸预览应用平台（四）完结篇

🏙️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名前端工程师

🌄个人主页：亦世凡华、

🌆系列专栏：uni-app

🌇座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，对于想从移动端开发方向进一步发展的朋友，希望看到我文章的朋友能对你有所帮助。

今天开始使用vue3+uni-app搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的github上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。

如果是第一次接触uni-app并且想学习uni-app的朋友，我是不建议直接从此次实战项目开始看起，可以先阅读一下我以前的基础文章：什么是uniapp？如何开发uniapp？按部就班的学习可以让学习变得更轻松更容易上手哦，闲话少说我们直接开始今天的uni-app实战篇。

🏔️分享页面开发

🌋个人页面开发

🗻搜索页面开发

🏖️项目打包上线

🏕️项目上传仓库

🏔️分享页面开发

uni官网给我们提供了分享内容的API函数，如下所示：

这里我们导入该API函数之后可以简单的使用一下，如下所示我们可以自定义分享标题以及分享页的路径内容，如下所示：

import { onShareAppMessage } from "@dcloudio/uni-app"// 分享给好友
onShareAppMessage((e) => {return {title: "看我分享的图片！",path: "/pages/classify/classify"}
})

呈现的效果如下所示：

当然这里也有可以分享到朋友圈的API函数，如下所示：

import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"// 分享到朋友圈
onShareTimeline(() => {return {title: "朋友圈分享啦",imageUrl: "/static/logo.png"}
})

最终呈现的效果如下所示，当然我们没有做其他设置，默认跳转的朋友圈页面还是首页：

当然这里我们也可以把这个分享的函数写在分类页面，如下所示：

// 分享给好友
onShareAppMessage((e) => {return {title: "看我分享的图片" + pageName,path: "/pages/classlist/classlist?id=" + queryParams.classid + "&name=" + pageName}
})
// 分享到朋友圈
onShareTimeline(() => {return {title: "朋友圈分享啦" + pageName,query: "id=" + queryParams.classid + "&name=" + pageName}
})

呈现的效果如下所示，这里注意一下，如果想真正实现分享朋友圈功能，需要在小程序后台平台中进行认证并缴纳30元才可以实现，不然即使你写了分享的代码也是没用效果的，这里仅仅就演示一下而已：

当然在预览界面如果想分享的话，仅仅是需要分享一张图片而已，这里我们需要在分享函数中传递一个标识type属性表明当前是预览界面进行分享，如下所示：

然后这里我们通过判断传递的参数中是否有type属性来调用一个传递单张图片的接口函数，如下：

然后返回按钮处，正常我们都是navigateBack而已，当我们分享之后，分享页面肯定不能使用，所以我们在失败的时候直接reLaunch，然后跳转到首页接口，如下所示：

// 点击返回按钮
const goBack = () => {uni.navigateBack({success: () => {uni.navigateBack()},fail: (err) => {uni.reLaunch({url: "/pages/index/index"})}})
}

呈现的效果如下所示：

🌋个人页面开发

接下来对个人页面中的静态数据进行修改，开始接入接口的数据，如下我们直接调用接口函数，获取到的数据赋值响应式ref当中：

// 获取用户信息
const  getUserInfo = async () => {let res = await apiUserInfo()userInfo.value = res.dataselectData.value[0].text = res.data.downloadSizeselectData.value[1].text = res.data.scoreSizeselectData.value[2].text = res.data.downloadSizeselectData.value[3].text = res.data.downloadSizeselectData.value[4].text = res.data.downloadSize
}onLoad((e) => {getUserInfo()
})

然后我们根据是否有数据来渲染页面和加载loading页面，如下所示：

呈现的效果如下所示：

然后接下来我们开始给我的下载和我的评分进行页面的设置，这里也是用到了分类列表界面，不过这里我们需要对两个按钮传递不同的参数，对于个人页面的渲染，这里我把按钮的渲染设置成ref中的一个数组数据，通过遍历的方式拿到对应的数据，这里我们只需要对其url参数进行设置即可：

传递完参数之后，我们来带分类列表接口，在onLoad函数下传递的参数数据进行判断，如果我们传递参数存在的话就将其赋值到我们定义的对象当中：

赋值完成之后，我们来带获取分类列表接口的数据的函数当中进行判断，如果我们传递的参数中存在type的话说明我们想查看历史分类列表界面，如下所示：

// 获取分类列表数据
const getClassList = async () => {let resif (queryParams.classid) res = await apiGetClassList(queryParams)if (queryParams.type) res = await apiGetHistoryList(queryParams)classList.value = [...classList.value, ...res.data]if (queryParams.pageSize > res.data.length) noData.value = true // 最后的数据小于最初设置的大小uni.setStorageSync("storgClassList", classList.value)
}

最终呈现的效果如下所示：

🗻搜索页面开发

接下来开始对搜索页面进行开发，这里我们先新建一个搜索页面的组件，之前我们把搜索封装成了一个组件，这里我们来到该组件设置一下跳转链接，如下所示：

接下来来说对搜索组件search页面进行开发，这里我们用到了uni官网提供的一个输入框组件：

因为如果没用搜索历史记录的话，我们可以给其设置一个空状态，这里我们也使用一个插件，如下

然后接下来我们可以开始对搜索框设置点击事件，如下所示：

这里我们通过将搜索的结果缓存到本地方便后期查看，这里也设置了对应的函数，如下所示：

const historySearch = ref(uni.getStorageSync("historySearch") || []); //搜索历史词
const queryParams = ref({ //查询参数	 pageNum:1,pageSize:12,keyword:""
})//点击搜索
const onSearch = ()=>{historySearch.value = [...new Set([queryParams.value.keyword, ...historySearch.value])]uni.setStorageSync("historySearch", historySearch.value)
}
//点击清空搜索记录
const removeHistory = ()=>{uni.showModal({title:"是否清空历史搜索？",success:res=>{if(res.confirm){uni.removeStorageSync("historySearch")historySearch.value = []}}})
}
//点击标签进行搜索
const clickTab = (value)=>{queryParams.value.keyword = value
}

呈现的效果如下所示：

然后这里我们开始调用对应的接口函数当进行搜索的时候能够呈现对应的数据：

这里在对下拉触底和点击热门推荐的时候也能够加载对应的数据：

//点击标签进行搜索
const clickTab = (value)=>{initParams()queryParams.value.keyword = valuegetSearchData()
}
//点击清除按钮
const onClear = ()=>{initParams()
}
//触底加载更多
onReachBottom(()=>{if (noData.value) returnqueryParams.value.pageNum++getSearchData()
})

最终呈现的效果如下所示：