小程序实战：萌宠案例

项目资源：接口（好人分享的禁止商用）-萌宠大集合😘 | 咸虾米API接口库，要做的效果看下面

目的：走通小程序项目创建-上线的基本流程，通过这个项目可以增强对uni-app项目框架的了解，知道下拉刷新、触底加载更多和图片懒加载的实现方式

1.在hbuilder里面新建项目

2.在manifest.json里面选择微信小程序，填入AppID，上传代码时自动压缩可以勾一下

3.选择pages/index/index，点击运行，找到微信开发者工具

4.建立两个页面，其实没有必要分两个哈，这里主要是为了讲pages.json这个文件

选中pages文件夹，右击新建页面，一般选组合式和scss，页面名称填一下

通过这种方式新建，我们可以看到pages里面多了个文件夹，就是刚刚输入的页面名称，pages.json里面也自动帮我们注册了，这个需要一点时间，稍微等一下。用同样的方式新建文件cats，index我们用不到直接删掉

5.接着做下面的菜单栏，需要准备4个图标，每个图标都要有选中的和非选中的状态哈

图片资源统一放到static下面，命名用英文哈，中文容易出问题

在pages.json里面配置tabbar，刚刚自动生成的把navigationBarTitleText补充上，是导航栏中间显示的文字

6.用uni-app内置组件搭建页面骨架，新建components文件夹，右击新建组件，命名不建议用驼峰式容易出问题，建议用"-"连接，左下角的创建同名目录勾上，这样操作组件会默认引入，不需要自己去import

具体代码就先这样

复制代码

<template>
	<view v-for="item in list" class="list">
		<!-- widthFix让图片宽度固定，宽度比不变 -->
		<image :src="item.url" mode="widthFix"></image>
		<text>{{item.content}}</text>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
	} from 'vue'
	import {
		onShow,
	} from '@dcloudio/uni-app'

	const prop = defineProps(['type'])

	const list = ref([])

	async function getImg() {
		try {
			const res = await uni.request({
				url: 'https://tea.qingnian8.com/tools/petShow',
				method: 'GET',
				data: {
					size: 10,
					type: prop.type
				},
			})
			list.value = res.data.data
			uni.stopPullDownRefresh()
		} catch (err) {
			uni.showToast({
				title: '获取数据失败',
				icon: 'none', // 不显示图标
				duration: 2000 // 2 秒后自动消失
			})
			uni.stopPullDownRefresh()
		}
	}

	// 每次重新显示页面的时候都要触发，以获取最新资讯
	onShow(() => {
		getImg()
	})
</script>

<!-- 样式只限制对当前页面有效，不影响其他的，需要自己加上scoped -->
<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx 40rpx;
	}

	.list image {
		border-radius: 4rpx;
		margin: 0 auto;
		width: 100%;
	}
</style>

一些全局样式也可以写在这里，在app.vue里面引入

7.优化，给列表增加触底更新和下拉刷新的功能，图片要懒加载

复制代码

    <!-- 页面级滚动直接用lazy-load属性 -->
    <image :src="item.url" mode="widthFix" lazy-load></image>

    <!--触底是onReachBottom，下拉刷新是onPullDownRefresh-->
    import {
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const prop = defineProps(['type'])

	const list = ref([])

	onReachBottom(() => {
		console.log('触底啦')
		getImg('add')
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新')
		getImg()
	})


    <!--getImg函数要加参数opp，传入add需要在原本的内容后追加-->
    async function getImg(opp) {
		try {
			......
			list.value = opp === 'add' ? list.value.concat(res.data.data) : res.data.data
			uni.stopPullDownRefresh()
		} catch (err) {
			......
		}
	}

对了，下拉刷新默认是不开启的，需要加pages.json里面增加配置，可以全局增加，也可以在每个页面的style里面单独加

复制代码

    "globalStyle": {
		......
		"enablePullDownRefresh": true
	},

8.在页面里使用组件

9.发布（小程序对接口域名有限制，目前这个第三方接口不能直接在体验版和正式版中使用，需要先配置合法域名，否则发布后会访问失败）

在HBuilder平台选择发行，找到微信小程序
成功后在微信小程序开发者工具中点击上传
接着登录微信公众平台。
进入"管理 → 版本管理"。
在"开发版本"里找到刚上传的版本。
提交审核。
审核通过后点击"发布"。

声明：非原创哈，是在B站看到的教学视频