Travel uni-app 项目说明

最新推荐文章于 2026-06-23 18:12:53 发布

原创最新推荐文章于 2026-06-23 18:12:53 发布 · 1.1k 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#uni-app #javascript #typescript #node.js #es6

Github：https://github.com/Young-opener/Travel-uniapp.git

Travel uni-app 项目说明

1. 项目概览

跨端旅游类应用，覆盖小程序 / H5 / App。
基于 uni-app + Vue 3（兼容 Vue 2）。
提供景点浏览、详情推荐、收藏管理、用户中心、路线导航等功能。
适合作为旅游行业模板或 uni-app 实战案例。

2. 技术选型

框架：uni-app，统一开发多端应用。
前端框架：Vue 3 + Composition API，条件编译保留 Vue 2 入口。
UI：uview-plus 组件库 + easycom 自动导入。
样式：SCSS，组件内局部样式隔离。
网络：二次封装 uni.request，Promise 化返回值。
Mock：MockJS（api/mock.js），开发阶段模拟后端数据。

3. 构建入口

main.js 使用条件编译区分 Vue 2 / Vue 3：
- Vue 2：Vue 实例 + App.mpType。
- Vue 3：createSSRApp + app.use(uviewPlus)。
保证老项目兼容，同时支持最新 Composition API。

4. 页面路由

pages.json 配置启动页 pages/index/index。
TabBar：首页、喜欢、我的。
其他页面：detail（景点详情）、line（路线推荐）。
easycom 映射 uview-plus 组件前缀。

5. 首页（pages/index/index.vue）

组件组合：up-search、up-swiper、up-notice-bar、up-waterfall。
瀑布流：左右列 slot，自定义卡片内容。
懒加载：up-lazy-load，避免首屏图片压力。
触底加载：onReachBottom 中调用 addRandomData 模拟分页。
滚动监听：onPageScroll 控制返回顶部按钮。
详情跳转：JSON 序列化 + encodeURIComponent 保证安全。

6. 详情页（pages/detail/detail.vue）

自定义透明导航栏 + 大图背景。
景区介绍、开放时间、推荐项目卡片。
推荐部分点击跳转到 line 页面。
页面入口 onLoad 解码首页传来的景点信息。

7. 喜欢页（pages/like/like.vue）

双列瀑布卡片布局。
文案两行省略：-webkit-line-clamp + line-clamp。
页面加载时请求 likeList 模拟收藏数据。

8. 我的页（pages/my/my.vue）

顶部身份展示 + 功能快捷入口列表。
登录流程：
- uni.login 获取 code。
- 调用 login 接口换 token。
- 根据 token 拉取 getUserInfo。
- 信息与 token 写入本地缓存。
免登录逻辑：onLoad 读取本地缓存自动填充。
弹窗获取头像昵称：chooseAvatar、type="nickname"。

9. 路线页（pages/line/line.vue）

原生 map 组件显示定位与标记。
up-rate 星级评分。
up-scroll-list 横向推荐其他项目。
onLoad 根据 id 拉取 projectInfo。

10. 数据接口（api/api.js）

统一出口：getBanner、getHomeList、login、getUserInfo、detailProject、projectInfo、likeList。
所有接口均依赖封装的 http 方法。

11. 网络层（api/http.js）

环境区分：开发、生产共用 Apifox Mock 地址（可扩展本地接口）。
请求封装：Promise 包裹 uni.request。
Token 自动携带：header 中读取本地存储。
业务码处理：code == 1 成功返回，code == 0 Toast 错误。
异常兜底：请求失败统一提示“服务器请求异常”。

12. 模拟数据（api/mock.js）

引入 MockJS。
注册 /api/user/getBanner 等模拟接口。
便于前后端并行开发。

13. manifest.json 配置

app-plus：应用 splash、权限、模块配置。
各端 mp-*：微信、支付宝、百度、头条小程序配置。
vueVersion 指定为 3。
appid 仍为空，需上线前填入实际小程序 ID。

14. 性能优化点

图片懒加载减少首屏压力。
瀑布流左右列错列渲染提升可读性。
滚动阈值控制返回顶部按钮，减少 DOM 频繁操作。
二次封装请求避免重复创建实例。
Mock 数据仅开发可用，上线前可移除减少包体。

15. 代码规范与质量

Composition API 组织逻辑，搭配 <script setup> 简化代码。
Lint 警告修复：CSS 属性补全、移除未使用变量。
列表 v-for 推荐使用稳定主键（后续可调整）。
uni API 封装为独立函数，便于复用与测试。

16. 可扩展建议

根据实际后端替换 Mock 地址与接口参数。
引入 Pinia/Vuex 管理全局状态（如用户、收藏）。
构建环境中按需加载 Mock，避免生产警告。
调整 :key 为 item.id，减少渲染复用问题。
引入 CI/CD 打包脚本，实现一键发布。

17. 适用场景

旅游攻略类小程序 / App。
uni-app 与 Vue 3 结合的教学示例。
界面展示型产品（美食、资讯、社区）可快速二次开发。

18. 如何运行

推荐使用 HBuilderX 打开并运行至目标平台。
或使用 CLI：npm install -> npm run dev:%PLATFORM%（需自行补充脚本）。
微信小程序端需在开发者工具中编译预览。

19. 注意事项

appid 必须在上线前填入真实值。
MockJS 内部使用 eval，仅用于开发调试，不建议打包到生产。
小程序登录流程需配套真实后端接口。
地图组件在微信、H5 端表现不同，需针对性测试。

20. 总结

架构清晰：入口、路由、接口、组件划分合理。
体验良好：瀑布流、懒加载、地图、评分等细节完备。
工程化：网络层、Mock、条件编译提升维护与扩展能力。
适合作为旅游行业模板或 uni-app 技术实践展示。

21. 核心代码片段

首页逻辑（瀑布流 + 无限滚动）：

<script setup>
	import { getBanner, getHomeList } from '../../api/api.js'
	import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	
	const keyword = ref('')
	const bannerList = ref([])
	const flowList = ref([])
	const showTopBtn = ref(0)

	onLoad(() => {
		getBanner().then(res => {
			bannerList.value = res.bannerList
		})
		getHomeList().then(res => {
			flowList.value = res
		})
	})

	onReachBottom(() => {
		setTimeout(() => {
			addRandomData()
		}, 1000)
	})

	onPageScroll((e) => {
		showTopBtn.value = e.scrollTop > 600 ? 1 : 0
	})

	const goDetail = (item) => {
		const can = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/detail/detail?item=${encodeURIComponent(can)}`
		})
	}

	const Totop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}

	const addRandomData = () => {
		for (let i = 0; i < 10; i++) {
			let index = uni.$u.random(0, flowList.value.length - 1)
			let item = JSON.parse(JSON.stringify(flowList.value[index]))
			item.id = uni.$u.guid()
			flowList.value.push(item)
		}
	}
</script>

网络请求封装（自动携带 token + 统一异常）：

export default function http(url, data = {}, method = 'GET') {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + url,
			data,
			method,
			header: {
				'token': uni.getStorageSync('token') || ''
			},
			success: res => {
				if (res.statusCode == 200) {
					if (res.data.code == 1) {
						resolve(res.data.data)
					} else if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						reject(res.data.msg)
					}
				}
			},
			fail: () => {
				uni.showToast({
					title: '服务器请求异常',
					icon: 'none'
				})
			}
		})
	})
}

详情页参数解析与推荐列表：

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	import { detailProject } from '../../api/api.js'
	
	const details = reactive({
		dt: ''
	})
	
	const projectList = ref([])
	
	const goLine = (item) => {
		uni.navigateTo({
			url: `/pages/line/line?id=${item.id}`
		})
	}
	
	onLoad((opt) => {
		detailProject().then(res => {
			projectList.value = res
		})
		details.dt = JSON.parse(decodeURIComponent(opt.item))
	})
</script>