uniapp开发

1.前期准备

先在uniapp官网下载
HBuilderX 地址：HBuilderX-高效极客技巧 (dcloud.io)

然后打开官方文档准备查询 uni-app官网 (dcloud.net.cn)

新建一个空项目

2.数据传输

对于巴法云平台，在官方文档查看数据获取上传接口 链接：巴法开放平台 (bemfa.com)

2.1 数据上传

postData(){
				uni.request({
					url:"https://apis.bemfa.com/va/postJsonMsg",
					data:{
						"uid":"ebcd9196617182e29347c0cdad66bf57",
						"topic":"123",
						"type":3,
						"msg":this.title
					},
					method:"POST",
					success: (res) => {
						console.log(res);
					}
				})
			}

2.2 数据获取

getData() {
				uni.request({
					url: "https://apis.bemfa.com/va/getmsg",
					data: {
						"uid": "ebcd9196617182e29347c0cdad66bf57",
						"topic": "123",
						"type": 3,
						"num": 4
					},
					method: "GET",
					success: (res) => {
						console.log(res);
					}
				})
			}

3.底部导航栏设置

先创建两个新的vue组件，命名为books和user

首先将图片保存在静态资源文件夹（static），为了便于管理，新建images文件夹下放置图片，tabBar为底部导航栏图片

在pages.json文件下写代码：

"tabBar": {
		"color": "#bfbfbf",
		"selectedColor": "#2c2c2c",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				"text": "书架",
				"iconPath": "static/images/tabBar/index0.png",
				"selectedIconPath": "static/images/tabBar/index1.png"
			},
			{
				"pagePath": "pages/books/books",
				"text": "书城",
				"iconPath": "static/images/tabBar/books0.png",
				"selectedIconPath": "static/images/tabBar/books1.png"
			},
			{
				"pagePath": "pages/user/user",
				"text": "我的",
				"iconPath": "static/images/tabBar/user0.png",
				"selectedIconPath": "static/images/tabBar/user1.png"
			}
		]
	}

4.组件创建与使用

先创建components目录，再创建BookList组件

BookList组件代码

<template>
	<view>
		<view class="content">
			<view class="newbook">
				<view class="pic">
					<image class="image" :src="imgurl" @click="toShow"></image>
				</view>
				<view class="text">
					<view class="title">
						<view class="titleC">{{bookname}}</view>
					</view>
					<text class="info" decode space="true">{{author}}</text>
					<view style="font-size: 24rpx;margin-top: 4rpx;" v-if="bookSourceName">
						来源：
						<span class="origin-color">{{bookSourceName}}</span>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "BookList",
		props: ["imgurl", "bookname", "author", "bookSourceName"],

		data() {
			return {

			};
		},
		methods: {
			toShow() {
				uni.navigateTo({
					url: `/pages/image/image?imgsrc=${this.imgurl}`
				})

			}
		},
	}
</script>

<style>
	.content {
		height: 250rpx;
		padding: 20rpx;
		border-bottom: 1px solid #efefef;
	}

	.newbook {
		display: flex;
		justify-content: center;
	}

	.pic {
		width: 150rpx;
		height: 200rpx;
		margin-right: 10px;
		box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
		background-color: #efefef;
	}

	.image {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.text {
		width: 70%;
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.title {
		padding-bottom: 8rpx;
		display: flex;
		align-items: center;
		/* 添加相对定位 */
	}

	.titleC {
		font-size: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.info {
		padding-top: 4rpx;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.origin-color {
		/* 默认情况下，元素不可见 */
		padding: 4rpx;
		font-size: 20rpx;
		background-color: #ffc107;
		width: fit-content;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		color: #fff;
		border-radius: 8rpx;
	}
</style>

5.页面跳转与路由传参

<template>
	<view style="background-color: black;height: 100vh;">
		<image :src="imgsrc" class="imgsrc" mode="widthFix"></image>
		<view class="element">
			<view class="eitem" @click="save">保存</view>
			<view class="eitem" @click="goBack">退出</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgsrc: "",
			};
		},
		onLoad(e) {
			this.imgsrc = e.imgsrc;
		},
		methods: {
			//返回上一级目录
			goBack() {
				uni.navigateBack();
			},

			// 保存图片
			save() {
				uni.showLoading({
					title: "正在保存……"
				})
				uni.downloadFile({
					url: this.imgsrc,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								console.log(res);
								// 取消转圈
								uni.hideLoading();
								uni.showToast({
									icon: "none",
									duration: 3000,
									title: "保存成功：" + res.path,
								})
							},
							fail(res) {
								console.log(res);
								// 取消转圈
								uni.hideLoading();
								uni.showToast({
									icon: "none",
									duration: 3000,
									title: "保存失败：" + res.errMsg,
								})
							},
						});
					}
				});
			}
		},

	}
</script>

<style lang="scss">
	.imgsrc {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.element {
		position: fixed;
		z-index: 9999;
		right: 0;
		bottom: 0;
		width: 50px;
		height: 132px;
		/* RGBA 颜色，半透明的黑色 */
	}

	.eitem {
		background-color: rgba(51, 51, 51, 0.5);
		width: 50px;
		height: 50px;
		color: #ccc;
		text-align: center;
		font-size: 14px;
		padding-top: 12px;
		margin-top: 16px;
	}
</style>