uni-app在线壁纸: 在线演示地址移动端H5：http://139.9.35.15:6090/。基于uniapp开发的在线壁纸，适配H5、微信和抖音小程序。界面简洁大方，操作方便。有丰富的壁纸资源，涵盖各种风格，定期更新，是装饰设备屏幕的好帮手。

<div align='center'>
    <img src="https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/icon.png" />
    <h1>
        壁纸小程序
    </h1>
	<i>
    	技术栈：uni-app、Vue3、JavaScript
    </i>
	<br/>
    <p>
        基于uniapp开发的壁纸小程序，适配H5、微信和抖音小程序。界面简洁大方，操作方便。有丰富的壁纸资源，涵盖各种风格，定期更新，是装饰设备屏幕的好帮手。
	</p>
	<strong>
    在线演示地址
    	<br />
    1、移动端H5：<a>http://139.9.35.15:6090/</a>
    	<br />
    2、小程序正在审核中，等待审核通过即可上线.......
    </strong>
    <br/>
    <br/>
</div>

### 移动端壁纸小程序 /H5

#### 界面设计理念

- **简洁美观**：界面设计注重视觉美感，采用渐变柔和的色调和流畅的布局，提升用户体验。
- **直观易用**：所有功能一目了然，用户可以快速上手，无需复杂操作。

#### 1. **首页**

- **推荐轮播图**：自动轮播和用户可以主动滑动查看不同壁纸、点击跳转到相应主题。
- **分类导航**：快速访问不同分类的图片，如“头像”、“影视”、“情侣”等。
- **公告轮播**：自动轮播公告，用户可以点击跳转到详细公告界面。
- **每日推荐**：每日更新推荐内容，右滑加载更多，点击图片放大预览。
- **专题精选**：展示部分专题，以及显示更新时间和模糊背景的标题，点击可击查看本专题具体内容，点击更多可跳转到专题分类页面中。

#### 2. **壁纸分类**

- **分类列表**：以网格或列表形式展示各个主题的壁纸，用户可以点击进入相应分类。
- **壁纸预览**：每个壁纸都有缩略图，用户可以直接预览。

#### 3. **壁纸详情页**

- **壁纸信息**：以抽屉的方式拉起窗口，展示当前图片的上传者、图片评分、标签等内容。
- **评论区**：展示用户头像、名称、发布评论时间以及点赞数量。
- **评分**：显示当前壁纸的评分，也可以为当前壁纸评分。
- **喜欢功能**： 把当前壁纸添加到喜欢列表中。
- **下载原图**：允许用户将壁纸原图保存到本地。
- **左右滑动**：用户可以左右滑动查看当前同类的壁纸。
- **壁纸索引**：显示当前所处专题共有多少壁纸，以及壁纸在同类中的索引位置。
- **隐藏功能界面**：点击壁纸可以将功能界面隐藏，再次点击让功能界面出现。

#### 4. **个人中心**

- **用户登入**：点击头像或者登入文字，拉取微信登入，授权后展示微信用户的头像和名称。
- **用户记录**：可以查看用户的收藏、喜欢、评论、历史记录等信息。

#### 5. **搜索功能**

- **搜索框**：用户可以输入壁纸的ID、名称、相关描述、标签等信息搜索壁纸。
- **热门搜搜**：展示当前热门的搜索关键词，帮助用户发现新壁纸。

- **搜索记录**：将搜索每次记录存储在用户本地，方便用户找回壁纸。
- **展示搜索信息**：动态展示搜索中、搜索完成、无搜索结果等提示，显示搜索到的数量，以及可以对搜索到的图片进行放大查看。
- **动态渲染**：触底加载图片，避免搜索结果数量多过造成卡顿等问题。

#### 6. **导航**

- **返回**：可点击图标返回上一页或者直接返回主页。
- **顶部刷新**：当用户下滑过一段距离时，出现返回顶部和刷新界面按钮。

#### 7. **其他**

- **分享打开**：当前页面依赖于其他页面的数据时，通过路由传参，得到依赖数据。可以让用户直接把当前页面网址分享给其他人，他人打开就能直接看到相同的界面。

- **图片懒加载**：优先加载用户当前看到和即将看到的图片，当触底或者触边界时候，再去再加更多图片，省流量提升性能。

- **展示搜索信息**：动态展示搜索中、搜索完成、无搜索结果等提示，显示搜索到的数量，以及可以对搜索到的图片进行放大查看。

预览图：

![image-20240925195928803](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925195928803.png)

![image-20240925200037397](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200037397.png)

![image-20240925200117588](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200117588.png)

![image-20240925200203233](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200203233.png)

![image-20240925200234888](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200234888.png)

![image-20240925200248871](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200248871.png)

![image-20240925200330393](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200330393.png)

![image-20240925200410215](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200410215.png)

![image-20240925200528434](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200528434.png)

![image-20240925200546406](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200546406.png)

![image-20240925200612739](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200612739.png)

![image-20240925200834445](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200834445.png)

![image-20240925200859429](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200859429.png)

![image-20240925200626376](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925200626376.png)

#### 8. 后端

1、技术栈： Django+MySQL+uWSGI+Nginx，使用CORS解决跨域。

2、源码：https://gitee.com/xuhaibo_game/djangoProject

3、后端接口和DjangoModel截图

接口

![image-20240925202946720](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925202946720.png)

模型

![image-20240925203141776](https://gitee.com/xuhaibo_game/img/raw/master/wallpaper/image-20240925203141776.png)

zhangqh22/uni-app在线壁纸

简介

发行版

贡献者

近期动态

zhangqh22/uni-app在线壁纸 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

zhangqh22/uni-app在线壁纸