uni-app实战项目，跟着做完你就可以独立作战了（一）

- 日理万妓 2022-10-08 11:26 156阅读 0赞

# 初始化项目 #

编辑器为HBuilder  
编辑器的安装看之前的打包项目中有介绍  
[十分钟教你学会打包APP][APP]

## 创建uniapp项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
一开始是没有云服务空间的，我们右击创建  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]  
点击之后会打开云空间网址  
[阿里云 云空间][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]  
创建好之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][20210608081538175.png]  
右击关联即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]

## 初始化数据库 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]  
我们有一个云数据库文件  
[数据库下载链接][Link 2]  
此文件一定要放到**cloudfunctions** 文件夹下

右击初始化等待即可

## 实现tabbar ##

准备工作：在pages下面创建tabbar文件夹，然后在此文件夹下创建三个文件夹，右击新建页面，勾选上在pages.json注册  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]

"tabBar":{
    		"color":"#666",
    		"selectedColor":"#f07373",
    		"backgroundColor":"#FFFFFF",
    		"list":[
    			{
    				"pagePath":"pages/tabbar/index/index",
    				"iconPath":"static/home.png",
    				"selectedIconPath":"static/home-active.png",
    				"text":"首页"
    			},
    			{
    				"pagePath":"pages/tabbar/follow/follow",
    				"iconPath":"static/follow.png",
    				"selectedIconPath":"static/follow-active.png",
    				"text":"关注"
    			},
    			{
    				"pagePath":"pages/tabbar/my/my",
    				"iconPath":"static/my.png",
    				"selectedIconPath":"static/my-active.png",
    				"text":"我的"
    			}
    		]
    	}

![在这里插入图片描述][2021060808443518.png]

![在这里插入图片描述][20210608083536630.png]  
点击对应的就可以跳转了  
图片可以自己做，也可以去阿里巴巴矢量库图标下载喜欢的  
[iconfont-阿里巴巴矢量库图标][iconfont-]

# 自定义导航栏 #

我们使用scss语法做样式编写，大家可以去插件市场下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 10]  
[插件链接][Link 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 11]  
等待他自己导入即可  
我们做自定义导航栏  
![在这里插入图片描述][20210608085328549.png]  
pages.json对应下面加入这个语句  
就可以将他原本的导航栏去掉

正常情况，我们需要引入组件才可以使用，但是uniapp中不需要写，自带easyCom功能  
如果是components/组件名/组件名.vue的话就可以直接使用此组件  
组件名写错了，大家改为正确的哦 `navbar`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 12]

## components/navbar/navbar.vue编写 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 13]  
uni.scss可以设置颜色变量全局使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 15]  
虽然h5页面中无影响但是小程序中就不同了  
我们要做一下小程序适配工作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 17]

最终效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 18]

最终代码

<template>
    	<view class="navbar">
    		<view class="navbar-fixed">
    			
    			<view :style="{height:statusBarHeight+'px'}"></view>
    			
    			<view class="navbar-content" :style="{height: navBarHeight+'px',width:windowWidth+'px'}">
    				<view class="navbar-serach">
    					<view class="navbar-serach_icon">
    						<uni-icons type="search"></uni-icons>
    					</view>
    					<view class="navbar-serach_text">uni-app、vue、react</view>
    				</view>
    			</view>
    		</view>
    		<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				statusBarHeight:20,
    				navBarHeight:45,
    				windowWidth:375
    			};
    		},
    		created() {
    			this.onload()
    		},
    		methods:{
    			onload(){
    				// 获取手机信息
    				const info= uni.getSystemInfoSync()
    				this.statusBarHeight=info.statusBarHeight
    				this.windowWidth=info.windowWidth
    				// #ifndef H5 || APP-PLUS || MP-ALIPAY
    				// 获取胶囊位置
    				const menuButtonInfo=uni.getMenuButtonBoundingClientRect()
    				this.navBarHeight=(menuButtonInfo.bottom-info.statusBarHeight)+(menuButtonInfo.top-info.statusBarHeight)
    				this.windowWidth=menuButtonInfo.left
    				// #endif
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    .navbar{
    	.navbar-fixed{
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: 99;
    		width: 100%;
    		background-color: $mk-base-color;
    		.navbar-content{
    			padding: 0 15px;
    			box-sizing: border-box;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			.navbar-serach{
    				display: flex;
    				align-items: center;
    				width: 100%;
    				height: 30px;
    				border-radius: 30px;
    				padding: 0 10px;
    				background-color: #fff;
    				.navbar-serach_icon{
    					margin-right: 10px;
    				}
    				.navbar-serach_text{
    					font-size: 12px;
    					color: #999;
    				}
    			}
    		}
    	}
    }
    </style>

# 自定义导航栏组件 #

## components/tab/tab.vue编写 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 20]

![在这里插入图片描述][2021060920144725.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 21]

## get\_label 云函数编写 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 22]

## 引用数据库数据 ##

在pages\\tabbar\\index\\index.vue中编写如下

我们需要在methods里面定义函数来获取云函数返回的值，让将值赋值给定义的变量，再传给组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 23]  
组件里使用props来接收父组件传过来的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 24]  
效果就是这样子  
![在这里插入图片描述][20210610081224156.png]

# 统一管理云函数请求 #

我们在根目录下/common/api里面进行封装请求

![在这里插入图片描述][20210610081853594.png]  
在api/index.js编写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 25]

在main.js中引入，在挂载至$api上供全局使用  
![在这里插入图片描述][20210610082521581.png]  
我们就可以在index.vue首页中调用了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 26]  
效果还是一样的 没变化  
![在这里插入图片描述][20210610083122228.png]  
但是我建议分开写

不至于一个文件写很多代码

list代表文章类的

后面还有许多类可以自己起名字，我们将一个类的请求放到一个里面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 27]  
我们在index.js中做一个批量导出操作，这样我们就不需要写一个导出一个了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 28]

# 完成tab选项卡切换高亮 #

点击某个颜色高亮  
![在这里插入图片描述][20210610092200546.png]  
添加点击事件并处理  
添加类名做颜色改变

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 29]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 30]  
index.vue父组件中接收  
![在这里插入图片描述][20210610092035527.png]

![在这里插入图片描述][20210610092028674.png]

# 完成首页内容 #

红色框内为内容区域，可以在框内上下滚动的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 31]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 32]  
暂时代码

<template>
    	<view class="home">
    		
    		<navbar></navbar>
    		
    		<tab :list="tabList" @tab="tab"></tab>
    		
    		<view class="scroll">
    			<scroll-view class="list-scrool" scroll-y="true" >
    				<view>
    					<view v-for="(item,index) in 100" :key="index">
    						{
       {item}}
    					</view>
    				</view>
    			</scroll-view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				tabList:[]
    			}
    		},
    		onLoad() {
    			this.getLabel()
    		},
    		methods: {
    			// 获取tab选项卡内容
    			getLabel(){
    				// 调用api
    				this.$api.get_label({name:'get_label'})
    				.then(res=>{
    					this.tabList=res.data
    				})
    			},
    			tab({data,index}){
    				// console.log(data,index)
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	page{
    		height: 100%;
    		display: flex;
    		.home{
    			display: flex;
    			flex-direction: column;
    			flex: 1;
    			.scroll{
    				flex: 1;
    				overflow: hidden;
    				box-sizing: border-box;
    				.list-scrool{
    					height: 100%;
    					display: flex;
    					flex-direction: column;
    				}
    			}
    		}
    	}
    </style>

我们在内容区域放置自定义内容组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 33]  
基础卡片实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 34]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 35]  
多图卡片实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 36]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 37]  
大图模式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 38]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 39]  
![在这里插入图片描述][20210611105132445.png]  
最后一个mode值应该为column  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 40]  
![在这里插入图片描述][20210611105148105.png]  
在主页面传值，组件中接收，然后再用条件判断显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 41]

完整代码

<template>
    	<view class="list">
    		
    		<view v-if="mode==='base'" class="listcard">
    			<view class="listcard-image">
    				<image src="/static/logo.png" mode="aspectFill"></image>
    			</view>
    			<view class="listcard-content">
    				<view class="listcard-content_title">
    					<text>客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海</text>
    				</view>
    				<view class="listcard-content_des">
    					<view class="listcard-content_des-label">
    						<view class="listcard-content_des-label-item">
    							前段
    						</view>
    					</view>
    					<view class="listcard-content_des-browe">
    						120浏览
    					</view>
    				</view>
    			</view>
    		</view>
    		
    		
    		<view v-if="mode==='image'" class="listcard mode-column">
    			<view class="listcard-content">
    				<view class="listcard-content_title">
    					<text>客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海</text>
    				</view>
    				<view class="listcard-image">
    					<view v-for="(item,index) in 3" :key="index" class="listcard-image_item">
    						<image src="/static/logo.png" mode="aspectFill"></image>
    					</view>
    				</view>
    				<view class="listcard-content_des">
    					<view class="listcard-content_des-label">
    						<view class="listcard-content_des-label-item">
    							前段
    						</view>
    					</view>
    					<view class="listcard-content_des-browe">
    						120浏览
    					</view>
    				</view>
    			</view>
    		</view>
    		
    		<view v-if="mode==='column'" class="listcard mode-image">
    			<view class="listcard-content">
    				<view class="listcard-image">
    					<image src="/static/logo.png" mode="aspectFill"></image>
    				</view>
    				<view class="listcard-content_title">
    					<text>客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海</text>
    				</view>
    				<view class="listcard-content_des">
    					<view class="listcard-content_des-label">
    						<view class="listcard-content_des-label-item">
    							前段
    						</view>
    					</view>
    					<view class="listcard-content_des-browe">
    						120浏览
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		props:{
    			mode:{
    				type:String,
    				default:'base'
    			}
    		},
    		data() {
    			return {
    
    			};
    		}
    	}
    </script>
    
    <style lang="scss">
    	.list{
    		.listcard {
    			display: flex;
    			padding: 10px;
    			margin: 10px;
    			border-radius: 5px;
    			box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
    			box-sizing: border-box;
    		
    			.listcard-image {
    				flex-shrink: 0;
    				width: 60px;
    				height: 60px;
    				border-radius: 5px;
    				overflow: hidden;
    		
    				image {
    					width: 100%;
    					height: 100%;
    				}
    			}
    		
    			.listcard-content {
    				display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    				padding-left: 10px;
    				width: 100%;
    		
    				.listcard-content_title {
    					position: relative;
    					padding-right: 30px;
    					font-size: 14px;
    					color: #333;
    					font-weight: 400;
    					line-height: 1.2;
    		
    					text {
    						overflow: hidden;
    						text-overflow: ellipsis;
    						display: -webkit-box;
    						-webkit-line-clamp: 2;
    						-webkit-box-orient: vertical;
    					}
    		
    				}
    		
    				.listcard-content_des {
    					display: flex;
    					justify-content: space-between;
    					font-size: 12px;
    		
    					.listcard-content_des-label {
    						display: flex;
    		
    						.listcard-content_des-label-item {
    							padding: 0 5px;
    							margin-right: 5px;
    							border-radius: 15px;
    							color: $mk-base-color;
    							border: 1px $mk-base-color solid;
    						}
    					}
    		
    					.listcard-content_des-browe {
    						color: #999;
    						line-height: 1.5;
    					}
    				}
    			}
    		
    			&.mode-column {
    				.listcard-content {
    					width: 100%;
    					padding-left: 0;
    				}
    		
    				.listcard-image {
    					display: flex;
    					margin-top: 10px;
    					width: 100%;
    					height: 70px;
    		
    					.listcard-image_item {
    						margin-left: 10px;
    						width: 100%;
    						border-radius: 5px;
    						overflow: hidden;
    		
    						&:first-child {
    							margin-left: 0;
    						}
    		
    						image {
    							width: 100%;
    							height: 100%;
    						}
    					}
    				}
    		
    				.listcard-content_des {
    					margin-top: 10px;
    				}
    			}
    		
    			&.mode-image {
    				flex-direction: column;
    				.listcard-image {
    					width: 100%;
    					height: 100px;
    				}
    		
    				.listcard-content {
    					padding-left: 0;
    					margin-top: 10px;
    		
    					.listcard-content_des {
    						display: flex;
    						align-items: center;
    						margin-top: 10px;
    					}
    				}
    			}
    		}
    	}
    </style>

首页切换实现 敬请期待下一篇

[APP]: https://blog.csdn.net/blue_698/article/details/116353391?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221005/69a0d9a189df4a9b802cd905dbe6a3d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221005/8b23a9e212df46bebec2912344227d67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221005/94d3f569f2194314aa524448d5393797.png
[Link 1]: https://unicloud.dcloud.net.cn/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221005/646e0aec75dc495d92f3999d91f9088e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]: /images/20221005/bfee8b9ff8174971925bb414c05950e9.png
[20210608081538175.png]: /images/20221005/e650cd6425284019897d587ecc804dcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]: /images/20221005/e503e6e383104742819b68a969e599e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]: /images/20221005/9ff9ce159cd84a0db4bf946825ed398a.png
[Link 2]: https://download.csdn.net/download/blue_698/19462420
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]: /images/20221005/d06b21c664d548f5adcff4e8cbb88119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]: /images/20221005/0b7c990b13eb4975b5fc4bb4abe1bef4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]: /images/20221005/89667f22fa9746d5970f870d3159c7d6.png
[2021060808443518.png]: /images/20221005/e2381f3c744445008aad90f9e7e7e313.png
[20210608083536630.png]: /images/20221005/6662ae9093cf4fed8fce234ae46f53b5.png
[iconfont-]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 10]: /images/20221005/cf0709e6ddae4d55b69c0e5d5ae1a6b8.png
[Link 3]: https://ext.dcloud.net.cn/plugin?id=2046
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 11]: /images/20221005/cf7177f81d684ad7adcfa456028594e5.png
[20210608085328549.png]: /images/20221005/4efa5d03288249aeb03b8ac527ebb310.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 12]: /images/20221005/670e7bc811f4491eab2260ae282c2f8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 13]: /images/20221005/a6d67c3fbc694854a4d3db436118c434.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 14]: /images/20221005/edc70b7a919444ed800fcaa657720d12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 15]: /images/20221005/25a96e344ee447eb9c03a7f53acfe0c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 16]: /images/20221005/15c54ed948744338a2f94e44407622ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 17]: /images/20221005/71ae6a5381624adf8631f1aa22002178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 18]: /images/20221005/c9341a14ea054e24b7d61096666e68bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 19]: /images/20221005/9990862f143041e185cfc6d4a01a9e52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 20]: /images/20221005/dd3a32e3852e462aa1f8256f4c5eb6de.png
[2021060920144725.png]: /images/20221005/680735f5d730420eb4fc51c39a9bd4a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 21]: /images/20221005/cf11b54d198e442487f4bf9770092d48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 22]: /images/20221005/cdfdfda92bb74b8abe5e60d2f05f5d45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 23]: /images/20221005/4463e4147a364f0a9f4d27f45d9fb020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 24]: /images/20221005/dcc1824dbd20481ab8ad7a57d72eb6c5.png
[20210610081224156.png]: /images/20221005/ad9f966edea54928969c69a8d3317a2a.png
[20210610081853594.png]: /images/20221005/da8e4fa9f1714571bbf01ae1b74e292b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 25]: /images/20221005/390b6a5dfea04e98b0f74a2f7609b9f2.png
[20210610082521581.png]: /images/20221005/466e82a763bf4cbe8556382b1d722313.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 26]: /images/20221005/d78b4ad38abe4b0c9c184acfdca03aee.png
[20210610083122228.png]: /images/20221005/a1f1eb7dca134cefbd7cd286b3125580.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 27]: /images/20221005/f5489dda68c746c88298ca1eced8782c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 28]: /images/20221005/7ad37e2073b542aebac45a26f8543cbb.png
[20210610092200546.png]: /images/20221005/1c848aa710514d86a4b6ccefed1c4fa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 29]: /images/20221005/34a230ae2bf14439b1c969775bad791c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 30]: /images/20221005/de89754f7c2a43998fee615a9f819375.png
[20210610092035527.png]: /images/20221005/91d6944acb2a4f5d8a89ab418a59b742.png
[20210610092028674.png]: /images/20221005/3e793887352d48f4a41648cab250271d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 31]: /images/20221005/a5bf1e280e6e47449e1f92009db82ee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 32]: /images/20221005/daf73e69d4a4419cad2ffa64e4108485.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 33]: /images/20221005/e4aafd153af548cc9bca3a7a681b7197.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 34]: /images/20221005/a59eecc3017343e9a42357cfe4182ae3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 35]: /images/20221005/d055264596eb4d96a225b6a5434f5d23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 36]: /images/20221005/49f069391f8b4709897302fb292bb9bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 37]: /images/20221005/dc79db17f99b4a1ca00db6be51beed92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 38]: /images/20221005/1348b2c9baf74582a202941f8f9d1911.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 39]: /images/20221005/f2b14ab6db044e18966b0e3c3d1feae9.png
[20210611105132445.png]: /images/20221005/3c7dccc5c8f146d38c1b401bbefad589.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 40]: /images/20221005/ab24bf001e7640b4b8c65c5022f2a412.png
[20210611105148105.png]: /images/20221005/1c0f15c54c4b40109ad1230629734fcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 41]: /images/20221005/88b90e23485f49c9b0080304c698ed59.png