交友盲盒完整版——详细源码分享

现在目前比较火热的一款app交友盲盒是通过uniapp+springboot技术来制作的，原理其实很简单，大家一看便知。

大家自行下载到手机里面去使用即可，不支持ios手机

演示地址：https://share.weiyun.com/l3ovztce

下面就是给大家分享源码了，实现原理就是前端像后端发请求拿到数据渲染页面就这么简单

首页页面： 

男生放入卡片页面：

男生取出卡片页面：

女生的取出和放入都是和男生一样的

pages.json页面设置：

{
	// pages.json
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	// "easycom": {
	// 	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
	// 	"autoscan": true,
	// 	"custom": {
	// 		"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
	// 		"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
	// 	}
	// },
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "交友盲盒"
			}
		}, {
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "个人信息",
				"enablePullDownRefresh": false
			}

		}, {
			"path": "pages/index/from/from",
			"style": {
				"navigationBarTitleText": "放入女生纸条",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/index/from/from1",
			"style": {
				"navigationBarTitleText": "取出女生纸条",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/index/from/from2",
			"style": {
				"navigationBarTitleText": "放入男生纸条",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/index/from/from3",
			"style": {
				"navigationBarTitleText": "取出男生纸条",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/getcode/getcode",
			"style": {
				"navigationBarTitleText": "取出男生信息",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/getcode/getcodenv",
			"style": {
				"navigationBarTitleText": "取出女生信息",
				"enablePullDownRefresh": false
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"selectedColor": "#F394AA",
		"list": [{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/sy.png",
				"selectedIconPath": "static/syxz.png"

			},
			{
				"text": "我的",
				"pagePath": "pages/mine/mine",
				"iconPath": "static/wd.png",
				"selectedIconPath": "static/w.png"
			}
		]
	}
}

注意：代码里面使用了uview-ui框架，大家需要自己引入自己的项目哦，传送教程：https://xuqu.gitee.io/components/downloadSetting.html