uniapp实现足球数据分析平台移动端H5

于 2024-08-19 17:07:59 发布
阅读量281 收藏 3
点赞数 4
文章标签： uni-app 数据分析 数据挖掘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38880880/article/details/141329028
版权

文章目录

前言

一款基于前端铺子改造的移动端程序

一直想做一款足球分析平台，大概内容包括竞彩分析模块，即时预测模块，初盘分析模块，找来找去还是前端铺子的样式感觉比较好看。

一、界面一栏

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
演示地址

二、注册界面

1.代码说明

主要实现对用户的注册

<template>
	<view style="height:100vh;background: #fff;">
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">欢迎</block>
		</cu-custom> -->

		<!-- <view class="bgImg">
			<view class="bannerBox">
				<swiper style="height: 680rpx;" class="swiper" circular="true"
					indicator-dots="true" autoplay="true" interval="4000" duration="600">
					<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
						<view class="swiper-item uni-bg-red">
							<image class="swiper-img radius shadow-warp" :src="item.imageUrl" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		
		</view> -->



		<swiper class="card-swiper round-dot" previous-margin="1rpx" :indicator-dots="false" :circular="true"
			:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#ffffff"
			indicator-active-color="#ffffff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur':''">
				<view class="swiper-item shadow-shop" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
					<image :src="item.url" v-if="item.type=='image'" mode="aspectFill" class=""></image>
				</view>
			</swiper-item>
		</swiper>


		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">登录账号</text>
						<input type="text" name="username" placeholder="请输入您的登录账号" maxlength="18" v-model="username" />
					</view>
					<view class="t-a">
						<text class="txt">登录密码</text>
						<input type="password" name="password" maxlength="18" placeholder="请输入您的密码"
							v-model="password" />
					</view>
					<view class="t-a">
						<text class="txt">联系邮箱</text>
						<input type="email" name="email" maxlength="18" placeholder="请输入您的邮箱"
							v-model="email" />
					</view>
					<button @tap="register()">注册开通</button>
					
					<view class="vip" @tap="vip()">会员价格</view>
					
					<view class="reg" @tap="reg()">返回登录</view>
					
				</form>
				<view class="t-f"><text>—————— 联系我们 ——————</text></view>
				<view class="t-e cl">
					<view class="t-g" @tap="wxNum()">
						<image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image>
					</view>
					<view class="t-g" @tap="qqNum()">
						<image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image>
					</view>
				</view>
			</view>

			<u-modal v-model="show" :content="content"></u-modal>

		</view>
	</view>
</template>

.card-swiper {
		background-image: url(https://i1.sinaimg.cn/2010/p/2010-07-03/U2706P939T17D63118F322DT20100703042134.jpg);
		height: 550upx !important;
		background-size: 100%;
		margin-bottom: 80upx;
	}

	.card-swiper swiper-item {
		width: 260upx !important;
		left: 245upx;
		box-sizing: border-box;
		padding: 0upx 17upx 50upx 17upx;
		overflow: initial;
		/* margin: 100rpx 0; */
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10upx;
		transform: scale(0.7);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}


	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		width: 100%;
		height: 450rpx;
		background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
		background-size: 100%;
	}

	.reg {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
		background: #f5f6fa;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}
	
	.vip{
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
		background: #fcd123;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 80rpx;
	}

	.t-login button {
		font-size: 28rpx;
		background: #2796f2;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
	}

	.t-login input {
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		border-bottom: 1px solid #e9e9e9;
		font-size: 28rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 150rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}


	.bgImg {
		position: relative;
		margin-bottom: 100rpx;

		.left_box {
			position: absolute;
			height: 130rpx;
			width: 60%;
			background: #ffffff;
			bottom: -55rpx;
			left: 5%;
			border-radius: 15rpx;
		}

		.right_box {
			text-align: center;
			position: absolute;
			height: 130rpx;
			width: 25%;
			background: #ffffff;
			bottom: -55rpx;
			right: 5%;
			border-radius: 15rpx;
		}
	}

三、首页界面

首页主要是统计分析，这里用了u-charts.js进行图标渲染

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">首页</block>
		</cu-custom>
		<view class="components-home">

			<view class="title-header">
				<view class="title-text">
					上月走地数据统计
				</view>
			</view>
			<view class='type-header'>
				<u-radio-group v-model="countValueStr">
					<u-radio @change="radioChange" v-for="(item, index) in selectList" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>

			<view class='nav-list margin-top'>
				<navigator open-type="navigate" hover-class='none' :class="'nav-li bg-kuxuan' + (index+1)" v-for="(item, index) in kuxuan"
				 :key="index">
					<view class="nav-name">{{item.name}}</view>
				</navigator>
			</view>
		</view>

		<!-- <view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">仪表盘</text>
				<text class="text-ABC text-blue">GaugeCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
		</view> -->


		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">最近七天{{countValueStr}}胜率情况</text>
				<text class="text-ABC text-blue">LineCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">上月全部类型场次分布</text>
				<text class="text-ABC text-blue">ringCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
		</view>

		<br><br><br><br>

		<!-- <view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">饼状图</text>
				<text class="text-ABC text-blue">PieCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">柱状图</text>
				<text class="text-ABC text-blue">ColumnCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">雷达图</text>
				<text class="text-ABC text-blue">RadarCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">漏斗图</text>
				<text class="text-ABC text-blue">FunnelCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasFunnel" id="canvasFunnel" class="charts"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">词云图</text>
				<text class="text-ABC text-blue">DataCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasData" id="canvasData" class="charts"></canvas>
		</view> -->

	</view>
</template>

四、竞彩预测

这里分了两个tab，一个显示竞彩，一个显示北单

<template>
	<view class="warp">
		<view class="status_bar">
			<!-- 导航栏 -->
		</view>
		<!-- <view class="title b-fontw7">
			竞彩预测
		</view> -->

		<view class="nav-box b-card">
			<view class="nav-bar-box">
				<view class="nav-bar-item" v-for='(item,index) in list' :key='index' :class="{'nav-bar-item-check':index == current,
				'nav-bar-left':index == 0 && current == index,
				'nav-bar-center':index > 0 && index < list.length-1 && current == index ,
				'nav-bar-right':index == list.length-1 && current == index}"
				 @click="change(index)">
					<view class="">

					</view>
					<view class="" style="flex: 1;text-align: center;">
						<view class="nav-bar-title">
							{{item.name}}
							<view class="title-line" v-show="index == current">

							</view>
						</view>
					</view>
					<view class="nav-bar-line" v-if="index<list.length-1 && index != current && index != current-1">
					</view>
					<view class="">
					</view>

				</view>
			</view>

			<view class="nav-content-box">
				<view class="">
					<view class="nav-content-title b-fontw6">
						「每日更新」体彩预测
					</view>
					<view class="nav-content-text b-flex-item-cent">
						<text class="b-traiangle"></text>
						<text>今日竞彩</text>
						<text class="nav-content-line"></text>
						<text class="b-fontw6">{{jczcc}}</text>
					</view>
					<view class="nav-content-text b-flex-item-cent">
						<text class="b-traiangle"></text>
						<text>今日北单</text>
						<text class="nav-content-line"></text>
						<text class="b-fontw6">{{bdzcc}}</text>
					</view>
				</view>
				<view class="">
					<view class="img">
						<view class="img-refresh">
							请认准
						</view>
					</view>
				</view>
			</view>
		</view>


		<view v-for="(item, index) in resultData" :key='index' style="margin-top: 20rpx;">
			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">
						{{item.matchName}} 【{{cxlx=='jc'?item.matchNoCnJczq:item.matchNoCn}}】
					</text>
					<text class="text-ABC text-blue"></text>
				</view>
			</view>
			<view class="cu-list menu sm-border margin-bottom" style="box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
				<view class="cu-item">
					<view class="content padding-tb-sm">
						<view class="text-lg">
							<text class="cuIcon-text text-blue margin-right-xs"></text>
							{{item.teams1}} VS {{item.teams2}}
						</view>
						<view class="text-gray text-df margin-top-xs">
							<text class="cuIcon-hotfill margin-right-xs"></text>
							时间：{{item.matchTime.substring(5)}}
						</view>
					</view>
					<view class="action">
						<view class="cu-capsule radius margin-right" style="margin-bottom: 20rpx;">
							<view :class="{'cu-tag bg-green':item.betTypeStr1=='负',
							'cu-tag bg-gray':item.betTypeStr1=='平',
							'cu-tag bg-red':item.betTypeStr1=='胜'
							}">
								{{item.betTypeStr1}}
							</view>
							<view :class="{'cu-tag line-green':item.betTypeStr1=='负',
							'cu-tag line-gray':item.betTypeStr1=='平',
							'cu-tag line-red':item.betTypeStr1=='胜'
							}">
								{{item.ycjgProb1}}%
							</view>
						</view>
						<br>
						<view class="cu-capsule radius">
							<view :class="{'cu-tag bg-green':item.betTypeStr2=='负',
							'cu-tag bg-gray':item.betTypeStr2=='平',
							'cu-tag bg-red':item.betTypeStr2=='胜'
							}">
								{{item.betTypeStr2}}
							</view>
							<view :class="{'cu-tag line-green':item.betTypeStr2=='负',
							'cu-tag line-gray':item.betTypeStr2=='平',
							'cu-tag line-red':item.betTypeStr2=='胜'
							}">
								{{item.ycjgProb2}}%
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

五、即时预测

这里主要展示走地滚球数据，以列表的形式展示，其中又包括了大小球、角球、让球，所以以tab展示。

<template>
	<view>
		<view class="contaier" style="background-color: #FFFFFF;">
			<view class="picBox">

				<view class="cu-bar">
					<view class="action sub-title justify-between">
						<text class="text-xl text-bold text-white">即时数据</text>
						<text class="text-ABC text-white">Ground</text>
						<!-- last-child选择器-->
					</view>
					<view class="action text-white text-sm" style="opacity: 0.6;">
						每日 更新
					</view>
				</view>

				<view class="top_bg">
					<view class="number_sy_box">
						<view class="number_sy_box_title">
							<text>即时·统计</text>
							<text style="position: absolute; right: 20rpx;z-index: 9999; font-size: 24rpx;color: #c3c3c3;">
								统计时间：昨天12:00-今日12:00
							</text>
						</view>
						<view class="number_sy_main">
							<view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
								<view class="number_num1" style="color: black;">{{oddData.zqc}}</view>
								<view class="danwei">总场次</view>
							</view>
							<view style="width: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;">
								<view class="number_num2" style="color: red;">{{oddData.zqqc}}</view>
								<view class="danwei">正确</view>
							</view>
							<view style="width: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;">
								<view class="number_num2">{{oddData}}</view>
								<view class="danwei">错误</view>
							</view>
							<view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
								<view class="number_num1" style="color: blue;">{{oddData}}</view>
								<view class="danwei">胜率</view>
							</view>
							<view style="width: 50%; text-align: center; z-index: 9999;">
								<view class="number_num2" v-if="oddData.yld>=0" style="color: darkred;">{{oddDat}}
								</view>
								<view class="number_num2" v-if="oddData.yld<0">{{oddData}</view>
								<view class="danwei">盈利</view>
							</view>

							<!-- <image mode="widthFix" class="xiaoding_bg" src="@/static/rank/Intersect.png"></image> -->
						</view>
					</view>
				</view>
			</view>






			<view class="wrap">
				<view class="u-tabs-box">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
					<view class="page-box" v-if='resultData.length ==0'>
						<view>
							<view class="centre">
								<view class="explain">
									暂无滚球信息
									<view class="tips">可以去看看有其他</view>
								</view>
								<view class="btn">再等等把</view>
							</view>
						</view>
					</view>

					<view class="page-box">
						<view class="order" v-for="item in resultData" :key="item.matchId + item.betType">
							<view class="top">
								<view class="left">
									<uni-text class="cuIcon-titles text-blue"></uni-text>
									<view class="store" v-if="item.nowstatus!='完'">{{item}}
										{{item}}′
									</view>
									<image class="xiaoding_bg" mode="widthFix" src="../../static/zd2.gif" v-if="item.nowstatus!='完'"></image>
									<view class="store" v-else>{{item}} {{item}}</view>
								</view>
								<view class="right">
									<text class="text-blue">时间：{{item.matchTime.substring(5)}}</text>
								</view>
							</view>

							<view class="cu-card dynamic isCard ">
								<view class=" shadow goPhotographer">
									<view class="PhotographerBoxR ">
										<view class="text-sm text-grey margin-top-xs">预测盘口：{{item}}</view>
										<view class="text-sm text-grey margin-top-xs">预测时间：{{item}}′ </view>
										<view class="text-sm text-grey margin-top-xs">预测比分：{{item}} </view>
									</view>

									<view class="PhotographerBoxL">
										<!-- <view class="text-bold margin-top-sm">中国足协杯</view> -->
										<view class="text-sm text-bold avatar-text">{{item.teams1}}
											{{item.nowscore.split('-')[0]}}
										</view>
										<view class="text-sm text-bold"> {{item.teams2}} {{item.nowscore.split('-')[1]}}
										</view>
										<view class='cu-tag2 margin-top-xs bg-red radius shadow-lg' v-if="item.betType.includes('大')|| item.betType.includes('主')||item.betType == '胜'">
											{{item.betType}}
										</view>
										<view class='cu-tag2 margin-top-xs bg-blue radius shadow-lg' v-if="item.betType.includes('小')|| item.betType.includes('客')||item.betType.includes('负')">
											{{item.betType}}
										</view>
										

								</view>
							</view>
						</view>
						<br></br></br></br>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

实现效果：
在这里插入图片描述

总结

因为有前端铺子丰富的UI组件库，所以实现起来还是比较简单的，后端是用的api接口，有需要的请联系作者。

鸣谢：
前端铺子-优秀前端UI框架
足球数据分析平台-优秀足球数据策略提供商

足球数据分析
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp移动端H5在线预览PDF等文件实现源码及注解
a_靖的博客
10-13 5473
uniapp移动端H5预览文件实现分为两个场景处理： （这里以预览PDF文件为示例，在线预览就是查看网络文件） 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览，因为苹果手机的浏览器自带阅读器 2. 安卓客户端预览PDF文件 安卓客户端需要在源码添加一个插件来实现文件在线预览。 添加插件步骤，下载插件，放导static目录下。 如图所示： 下面是实现示例代码： <view class="card p_r" @click="openF.
uniapp - 实现移动端H5微信公众号网页内置浏览器中预览和下载word文档(doc)、excel表格(xls)、ppt文稿、pdf文档等文件，微信内部打开预览和下载到本地详教程，兼容安卓苹果手机
王佳斌
07-12 7407
uni-app，微信公众号，h5，移动端，web平台端，网页，网站，Uniapp微信公众号H5网站，内置浏览器下载文档，如何在微信浏览器中预览office文件，word文档，excel文档，pdf文档，ppt文档，office，微信内置浏览器下载文件，下载文件，在微信浏览器里面实现下载任意文件，H5需要在微信浏览器中下载excel文件，UniApp实现网页在微信内置浏览器中下载文件详细教程，安卓点击下载会提示打开浏览器，后端返回流文件，如何解决无法下载文件，跳转至浏览器下载文件，发送到电脑微信，安卓，苹果，
uniapp的移动端h5实现文件下载兼容手机各版本浏览器
爱码士&的博客
08-22 4661
一些解决h5文件下载的思考...
uniapp+vue2实现H5移动端和小程序端高效流畅的左右联动功能【附代码】
weixin_45333006的博客
05-08 605
在移动端开发中,实现左右联动的功能是一个常见的需求。通过使用 scroll-view 组件和一些辅助 API,我们可以轻松地实现这个功能。先看看实现效果：左右联动。
uniapp(移动端H5、APP、小程序兼容)实现点击下载文档
zh626678的博客
03-19 2746
1.为了防止在手机上也打开不了链接情况，在点击下载的同时可以去复制文档链接，在手机浏览器打开。2.利用a标签实现打开文档链接，这个方法在移动端H5可以直接打开，亲测有效！用uniapp开发微信公众号网页H5实现下载文档功能时，在。微信开发者工具上点击下载调试会显示告警。直接使用uniapp的api。
uniapp 小程序 H5 移动端 写 table 表格 组件
来了波，兄嘚
07-21 2997
uniapp 写table
前端铺子-uniapp移动端：跨平台开发新篇章
chenchuang0128的博客
05-13 1154
前端铺子-uniapp移动端项目是一个基于uni-app框架的移动应用开发集合，旨在提供丰富的移动端开发资源和解决方案。项目以Vue.js为基础，结合colorUi和uView框架，实现了对微信小程序、H5、Android和IOS等平台的完美支持。项目包含了多种实用功能，如聊天室、金融量化、抽奖、地图轨迹回放等，并提供了丰富的组件和样式供开发者参考和使用。
移动端h5唤起键盘_移动端H5监听键盘弹出和收起
weixin_29765949的博客
02-12 2193
const ua=window.navigator.userAgent.toLocaleLowerCase();const isIOS= /iphone|ipad|ipod/.test(ua);const isAndroid= /android/.test(ua);if(isIOS) {let isReset= true; //是否归位this.focusinHandler = () =>{isR...
移动端H5实现点击按钮保存图片到相册
a_靖的博客
03-01 3694
这是模仿uniapp中H5环境原生的预览图片组件样式，由于原生组件不支持在图片上层加自定义提示的文字，所以自己写一个简单的组件加上“长按保存/分享图片”提示文字。canvasImg 是图片地址，你自己添加或者由canvas画出来的都可以。canvas海报生成图片可以参考下面的页面代码。所以只能曲线救国，自己写一个预览图片组件，在预览的图片上面加上提示，长按保存/分享图片。方案1：微信浏览器为了安全考虑不支持执行使用代码直接保存图片到相册。方案2：不支持A标签下载。
springboot+uniapp实战对接ChatGPT, 实现移动端应用对话
码世界
04-18 3940
助力AI解决方案： 文本摘要：给定一篇文章，生成一个简短的摘要。 语言翻译：将一种语言的文本翻译成另一种语言的文本。 文章生成：生成一篇文章，可以用于自动写作、内容创作等领域。 问答系统：回答用户提出的问题，可以用于智能客服、知识库等领域。 自动化写作：自动生成各种类型的文本，例如广告文案、新闻报道、小说等。 论文润色：自动润色用户输入的文章，输出润色后的文章， 代码语法检查： 输入一段代码，给出代码解析和有语法错误的提示。 代码自动生成： 用户简要出入需要的代码场景，即可输出对应的代码片段。
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
京东风格的轻量级移动端组件库，基于 uniapp与Vue3，支持移动端 H5 和 小程序开发.zip
04-03
1. **uniapp**：uniapp是一个使用H5技术栈开发多端应用的框架，它允许开发者编写一次代码，就能发布到iOS、Android、H5、小程序等多个平台。uniapp基于Vue.js，提供了丰富的API和组件，简化了原生应用的开发过程。 ...
移动端H5商城模板源码-34个页面
09-07
在IT行业中，移动端H5商城模板源码是开发者和设计师常用的一种资源，它能快速构建一个功能完善的在线购物平台。本资源"移动端H5商城模板源码-34个页面"是一个基于原生HTML和JavaScript技术开发的商城类H5应用模板，...
uniapp实现移动端上传文件功能
09-24
uniAPP是由DCloud(北京嘀嗒出行科技有限公司)开发的开源框架，它允许开发者使用Vue.js语法编写一次代码，然后发布到iOS、Android、Web（H5）、微信小程序、支付宝小程序等多个平台。uniAPP通过底层的H5+运行环境和...
uniapp条件编译
weixin_72329752的博客
08-15 283
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。平台存在的代码，多个这里只有||，不可能出现。2、除了H5平台，其它平台均存在的代码。详情跳转uniapp官方。
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 329
[Vue warn]: Invalid vnode type when creating vnode: null.
ios微信分享，微信登录，添加ios平台通用连接Universal Links
L_15737525552的博客
08-14 438
连接开头要是https的，因为需要把连接添加到微信开放平台上，微信开放平台邀请连接要https开头的。生成获取的，XXX为App ID Prefix，******为Bundle ID。完成后需要等开放平台审核通过后才能生效。文件中的appID是由。验证浏览器可以访问，
APP支付宝授权获取code uniapp
最新发布
L_15737525552的博客
08-18 243
把上面的urlschemewhitelist节点数据放到manifest.json的"app-plus"->"distribute"->"ios"节点下 注意：保存后提交App云端打包后才能生效 或者自定义基座运行也可，列表最多可添加50个。PS：可能会出现跳转回APP成功了，但是拿不到带回来的参数，这时我们就要在pages.json文件下找到condition这个节点删除就可以了，它回影响ios的启动。PS：ios端ios9以下需要把设置的。
uniapp 移动端h5
10-20
Uniapp是一个基于Vue.js框架的跨平台开发框架，可以同时开发出支持多个平台的应用程序，包括iOS、Android、H5、微信小程序、支付宝小程序等等。在Uniapp中，可以使用Vue.js的语法和组件，同时也可以使用Uniapp提供的API来实现与原生平台的交互。对于移动端H5开发，Uniapp也提供了相应的支持，可以通过编写Vue组件来实现移动端H5页面的开发。同时，Uniapp也提供了一些特殊的组件和API，可以方便地实现移动端H5页面的调用和交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值