摇骰子设计与实现(uni-app微信小程序)

这篇具有很好参考价值的文章主要介绍了摇骰子设计与实现(uni-app微信小程序)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

摇骰子设计与实现

手机摇一摇可以摇骰子,上划可查看结果,震动加声音等功能。
本章底部会贴出所有代码,图片资源以及音频资源很简单,自己找一下就行了。
已经上线小程序,可以扫码直接预览效果。
微信小程序筛子,uni-app,微信小程序,前端

准备工作

新建一个项目,将已经准备好的资源,放入到项目中。下面是需要资源图片的示例。
微信小程序筛子,uni-app,微信小程序,前端

实现步骤以及思路

作为一个前端,看到东西总是想着去实现一下。感觉摇骰子简单就实现一下,如果难的话,可能就不会出来了。哈哈,开始上正文。
首先开始思考摇骰子的流程,准备状态>>>晃动中状态>>>等待开起状态>>>开启后状态。
简单的四步循环,开整。

第一步:实现准备状态

实现准备状态,我们要实现什么?
1、手机摇一摇后开始摇骰子
开整,页面如何铺设就不描述了代码在最下面。

利用uni.onGyroscopeChange监听陀螺仪,根据陀螺仪变化的速率来判断是否摇动了手机,当检测到摇动手机号开始游戏,并停止监听陀螺仪。
实际情况中发现,摇动幅度大持续时间长,会执行多次。这里我想的是加个shakeState变量,监听到一次的时候就改变 shakeState,然后停止监听后开始游戏。

			//监听陀螺仪
			start() {
				uni.onGyroscopeChange((res) => {
					var nowRange = Math.abs(res.x) + Math.abs(res.x) + Math.abs(res.x);
					if (nowRange > 10) {
						this.shakeState = true
					}
					if(this.shakeState){
						this.stop()
						this.shakeState = false
						this.playGame()
					}
				});
				uni.startGyroscope({
					interval: "normal"
				})
			},
			//停止监听陀螺仪
			stop() {
				uni.stopGyroscope({})
			},

第二步:实现晃动中状态

实现晃动中状态,我们要实现什么?
1、整个骰盅晃动,发出摇骰子的声音

骰盅晃动是通过vue中的**:class类样式绑定,在代码中写了一个rollDiceAnimation**的样式类实现一个动画,然后判断“gameType”的变量实现动画。

<view class="diceCountent" :class="{'rollDiceAnimation':gameType == 1}">
</view>

声音的是利用了“uni.createInnerAudioContext()”设置好自动播放,音频文件地址,调用**onPlay()**方法实现声音的播放。

					const innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.autoplay = true;
					innerAudioContext.src = '/static/rollDice/dice.mp3';
					innerAudioContext.onPlay(() => {});

第三步:等待开起状态

实现晃动中状态,我们要实现什么?
1、上划骰盅晃动,展示结果。

实现滑动,这里就不得不说下手指触摸屏幕**“@touchstart”、触摸移动“@touchmove”、手指离开屏幕“@touchend”这个三个事件。手指触摸的时候记录当前pageY**的值,移动时算出移动的位置,改变骰盅的位置。手指离开后恢复原先的状态。

原本想着,滑动骰盅直接展示结果,但是感觉太突然了。就使用“opacity”透明度显得不那么突然。

<image class="maskbox" v-show="gameType != 3" :style="{'transform':'translate3d(0px,-'+yMove+'px,0)'}"
				@touchstart="maskTouchStart" @touchmove.prevent="maskTouchMove" @touchend="maskTouchEnd"
				src="../../static/rollDice/dice.png" mode=""></image>
			// 开始触摸屏幕
			maskTouchStart(ev) {
				this.YStart = ev.changedTouches[0].pageY
			},
			// 触摸移动
			maskTouchMove(ev) {
				var result =0
				if(this.gameType == 2){
					result =  parseInt(this.YStart - ev.changedTouches[0].pageY)
				}
				if(result > 0){
					this.yMove = result
					this.opacityShow = result/100
				}
			},
			// 触摸结束
			maskTouchEnd(ev) {
				this.yMove = 0
				this.opacityShow = 0
			},

第四步:开启后状态

开启后状态,我们要实现什么?
1、结果骰子的展示。

毕竟6个骰子和20个骰子展示是不一样的。这里先定好要展示位置的大小,然后通过骰子的个数,来改变骰子图片的大小

			// 设置骰子位置前
			setDice() {
				var arr = [] 
				// 生成坐标数组
				if (this.diceCount > 9) {
					let pointSum = Math.floor(Math.sqrt(this.diceCount)) + 1
					this.diceWidth = parseInt(240 / pointSum)
					for (let i = 0; i < pointSum; i++) {
						for (let k = 0; k < pointSum; k++) {
							arr[arr.length] = {
								top: i * this.diceWidth,
								left: k * this.diceWidth
							}
						}
					}
				} else {
					for (let i = 0; i < 3; i++) {
						for (let k = 0; k < 3; k++) {
							arr[arr.length] = {
								top: i * 80,
								left: k * 80
							}
						}
					}
				}
				// 骰子位置以及角度
				var dice, angle, temp, tempList
				for (var i = 0; i < this.diceCount; i++) {
					dice = (Math.random() * 6) >> 0
					angle = (Math.random() * 6) >> 0
					temp = (Math.random() * arr.length) >> 0;
					// 让数组不重复
					tempList = arr[temp];
					arr.splice(temp, 1)
					this.addDiceList(dice, angle, tempList)
				}
			},
			// 设置骰子
			addDiceList(dice, angle, tempList) {
				this.diceList.push({
					"rotate": 30 * angle,
					"dice": dice,
					"top": tempList.top,
					"left": tempList.left
				})
			},

部分优化

总体的功能就实现了,为了更加完善。设置弹框历史开骰记录准备状态下显示骰子数量等待开起状态开始陀螺仪监听可继续摇。这就不多说了,具体的逻辑代码都在下面。

代码和我,只要一个能跑就行!文章来源地址https://www.toymoban.com/news/detail-663663.html

总代码

<template>
	<view>
		<!-- 背景 -->
		<image class="gameBg" src="../../static/rollDice/gameBg.jpg" mode=""></image>
		<view style="height: 60rpx;"></view>
		<!-- 骰子 -->
		<view class="diceCountent" :class="{'rollDiceAnimation':gameType == 1}">
			<image src="../../static/rollDice/dicebg.png" class="bgimg" mode=""></image>
			<view class="dicebox">
				<view class="diceitem" v-for="(item,index) in diceList" :key="index" :style="{width:diceWidth+'rpx',height:diceWidth+'rpx',top:item.top+'rpx',left:item.left+'rpx',
		transform:`rotate(${item.rotate}deg)`}">
					<image :src="diceAll[item.dice].img" class="diceimg" mode=""></image>
				</view>
			</view>

			<image class="maskbox" v-show="gameType != 3" :style="{'transform':'translate3d(0px,-'+yMove+'px,0)'}"
				@touchstart="maskTouchStart" @touchmove.prevent="maskTouchMove" @touchend="maskTouchEnd"
				src="../../static/rollDice/dice.png" mode=""></image>
			<view v-show="gameType == 0" class="diceSumBox">
				{{diceCount}}
			</view>
			<view v-show="gameType == 2" class="diceSumBox">

			</view>
		</view>
		<!-- 总合计 -->
		<view style="height: 800rpx;"></view>
		<!-- 按钮-->
		<view class="btnBox">
			<view v-show="gameType == 0" @click="playGame()" class="startBtn">
				摇一摇
			</view>
			<view v-show="gameType == 2" @click="openDice()" class="openBtn"></view>
		</view>
		<!-- v-show="gameType == 3" -->
		<view :style="{'opacity':opacityShow}"  class="totalbox">
			<text class="totalboxTitle">总点数:{{point}}</text>
			<view class="totaldicebox">
				<view class="totaldiceItem">
					<image src="../../static/rollDice/01.png" class="smallDiceimg" mode=""></image>
					<text>X {{one}}</text>
				</view>
				<view class="totaldiceItem">
					<image src="../../static/rollDice/03.png" class="smallDiceimg" mode=""></image>
					<text>X {{thr}}</text>
				</view>
				<view class="totaldiceItem">
					<image src="../../static/rollDice/05.png" class="smallDiceimg" mode=""></image>
					<text>X {{fiv}}</text>
				</view>
			</view>
			<view class="totaldicebox">
				<view class="totaldiceItem">
					<image src="../../static/rollDice/02.png" class="smallDiceimg" mode=""></image>
					<text>X {{two}}</text>
				</view>
				<view class="totaldiceItem">
					<image src="../../static/rollDice/04.png" class="smallDiceimg" mode=""></image>
					<text>X {{fou}}</text>
				</view>
				<view class="totaldiceItem">
					<image src="../../static/rollDice/06.png" class="smallDiceimg" mode=""></image>
					<text>X {{six}}</text>
				</view>
			</view>
		</view>
		
		<view class="smallTipBox">
			<text v-show="gameType == 2">上划骰盅可提前查看结果</text>
			<text v-show="gameType == 3">点击右下角可重新开始</text>
		</view>
		
		<!-- 记录 -->
		<view class="footBox">
			<image @click="setRecord()" src="../../static/rollDice/record.png" class="recordImg" mode=""></image>
			<view v-show="gameType == 2" @click="playGame()" class="againBtn"></view>
			<view v-show="gameType == 3" @click="reface()" class="againBtn"></view>
		</view>
		<view v-show="recordShow" class="recordBox">
			<view @click="recordShow = false" class="closeBox">
				X
			</view>
			<view class="title">
				历史开骰记录
			</view>
			<view class="headTitle">
				<view class="whead">总和</view>
				<image src="../../static/rollDice/01.png" class="diceRecordimg" mode=""></image>
				<image src="../../static/rollDice/02.png" class="diceRecordimg" mode=""></image>
				<image src="../../static/rollDice/03.png" class="diceRecordimg" mode=""></image>
				<image src="../../static/rollDice/04.png" class="diceRecordimg" mode=""></image>
				<image src="../../static/rollDice/05.png" class="diceRecordimg" mode=""></image>
				<image src="../../static/rollDice/06.png" class="diceRecordimg" mode=""></image>
			</view>
			<scroll-view scroll-y="true" class="diceContentBox">
				<view v-for="(item,index) in recordList" :key="index" class="diceContent">
					<text class="whead">{{item.point}}</text>
					<text>{{item.one}}</text>
					<text>{{item.two}}</text>
					<text>{{item.thr}}</text>
					<text>{{item.fou}}</text>
					<text>{{item.fiv}}</text>
					<text>{{item.six}}</text>
				</view>
			</scroll-view>

		</view>
		<!-- 设置 -->
		<!-- 左上角设置,可设置音乐,震动,筛子个数,自动开 -->
		<view @click="setBoxShow = true" class="setBtn">
			<image src="../../static/set.png" mode=""></image>
		</view>
		<view v-show="setBoxShow" class="setBox">
			<view @click="setBoxShow = false" class="closeBox">
				X
			</view>
			<view class="title">
				设置
			</view>
			<view @click="automated = !automated" class="handleBtn">
				自动开骰:{{automated?'开启':'关闭'}}
			</view>
			<view @click="musicshow = !musicshow" class="handleBtn">
				声音:{{musicshow?'开启':'关闭'}}
			</view>
			<view @click="shakeShow = !shakeShow" class="handleBtn">
				震动:{{shakeShow?'开启':'关闭'}}
			</view>
			<view class="handleBtn setCountBox">
				<text>骰子:</text>
				<image @click="setcount()" src="../../static/rollDice/reduce.png" mode=""></image>
				<text style="width: 100rpx;">{{diceCount}}</text>
				<image @click="setcount('add')" src="../../static/rollDice/add.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shakeState:false, // 摇一摇
				opacityShow:0, // 统计透明度
				YStart:'', // 开始位置
				yMove: 0,
				setBoxShow: false, // 设置
				musicshow: true, // 音乐
				shakeShow:true, // 震动
				automated: false, // 自动开
				recordShow: false, // 记录
				gameType: 0, // 0:游戏准备,1摇骰子中,2等待开筛子,3已经开过筛子
				point: 0,
				one: 0,
				two: 0,
				thr: 0,
				fou: 0,
				fiv: 0,
				six: 0,
				diceCount: 6,
				diceWidth: 70,
				diceList: [],
				diceAll: [{
					img: '../../static/rollDice/01.png',
					dicesum: 1
				}, {
					img: '../../static/rollDice/02.png',
					dicesum: 2
				}, {
					img: '../../static/rollDice/03.png',
					dicesum: 3
				}, {
					img: '../../static/rollDice/04.png',
					dicesum: 4
				}, {
					img: '../../static/rollDice/05.png',
					dicesum: 5
				}, {
					img: '../../static/rollDice/06.png',
					dicesum: 6
				}],
				recordList: [],
			}
		},
		onShow() {
			// this.playGame()
			this.start()
		},
		methods: {
			// 开始触摸屏幕
			maskTouchStart(ev) {
				this.YStart = ev.changedTouches[0].pageY
			},
			// 触摸移动
			maskTouchMove(ev) {
				var result =0
				if(this.gameType == 2){
					result =  parseInt(this.YStart - ev.changedTouches[0].pageY)
				}
				if(result > 0){
					this.yMove = result
					this.opacityShow = result/100
				}
			},
			// 触摸结束
			maskTouchEnd(ev) {
				this.yMove = 0
				this.opacityShow = 0
			},
			//监听陀螺仪
			start() {
				uni.onGyroscopeChange((res) => {
					var nowRange = Math.abs(res.x) + Math.abs(res.x) + Math.abs(res.x);
					if (nowRange > 10) {
						this.shakeState = true
					}
					
					if(this.shakeState){
						this.stop()
						this.shakeState = false
						this.playGame()
					}
				});
				uni.startGyroscope({
					interval: "normal"
				})
			},
			//停止监听陀螺仪
			stop() {
				uni.stopGyroscope({})
			},
			setcount(txt) {
				if (txt == 'add') {
					if (this.diceCount < 100) {
						this.diceCount++
					}
				} else {
					if (this.diceCount > 1) {
						this.diceCount--
					}
				}
			},
			// 查看记录
			setRecord() {
				this.recordShow = true
			},
			// 开起骰子
			openDice() {
				this.opacityShow = 1
				this.gameType = 3
				this.stop()
			},
			// 重置游戏
			reface() {
				this.opacityShow = 0
				this.gameType = 0
				this.diceList = []
				this.recordList[this.recordList.length] = {
					'point': this.point,
					'one': this.one,
					'two': this.two,
					'thr': this.thr,
					'fou': this.fou,
					'fiv': this.fiv,
					'six': this.six,
				}
				this.start()
			},
			// 开始游戏
			playGame() {
				this.diceList = []
				// 震动
				if(this.shakeShow){
					uni.vibrateLong();
				}
				
				if(this.musicshow){
					const innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.autoplay = true;
					innerAudioContext.src = '/static/rollDice/dice.mp3';
					innerAudioContext.onPlay(() => {});
				}
				
				this.setDice()
				this.diceCountDice()
				

				this.gameType = 1

				// 自动开骰
				if (this.automated) {
					setTimeout(() => {
						this.gameType = 3
						this.opacityShow = 1
					}, 2000)
				} else {
					setTimeout(() => {
						this.gameType = 2
						this.start()
					}, 2000)
				}
			},
			// 设置骰子位置前
			setDice() {
				var arr = [] // 深拷贝
				// 生成坐标数组
				if (this.diceCount > 9) {
					let pointSum = Math.floor(Math.sqrt(this.diceCount)) + 1
					this.diceWidth = parseInt(240 / pointSum)
					for (let i = 0; i < pointSum; i++) {
						for (let k = 0; k < pointSum; k++) {
							arr[arr.length] = {
								top: i * this.diceWidth,
								left: k * this.diceWidth
							}
						}
					}
				} else {
					for (let i = 0; i < 3; i++) {
						for (let k = 0; k < 3; k++) {
							arr[arr.length] = {
								top: i * 80,
								left: k * 80
							}
						}
					}
				}

				var dice, angle, temp, tempList
				for (var i = 0; i < this.diceCount; i++) {
					dice = (Math.random() * 6) >> 0
					angle = (Math.random() * 6) >> 0
					temp = (Math.random() * arr.length) >> 0;
					// 让数组不重复
					tempList = arr[temp];
					arr.splice(temp, 1)
					this.addDiceList(dice, angle, tempList)
				}
			},
			// 设置骰子
			addDiceList(dice, angle, tempList) {
				this.diceList.push({
					"rotate": 30 * angle,
					"dice": dice,
					"top": tempList.top,
					"left": tempList.left
				})
			},
			// 统计数量
			diceCountDice() {
				this.one = 0
				this.two = 0
				this.thr = 0
				this.fou = 0
				this.fiv = 0
				this.six = 0
				let sum = 0
				this.diceList.forEach((item) => {
					sum = sum + item.dice + 1
					switch (item.dice) {
						case 0:
							this.one++;
							break;
						case 1:
							this.two++;
							break;
						case 2:
							this.thr++;
							break;
						case 3:
							this.fou++;
							break;
						case 4:
							this.fiv++;
							break;
						case 5:
							this.six++;
							break;
					}
				})
				this.point = sum
			}


		}
	}
</script>

<style lang="scss">
	.gameBg {
		position: fixed;
		width: 750rpx;
		height: 100vh;
	}

	/* 骰子 */
	.diceCountent {
		position: absolute;
		left: 130rpx;
		padding-top: 60rpx;

		.bgimg {
			position: absolute;
			top: 270rpx;
			width: 500rpx;
			height: 520rpx;
		}

		.dicebox {
			position: relative;
			top: 330rpx;
			margin-left: 110rpx;
			z-index: 10;
		}

		.diceitem {
			position: absolute;
		}

		.diceimg {
			width: 100%;
			height: 100%;
		}

		.maskbox {
			position: absolute;
			margin-left: 40rpx;
			width: 430rpx;
			height: 600rpx;
			z-index: 10;
		}

		.diceSumBox {
			position: absolute;
			top: 340rpx;
			margin-left: 40rpx;
			font-size: 160rpx;
			font-weight: bold;
			color: #d2d1d9;
			z-index: 10;
			width: 430rpx;
			text-align: center;
		}
	}

	.rollDiceAnimation {
		animation: moveRoll 1.2s;
	}

	@keyframes moveRoll {
		0% {
			left: 130rpx;
		}

		5% {
			left: 0rpx;
		}

		15% {
			left: 260rpx;
		}

		25% {
			left: 0rpx;
		}

		35% {
			left: 260rpx;
		}

		45% {
			left: 0rpx;
		}

		55% {
			left: 260rpx;
		}

		65% {
			left: 0rpx;
		}

		75% {
			left: 260rpx;
		}

		85% {
			left: 0rpx;
		}

		95% {
			left: 260rpx;
		}

		100% {
			left: 130rpx;
		}
	}

	// 结果统计
	.totalbox {
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 640rpx;
		border-radius: 30rpx;
		margin: 10rpx auto 0;
		padding: 0 20rpx 10rpx;
		border: 6rpx #7b422e solid;
		// background: linear-gradient(#FFFFFF, #0ba952);
		position: relative;

		.totalboxTitle {
			font-size: 50rpx;
			line-height: 100rpx;
		}

		.smallDiceimg {
			width: 80rpx;
			height: 80rpx;
		}

		.totaldicebox {
			display: flex;
			width: 100%;
			padding: 10rpx 0;
		}

		.totaldiceItem {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.totaldiceItem text {
			margin-left: 10rpx;
			font-size: 42rpx;
		}

	}

	.btnBox {
		display: flex;
		justify-content: center;
		position: relative;
		text-align: center;
		z-index: 10;
		font-size: 46rpx;

		.startBtn {
			width: 200rpx;
			border: 2rpx #f6f6f7 solid;
			color: #FFFFFF;
			padding: 0 60rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: #303038;
		}

		.openBtn {
			font-size: 54rpx;
			line-height: 160rpx;
			text-align: center;
			width: 160rpx;
			height: 160rpx;
			border-radius: 100rpx;
			border: 2rpx #f6f6f7 solid;
			color: #FFFFFF;
			background: #303038;
		}
	}

	// 历史记录
	.recordBox {
		position: fixed;
		bottom: 0;
		width: 670rpx;
		height: 60vh;
		z-index: 10;
		background: #faf5ec;
		border: 10rpx #755345 solid;
		padding: 20rpx 30rpx;
		border-radius: 50rpx 50rpx 0 0;

		.title {
			width: 100%;
			font-weight: bold;
			line-height: 120rpx;
			font-size: 40rpx;
			text-align: center;
		}

		.closeBox {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 40rpx;
			font-weight: bold;
			padding: 20rpx 30rpx;
		}

		.headTitle {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.whead {
				font-weight: bold;
				text-align: center;
				width: 110rpx;
			}

			.diceRecordimg {
				width: 54rpx;
				height: 54rpx;
			}
		}

		.diceContentBox {
			height: 40vh;
			margin-top: 20rpx;
			overflow: hidden;
			border: 2rpx #c1c1c1 solid;
		}

		.diceContent {
			display: flex;
			align-items: center;
			color: #333333;
			justify-content: space-around;
			line-height: 70rpx;
			border-bottom: 2rpx #999 solid;

			.whead {
				text-align: center;
				width: 110rpx;
			}

			text {
				width: 54rpx;
				text-align: center;
			}
		}
	}

	.footBox {
		position: fixed;
		width: 650rpx;
		display: flex;
		justify-content: space-between;
		bottom: 50rpx;
		left: 50rpx;

		.recordImg {
			width: 90rpx;
			height: 90rpx;
		}

		.againBtn {
			color: #FFFFFF;
			font-size: 40rpx;
			text-align: center;
			font-weight: bold;
			width: 90rpx;
			line-height: 90rpx;
			height: 90rpx;
			border-radius: 100rpx;
			border: 6rpx #FFFFFF solid;
		}
	}

	// 设置
	.setBtn {
		position: fixed;
		top: 80rpx;
		left: 40rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.setBox {
		z-index: 10;
		position: fixed;
		top: 26vh;
		left: 110rpx;
		color: #442e27;
		border: 10rpx #755345 solid;
		border-radius: 30rpx;
		padding: 0 50rpx 50rpx 50rpx;
		background: #faf5ec;

		.title {
			width: 100%;
			font-weight: bold;
			line-height: 140rpx;
			font-size: 40rpx;
			text-align: center;
		}

		.handleBtn {
			border-radius: 30rpx;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 70rpx;
			text-align: center;
			width: 400rpx;
			background: #f7d16a;
			border: 6rpx #6c5447 solid;
			margin-bottom: 20rpx;
		}

		.closeBox {
			position: absolute;
			right: 0;
			font-size: 40rpx;
			font-weight: bold;
			padding: 10rpx 20rpx;
		}

		.setCountBox {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
				padding: 0 10rpx;
			}
		}
	}
	
	.smallTipBox{
		position: relative;
		color: #FFFFFF;
		font-size: 36rpx;
		line-height: 120rpx;
		width: 100%;
		text-align: center;
	}
</style>

到了这里,关于摇骰子设计与实现(uni-app微信小程序)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序canvas实现简易手写签名版(uni-app)

    微信小程序可以通过canvas实现手写签名的效果,本文中使用的是微信小程序Canvas 2D接口 本示例中绘制的是横屏签名的效果,效果图如下: 这里我们需要调整canvas的物理宽高,默认物理宽高为300*150px,物理宽高调整通过css样式即可,本文中需要根据屏幕高度进行动态调整,使

    2024年02月12日
    浏览(64)
  • uni-app实现自定义导航栏,兼容H5、App、微信小程序

    很多情况下,系统自带的导航栏无法满足UI设计的要求,这时候就需要我们自定义导航栏来实现需求,要考虑跨端的多种情况,这里我们封装成一个组件来使用,实现效果如下: 一、H5、App、微信小程序的区别 1.H5:导航栏高度可以设为44px,它没有状态栏,因为H5端运行在浏览

    2024年04月13日
    浏览(69)
  • uni-app之微信小程序实现‘下载+保存至本地+预览’功能

    目录 一、H5如何实现下载功能 二、微信小程序实现下载资源功能方面与H5有很大的不同 三、 微信小程序实现文件(doc,pdf等格式,非图片)下载(下载-保存-预览)功能 四、图片预览、保存、转发、收藏:uni.previewImage() 五、 我当前遇到‘关于文件预览uni.openDocument()’API的问

    2024年02月15日
    浏览(61)
  • Uni-app实现左右滑动页面内容切换(兼容微信小程序)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档         前言         整体思路         一、HTML部分         二、Script部分         三、Style部分           (先声明哦我可不是偷懒,只是想学术借鉴一下)因为最近有在做左右滑动功能,

    2024年02月07日
    浏览(96)
  • 微信小程序使用uni-app开发小程序及部分功能实现详解心得

    目录 一、uni-app 1、简介 2、开发工具 3、新建 uni-app项目 4、把项目运行到微信开发者工具 二、实现tabBar效果 1、创建tabBar页面 2、配置tabBar 1、创建分包目录 2、在 pages.json 文件中配置 3、创建分包页面 四、公用方法封装 五、搜索功能 1、搜索组件 2、搜索建议实现 3、本地存储

    2024年02月11日
    浏览(62)
  • uni-app 微信小程序中如何通过 canvas 画布实现电子签名?

    一、实际应用场景 电子签名软件应用场景:电子签名在金融、银行、贷款行业中可以用于对内日常办公流转的文档的盖章签字,对外涉及业务合作协议,采购合同,贷款申请、信用评估、贷款合同、贷款文件表、说明函等等。 可以说,只要是涉及纸质文档签字盖章的场景,

    2024年02月10日
    浏览(53)
  • uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程

    在做AI问答功能,文本返回的是markdown形式,如果没有对Markdown文本进行转换很难看,如下图,转换后是不是很好了很多,特别是代码内容阅读起来舒服多了。 下面来介绍下,我在开发小程序 软件聚导航 AI助手对实现Markdown文本解析,看到两款较好的组件,其中第二款towxml组件

    2024年02月03日
    浏览(69)
  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    主要功能实现  完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。 完成事件描述输入功能,用户可以通过文本输

    2024年02月12日
    浏览(57)
  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(119)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包