App应用开发项目实战

前言

每次开新的教案，总爱啰嗦两句

我时常在想为什么都觉得上课这么无聊，因为都是简单的模仿，抄写，机械式的完成作业，实在太没意思了！！

我现在决定让学生自己发挥想象力，开发自己觉得好玩的软件，题材不限，开发完了之后，要真的发到公共平台上（因为上应用商店要花钱，可以上免费的微信小程序平台，或者上钉钉平台，我发到家长群，也是很值得自豪的事情！），让所有人都可以用，然后还要给我们分享下是怎么设计的，灵感思路怎么来的，评价的标准就是有意思就行了。关键在于这是自己创作的作品，而不是作业。

这就是是主动和被动的区别，就像有的歌手，没有自己的作品，只会唱别人的歌，没有感情只有技巧，只有自己创作的作品才会投入感情，程序之中也是有情感的，编者能投入情感，读者能产生共鸣，说明境界到了。

基础知识部分

软件使用

1. 打开HBuilderX软件
2. 左上角-文件-新建-项目，选择uni-app项目中的默认模板，随便取一个项目名称
3. 找到pages目录下的index目录中的index.vue，并打开右上方的预览，就可以一边写代码，一边看到效果了

提示：代码写好之后，记得同时按下ctrl+s键保存

页面结构

pages目录中放的是我们的页面文件，项目自动帮我们创建好了一个index目录，index就是首页的意思，我们找到其中的index.vue，双击它，然后再点击右上角的预览，我们就可以先看到初始项目中，别人帮我们写好的一个参考案例是长什么样的。

我们先分析一下网页结构吧，前端分为三件套。

三件套	作用	所属区域
html	网页结构，相当于房屋主体结构	<template></template>
css	网页样式，相当于房子里的装修	<style></style>
JavaScript	脚本语言，复制复杂的交互逻辑，用来给网页增加动态功能，相当于房子里的家电	<script></script>

因为html、css和JavaScript处于同一个文件里，它们都有属于自己的区域，参考上述表格，例如html需要写在<template></template>标签里。

我给大家提供一个基础的结构模板，其实初始项目创建的时候，这个结构别人就帮我写好了，不用背。

点击右上角的预览按钮打开内置浏览器，并同时按下ctrl+s保存，这样就可以在内置浏览器中看到效果了。

<template>
	<h1>{{title}}，欢迎访问我的app</h1>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

数据绑定

uniapp目前是基于vue2的语法，我们都知道网页分为结构、样式、交互。

在原生JavaScript中，结构中只能写html标签，不能写入变量，如果想要动态改变结构，可太麻烦了，要去获取dom、连同整个dom一起改变。

对于vue2来说，结构中居然可以读到变量，相当于我们可以直接操作数据就行了，太方便了。

重点知识：

vue2中的变量需要定义在data中，以键值对的形式定义，变量可以在结构中直接使用

但是如何将data中的变量和网页结构进行绑定，总共分为三种情况。

1.标签体内容

在标签体内容中如果想要使用变量，直接使用{{}}语法，在{{}}中可以写表达式了，表达式包括变量、常量和运算符。

<template>
	<h1>我的名字是{{name}}</h1>
</template>

<script>
	export default {
		data() {
			return {
				name: '张三'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

练习：

写一个h2标签，内容为：我的兴趣是XXX（XXX必须是变量，直接写不及格！）

2.标签体属性

在标签属性前加上:，这个属性的值就不再是字符串，而是被当作是表达式了，表达式包括变量、常量和运算符。

<template>
	<image :src="logo_url" mode=""></image>
</template>

<script>
	export default {
		data() {
			return {
				logo_url: '../../static/logo.png'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

注意：这里使用了image标签，我们之前学的是img标签，注意区分，其实image就是img标签的升级版，官方为了让你们使用更好的image标签，其实有一个有趣的设定，你如果用img就不给你代码提示。

练习：

写一个a标签，标签内容为：点我跳转到编程部落，跳转的地址为：https://xiaolily.cn（这个地址要求使用变量，直接写不及格！）

3.表单

通俗一点来说：表单就是各种输入框，收集用户输入的组件都叫表单

<template>
	<input type="text" placeholder="请输入你的名字" v-model="username" />
</template>

<script>
	export default {
		data() {
			return {
				username:''
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

练习：

你是逗音直播平台的程序员，现在需要设计一个输入框，提示文字为：请输入你要打赏主播的金额，输入框的值需要和变量进行绑定（默认值为：10000）

onLoad

当页面加载的时候，自动执行一次

<script>
	export default {
		data() {
			return {
				color:'',  
			}
		},
		onLoad() {
			uni.showToast({
				title:'你好，欢迎来访问我的网页'
			})
		},
		methods: {

		}
	}
</script>

这个弹框是如何实现的呢？其实很多东西都是需要从官方文档中查的，我们不可能把所有东西全部背下来，也没必要，要用的时候会查就行，所以这个查文档的能力很重要，是作为程序员的必备技能。

我从官方帮大家查两个吧，搜索uniapp官方文档——API——界面——交互反馈。

消息提示框

uni.showToast({
	title: '标题',
	duration: 2000,
    icon:'success'
});

对话框

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: (res) => {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

补充知识：console.log()是在控制台打印，用户看不到，一般用于开发调试

任务：你们部门接了一个大单，你作为项目负责人，需要帮爱坤娱乐有限公司制作一个免责声明，虽然你觉得这个免责声明很扯淡，甚至到比较离谱的地步了，你也知道用户可能会骂：这是正常人能做出来的东西？但是现实情况是，你为了生存，还是笑着把项目做完了。（训练我们的专业素养）

甲方要求：用户打开网页自动弹出免责声明：感谢您访问爱昆娱乐公司的游戏，您需要同意让游戏访问您的摄像头、麦克风、银行账户，游戏可能偶尔向您的联系人发送功德推广消息，费用由您承担。接受游戏可能在凌晨3点突然播放诵经音乐叫您起来加功德。游戏会自动为您订阅各种佛法道家电子杂志，年费自动扣款。接受可能突然弹出的"功德税"缴纳通知。游戏会自动为您购买功德保险，保费从话费中扣除。如果用户点击拒绝，提示：真是抱歉，没能为您提供服务！为了补偿，我们将会提供格式化服务，您的设备将在10秒后自动格式化。用户如果点击接受，提示：谢谢信任，我们将竭诚为您服务

点击事件

1. 给标签绑定点击事件，点击之后之执行某个方法
2. 在methods中定义方法的具体逻辑

<template>
	<!-- 不传参 -->
	<button @click="nihao1()">你好</button>
	<!-- 传参 -->
	<button @click="nihao2('张三')">你好</button>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			nihao1(){
				uni.showToast({
					title:'你好',
					icon:'success'
				})
			},
			nihao2(name){
				uni.showToast({
					title:'你好' + name,
					icon:'error'
				})
			}
		}
	}
</script>

案例：电子木鱼简易版

重点知识：在这个案例中有一个新的知识点，如果在methods中要访问data中的变量，必须加上this.，this是环境变量，代表自己，因为这种情况属于自己访问自己（在template结构中可以直接访问，不需要加this）

<template>
	<h1>功德数：{{gongde_count}}</h1>
	<button @click="jia()">点我加功德</button>
</template>

<script>
	export default {
		data() {
			return {
				gongde_count:0
			}
		},
		onLoad() {

		},
		methods: {
			jia(){
				this.gongde_count ++
			}
		}
	}
</script>

任务：我是特朗普竞选团队总负责人，现在正在选举”阿迈瑞看“村的村长，我们想委托你们帮我们做一个民意调查的网站，民众可以给哈里斯和特朗普投票，但是，不管使用什么样的方法，请使得特朗普获得更高的票数，如果你让特朗普不高兴了，后果你知道的，我的朋友。

if判断

if 分支语句

if(条件表达式) {
  // 满足条件要执行的语句
}

小括号内的条件结果是布尔值，为true时，进入大括号里执行代码；为false，则不执行大括号里面代码

条件可以写表达式，但是表达式的计算结果必须是布尔值

<script>
	export default {
		data() {
			return {
				age: ''
			}
		},
		onLoad() {
			// true为真，false为假
			if (true) {
				console.log('成功执行if条件内的语句1')
			}
			// 1<2 成立，计算结果为true
			if (1 < 2) {
				console.log('成功执行if条件内的语句2')
			}
		},
		methods: {

		}
	}
</script>

if双分支语句

如果有两个条件的时候，可以使用 if else 双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

练习：steam平台智能审核

在知名游戏平台steam中，为了关爱未成年人健康发展，限制未成年人使用18岁以上涉及恐怖、暴力元素的游戏，使用了极为先进的智能审核机制，用户需要输入自己的年龄，如果小于18岁，就不能访问。

1. 请实现一个输入框，提示文字为：请输入你的年龄，输入框的值需要和变量进行绑定，变量的值默认为18

2. 还需要有一个访问按钮，如果用户输入的年龄小于18，弹框显示：抱歉小老弟，不是不让你玩，只是这个游戏你把握不住，去4399玩吧。如果用户输入的年龄大于等于18，弹框显示：欢迎体验我们的游戏

条件渲染

if判断和v-if我放在一块，大家别弄混了，在结构中，也可以写判断，

1. v-if可以用于控制页面上是否显示该标签
2. 如果v-if中的条件不成立，执行v-else

<template>
	<h1 v-if="money>10000">女主播很高兴</h1>
	<h2 v-else>女主播看不上你的三瓜两枣并给你了一个白眼自己体会是不是工作不够努力连超级火箭都送不起还敢来看仙女直播配吗？</h2>
	<input v-model="money" type="text" placeholder="请输入要打赏给女主播的金额" />
</template>

<script>
	export default {
		data() {
			return {
				money:100,
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

练习：

1. 页面显示输入框，提示文字为：请输入要打赏给女主播的金额
2. 如果输入的金额大于10000，显示”女主播开心的笑了.jpg”

综合练习

1. 在页面中利用表单收集用户的姓名、打赏金额。（记得存放到变量中）
2. 当用户点击打赏按钮，弹出免责声明，内容为：鉴于网络直播观赏与打赏行为已成为当代数字生活不可或缺之一环，为明确各方权责、避免不必要之纷争，特此发布本《关于自愿打赏女主播之神圣不可侵犯声明》。本人（即打赏者）郑重声明，所有打赏行为均出于对主播才艺之崇高敬意与灵魂共鸣，绝非一时冲动或手滑所致。打赏时本人头脑清醒、精神亢奋，且已提前三日沐浴更衣、斋戒冥想，确保此行为符合宇宙正义与个人钱包之承受能力。故打赏金额一经送出，即视为融入数字虚空，不得以“后悔”“吃土”“老婆发现”等理由要求返还。平台仅提供虚拟时空供主播与观众进行精神交流，若打赏后主播未回复私信、未念出名字、或与其他土豪结婚，均属宇宙随机事件，与平台无关。打赏者需自行参透“色即是空，空即是打赏”之禅机，【最终解释权归平台所有（包括您的后悔药使用权）】
3. 如果用户接收免责协议，在页面上现实滚动文字：感谢XXX送的XXX逗音币（XXX为步骤1获取的用户输入）。如果用户点击拒绝，则弹出消息提示框，内容为：对于长期以"观察员"身份享受服务的用户，为保护您的用眼健康，系统可能会适度限制您的观看流量。建议您通过打赏参与内容生态建设
4. 如果用户输入的金额大于10000，显示“女主播开心的笑了.jpg”，如果用户输入的金额小于10000，显示“女主播懒得理你送的三瓜两枣.jpg”。

延时函数

就是要延时多久之后干某件事

语法：

setTimeout(() => {要干啥事写在这里},函数时间)

注意：延时的单位是毫秒

电子功德（延时版）

<template>
	<h1>功德数：{{gongde_count}}</h1>
	<button @click="jia()">点我加功德</button>
</template>

<script>
	export default {
		data() {
			return {
				gongde_count:0
			}
		},
		onLoad() {

		},
		methods: {
			jia(){
				setTimeout(() => {
					this.gongde_count ++
				},1000)
			}
		}
	}
</script>

任务：你是美国联邦特勤局顶级黑客，2024年的美国大选中，特朗普成功竞选美国总统，并在网页上放上了自己帅气的照片，这一举动，无疑引起了民主党的极度不满，于是，哈里斯花了重金聘请了你，希望你入侵到该网站，修改标题和图片

1. 最开始，网页显示标题文字：没有人比我更懂American，下方是特朗普的照片
2. 延时五秒之后，将标题文字替换为“我在麦当劳打过工，我才能代表穷人，大家快来给我投票”，并照片替换为哈里斯的照片

间歇函数

间隔多少时间执行一次某件事

setInterval(() => {要干啥事写在这里},函数时间)

间歇函数的用法和延时函数很像，但是间歇函数一旦运行起来，怎么让它停下来呢，你需要先定义一个变量，一般叫timer，将间歇函数保存在这个变量中，然后使用clearInterval()清除定时器。

电子功德（自动加功德版）

<template>
	<h1>功德数：{{gongde_count}}</h1>
	<button @click="jia()">点我加功德</button>
	<button @click="stop()">功德够多了，我要停止加功德</button>
</template>

<script>
	export default {
		data() {
			return {
				gongde_count:0,  // 功德数
				timer:''         // 间歇函数的定时器 
			}
		},
		onLoad() {

		},
		methods: {
			// 加功德
			jia(){
				this.timer = setInterval(() => {
					this.gongde_count ++
				},100)
			},
			// 停止加功德
			stop(){
				clearInterval(this.timer)
			}
		}
	}
</script>

注意：这里写了两个方法，方法和方法之间记得用英文逗号隔开

任务：制作一个30秒倒计时，按下开始按钮之后，自动开始30秒倒计时，按下停止按钮之后，倒计时停止。（注意不能减到负数，需要使用条件判断语句）

随机数

Math.random()

作用：生成0-1之间的随机数

注意：其范围是左闭右开，即[0,1)，有可能会渠道0，但永远取不到1

示例：产生一个0-8之间的随机数

<script>
	export default {
		data() {
			return {
				random_number: '',
			}
		},
		onLoad() {
			this.random_number = Math.random()*8
			uni.showToast({
				title:this.random_number
			})
		},
		methods: {

		}
	}
</script>

Math.floor()

作用：对一个浮点数向下取整

示例：产生一个0-7之间的随机整数，可能的取值为0，1，2，3，4，5，6，7

<script>
	export default {
		data() {
			return {
				random_number: '',
			}
		},
		onLoad() {
			this.random_number = Math.floor(Math.random()*8) 
			uni.showToast({
				title:this.random_number
			})
		},
		methods: {

		}
	}
</script>

任务：每天一句土味情话(程序员版)

下列代码是每次弹框显示一句土味情话，请你修改为，每次打开在页面中显示一句土味情话

<template>

</template>

<script>
	export default {
		data() {
			return {
				random_number: '',
				loveWords: [
					"我是九你是三，除了你还是你，就像代码里的循环，永远围着你转。",
					"宝，你知道我为什么感冒了吗？因为我对你完全没有抵抗力，就像防火墙遇到你的爱，瞬间崩塌。",
					"你一定是偷了太阳的光芒，不然怎么会这么耀眼，把我的心照得透亮，让我满心满眼都是你，像网页离不开 CSS 样式。",
					"甜有 100 种方式，有吃糖、吃蛋糕，还有每天 98 次的想你，就像函数的调用，时刻在我脑海里运行。",
					"我觉得你接近我就是为了害我，害得我好喜欢你，像程序陷入死循环，无法自拔地爱着你。",
					"宝，你猜我是什么星座？是为你量身定做，就像代码为特定功能而生，我只为你存在。",
					"你知道我为什么老是摔跤吗？因为一见到你我就被你的魅力绊倒了，摔进了你的温柔陷阱里，像程序陷入了错误但甘之如饴。",
					"我生在边疆，活在边疆，栽在你手里，总算是去过不一样的地方了，你就是我代码里的意外，却又让我无比着迷。",
					"宝，你是磁铁吗？不是啊，那你怎么把我的心吸得紧紧的，让我无法逃脱，像数据被锁在数据库里，只为你一人开放。",
					"你知道我的心有多大吗？很大很大，装得下整个世界，但我的心里，满满的都是你，像内存被你占满，其他都不重要了。",
					"我一点也不想你，一点半再想，哈哈，其实从睁开眼的那一刻，你就像弹窗广告一样，在我脑海里挥之不去。",
					"宝，你猜我想吃什么？痴痴地望着你，就像程序等待输入，而你就是我唯一的期待。",
					"你知道我为什么要吃素吗？因为你是我的菜，而且是唯一的那道菜，像关键代码不可或缺。",
					"我觉得你像一本书，越看越让人着迷，我想每天都翻着你，了解你的每一页，像读取代码文档，永远都读不够。",
					"宝，你知道你和星星有什么区别吗？星星在天上，你在我心里，像变量存在于内存中，时刻被我调用。",
					"亲爱的，你晓得不？我上辈子可能是个碳酸饮料，为啥？因为一见到你，我就开心得冒泡，像程序执行成功的提示。",
					"宝，你一定是偷了月亮的魔法，把我的魂儿都勾走了。我现在看啥都像你，吃饭想你，睡觉想你，就连走路都觉得你在我旁边，像代码里的全局变量，无处不在。",
					"我感觉我是一个糖，为啥？因为你太甜了，甜得我都化了，像数据在高温下失去原有的形态，只因为你。",
					"宝，你知道吗？你就是我的核心代码，没有你，我的生活就像失去了主函数，无法运行下去。",
					"你是我写过最美的代码片段，优雅、独特，让我忍不住一遍又一遍地回味，就像对你的爱，永不停息。",
					"宝，你晓得我为啥最近总失眠不？因为你在我心里一直跑马灯似的闪，让我根本睡不着，就像程序里的死锁，心被你占得死死的。",
					"我跟你讲，你就是我的‘系统漏洞’，别人进不来，我也出不去，满心满眼都是你，像被黑客攻击了一样，对你毫无防备。",
					"宝，你猜我的心分成了几部分？一部分是你，一部分还是你，就像代码里的分支结构，不管怎么选，都是通向爱你的路。",
					"你知道你和游戏有啥区别不？游戏让我沉迷一时，而你让我沉迷一世，像后台进程一样，一直在我生活里运行。",
					"我觉得你像我电脑的主机，没了你，我的世界就黑屏了，啥也干不了，因为你是我生活运转的核心。",
					"宝，你是我的‘404 错误’，每次找不到你，我就心慌意乱，像迷失在网络里的数据包，只盼着找到你这个目的地。",
					"你知道我为啥喜欢数学不？因为我算来算去，都算不出我有多爱你，像个无解的算法，爱你无穷无尽。",
					"我觉得你像我的‘代码注释’，虽然平时不显眼，但没了你，我的生活代码就没人能读懂，你是我生活意义的说明。",
					"宝，你是我的‘加密文件’，别人看不到你的好，只有我能解开，像拥有专属密码，你是我心底的宝藏。",
					"你知道我为啥总盯着手机不？因为怕错过你的消息，就像服务器等待客户端请求，时刻准备着回应你。",
					"宝，你猜我用什么语言表达爱最合适？不是 Java，不是 Python，是爱你无‘语’伦比，像独特的编程语言，专为你创造。",
					"你知道我为啥喜欢春天不？因为春天花会开，而你就是我心中永不凋谢的花，像常量一样，永远美好。",
					"我觉得你像我的‘数据库索引’，有了你，我能快速找到生活的方向，像数据检索一样高效，你是我的生活导航。",
					"宝，你是我的‘程序优化器’，自从有了你，我的生活变得顺畅无比，像代码被优化后高效运行，你让一切都变得美好。",
					"我是‘代码里的变量’，因你而有了值，你就是赋予我意义的那个人，像给变量初始化，让我变得完整。"
				]
			}
		},
		onLoad() {
			this.random_number = Math.floor(Math.random() * 8)
			uni.showToast({
				title: this.loveWords[this.random_number]
			})
		},
		methods: {

		}
	}
</script>

坤坤表情包

微信小程序搜索鸡音盒，偶然发现的，作为一个入门的案例，正好

重点知识：

1. vue2中的变量需要定义在data中，以键值对的形式定义，变量可以在结构中直接使用

2. 在标签属性前加上:，这个属性的值就不再是字符串，而是被当作是表达式了，表达式包括变量、常量和运算符。

3. 在methods是定义方法的地方，定义的方法要通过事件触发，常见的事件有点击事件和键盘事件，这个案列中就用到了@click点击事件。

<template>
	<body>
		<image class="tupian" :src="'../../static/'+number+'.gif'" mode=""></image>
		<button @click="huan()" style="font-size: 50px;">换一张</button>
	</body>
</template>

<script>
	export default {
		data() {
			return {
				number:1
			}
		},
		onLoad() {
			
		},
		methods: {
			huan(){
				this.number ++ 
				if(this.number == 4){
					this.number = 1
				}
			}
		}
	}
</script>

<style>
	.tupian{
		width: 200px;
		height: 200px;
		position: fixed;
		left: 50vw;
		margin-left: -100px;
		top: 50vh;
		margin-top: -100px;
	}
	/* 弹性盒子横着排 */
	.fr{
	    display: flex; /* 排列方式：弹性盒子 */
	    flex-direction: row;/*排列方向：横向*/
	    justify-content: center;/*主轴居中*/
	    align-items: center;/*副轴居中*/
	}
	/* 弹性盒子竖着排 */
	.fc{
	    display: flex; /* 排列方式：弹性盒子 */
	    flex-direction: column;/*排列方向：纵向*/
	    justify-content: center;/*主轴居中*/
	    align-items: center;/*副轴居中*/
	}
</style>

思考：如果能产生1-3的随机整数作为number，岂不是更好？好了，请你实现吧，忘了就去看下JavaScript的笔记。

电子木鱼

自动功德版

<template>
	<h1 style="text-align: center;">功德数{{gongde}}</h1>
	<image id="chuizi" src="../../static/锤子.png" mode=""></image>
	<image src="../../static/1.gif" class="muyu" mode=""></image>
</template>

<script>
	export default {
		data() {
			return {
				gongde: 0
			}
		},
		onLoad() {
			const that = this
			setInterval(function() {
				that.gongde++
			}, 2000)
		},
		methods: {
		}
	}
</script>

<style>
	.muyu {
		position: fixed;
		width: 200px;
		height: 200px;
		top: 50vh;
		left: 50vw;
		margin-left: -100px;
	}

	#chuizi {
		width: 500px;
		height: 500px;
		z-index: 1;
		animation: xuanzhuan 2s infinite;
	}

	@keyframes xuanzhuan {
		from {}

		to {
			transform: rotate(360deg);
			transform-origin: 0%;
		}
	}
</style>

手动功德版（了解）

手动版用到了uni.createAnimation，所以你需要去看uniapp的官方文档，下面的代码看上去很复杂，我也看不懂，反正就是从官方文档复制过来用的，因为用原生js实在是太麻烦了。

就不要求完成了，因为你现在对基本的语法都不太熟悉，更别说框架的使用，文档的阅读。

<template>
	<h1 style="text-align: center;">功德数{{gongde}}</h1>
	<image :animation="animationData" id="chuizi" src="../../static/锤子.png" mode=""></image>
	<image src="../../static/1.gif" class="muyu" mode=""></image>
	<button style="position: fixed;bottom: 0;" @click="qiao">敲木鱼</button>
</template>

<script>
	export default {
		data() {
			return {
				gongde: 0,
				animationData: {}
			}
		},
		onLoad() {

		},
		methods: {
			qiao() {
				this.gongde ++ 
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})

				animation.rotate(180).step()
				this.animationData = animation.export()

				// 动画结束后重置状态
				setTimeout(() => {
					// 恢复到初始状态
					animation.rotate(0).step(); 
					this.animationData = animation.export(); // 更新动画数据
				}, 1000);
                
                // 同时播放音频
                const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
				innerAudioContext.onPlay();
			}
		}
	}
</script>

<style>
	.muyu {
		position: fixed;
		width: 200px;
		height: 200px;
		top: 50vh;
		left: 50vw;
		margin-left: -100px;
	}

	#chuizi {
		width: 500px;
		height: 500px;
		z-index: 1;
	}
</style>

电子钢琴

这个案例主要学习了函数的参数传递

<template>
	<div style="display: flex;flex-direction: row;">
		<button @click="yy('a49')">a49</button>
		<button @click="yy('b49')" class="black">b49</button>
		<button @click="yy('a50')">a50</button>
		<button @click="yy('b50')" class="black">b50</button>
		<button @click="yy('a51')">a51</button>
		<button @click="yy('b51')" class="black">b51</button>
		<button @click="yy('a52')">a52</button>
		<button @click="yy('b52')" class="black">b52</button>
		<button @click="yy('a53')">a53</button>
		<button @click="yy('b53')" class="black">b53</button>
		<button @click="yy('a54')">a54</button>
		<button @click="yy('b54')" class="black">b54</button>
		<button @click="yy('a55')">a55</button>
		<button @click="yy('b55')" class="black">b55</button>
		<button @click="yy('a56')">a56</button>
		<button @click="yy('b56')" class="black">b56</button>
		<button @click="yy('a57')">a57</button>
		<button @click="yy('b57')" class="black">b57</button>
		<button @click="yy('a65')">a65</button>
		<button @click="yy('b65')" class="black">b65</button>
		<button @click="yy('a66')">a66</button>
		<button @click="yy('b66')" class="black">b66</button>
		<button @click="yy('a67')">a67</button>
		<button @click="yy('b67')" class="black">b67</button>
		<button @click="yy('a68')">a68</button>
		<button @click="yy('b68')" class="black">b68</button>
		<button @click="yy('a69')">a69</button>
		<button @click="yy('b69')" class="black">b69</button>
		<button @click="yy('a70')">a70</button>
		<button @click="yy('b70')" class="black">b70</button>
		<button @click="yy('a71')">a71</button>
		<button @click="yy('b71')" class="black">b71</button>
		<button @click="yy('a72')">a72</button>
		<button @click="yy('b72')" class="black">b72</button>
		<button @click="yy('a73')">a73</button>
		<button @click="yy('b73')" class="black">b73</button>
		<button @click="yy('a74')">a74</button>
		<button @click="yy('b74')" class="black">b74</button>
		<button @click="yy('a75')">a75</button>
		<button @click="yy('b75')" class="black">b75</button>
		<button @click="yy('a76')">a76</button>
		<button @click="yy('b76')" class="black">b76</button>
		<button @click="yy('a77')">a77</button>
		<button @click="yy('b77')" class="black">b77</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
			// 播放音乐
			yy(number){
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '/static/电子钢琴/' +  number +'.mp3';
			},
		}

	}
</script>

<style>
button{
	height: 50vh;
}
.black{
	background-color: black !important;
	color: white !important;
}
</style>

扩展：完成鸡音盒app

坤坤风扇

<template>
	<!-- 第一步：划分区域大小，宽，高，背景颜色 -->
	<!-- 第二步，把合适大小的东西放进去 -->
	<!-- 第三步、摆放整齐 -->
	<!-- 大风扇 -->
	<!-- 在标签属性前加上:，这个属性的值就不再是字符串，而是被当作是表达式了，表达式包括变量、常量和运算符 -->
	<div class="flex_row" style="width: 100vw;height: 50vh;background-color: aquamarine;">
		<image :class="sudu" style="width: 60vw;height: 60vw;border-radius: 50%;" 
		:src="dafengshan" mode=""></image>
	</div>
	<!-- 开关 -->
	<div class="flex_row" style="width: 100vw;height: 15vh;background-color: burlywood;">
		<image @click="kaiguan()" style="width: 50px;height: 50px;" src="../../static/开关1.png" mode=""></image>
	</div>
	<!-- 三个小风扇 -->
	<div class="flex_row" style="width: 100vw;height: 30vh;background-color: cornflowerblue;">
		<image @click="mode1()" class="xiaofengshan" src="../../static/头像1.png" mode=""></image>
		<image @click="mode2()" class="xiaofengshan" src="../../static/头像2.png" mode=""></image>
		<image @click="mode3()" class="xiaofengshan" src="../../static/头像3.png" mode=""></image>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dafengshan: '../../static/大风扇.png',
				sudu:''
			}
		},
		onLoad() {

		},
		methods: {
			// 注意：自己访问自己的变量，需要加上this，this可以理解为他自己
			// 模式1
			mode1(){
				this.dafengshan = '../../static/头像1.png'
				this.sudu = 'kuai'
			},
			mode2(){
				this.dafengshan = '../../static/头像2.png'
				this.sudu = 'zhong'
			},
			mode3(){
				this.dafengshan = '../../static/头像3.png'
				this.sudu = 'man'
			},
			kaiguan(){
				this.sudu = ''
			}
		}
	}
</script>

<style>
	.kuai{
		animation: xuanzhuan 0.5s infinite linear;
	}
	.zhong{
		animation: xuanzhuan 3s infinite linear;
	}
	.man{
		animation: xuanzhuan 8s infinite linear;
	}
	/* 定义一个动画,旋转 */
	@keyframes xuanzhuan{
		from{}
		to{
			transform: rotate(360deg);
		}
	}
	.xiaofengshan{
		width: 80px;
		height: 80px;
		margin-right: 20px;
	}
	/* 弹性盒子横着排 */
	.flex_row{
		display: flex; /* 排列方式：弹性盒子 */
		flex-direction: row;/*排列方向：横向*/
		justify-content: center;/*主轴居中*/
		align-items: center;/*副轴居中*/
	}
	/* 弹性盒子竖着排 */
	.flex_column{
		display: flex; /* 排列方式：弹性盒子 */
		flex-direction: column;/*排列方向：纵向*/
		justify-content: center;/*主轴居中*/
		align-items: center;/*副轴居中*/
	}
</style>

到五秒就停下！

<template>
	<h2 style="color: red;">游戏规则：到五秒就停下！</h2>
	<h1 style="text-align: center;font-size: 60px;">{{(haomiao/1000).toFixed(1)}}</h1>
	<div class="fr">
		<button @click="start()">开始</button>
		<button @click="stop()">停下</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				haomiao: 0,
				timer:''   // 间歇函数的定时器
			}
		},
		onLoad() {

		},
		methods: {
			// 开始
			start(){
				this.haomiao = 0
				const that = this
				that.timer = setInterval(function(){
					that.haomiao += 100
				},100)
			},
			// 停下
			stop(){
				clearInterval(this.timer)
				if (this.haomiao == 5000) {
					uni.showToast({
						title:'恭喜你，游戏成功',
						icon:'success'
					})
				} else{
					uni.showToast({
						title:'很遗憾，游戏失败',
						icon:'error'
					})
				}
			}
		}
	}
</script>

<style>
	button{
		width: 30vw;
		background-color: cadetblue;
		color: aliceblue;
		font-weight: 600;
	}
	.fr{
		display: flex;
		flex-direction: row;
	}
</style>

变红就赶紧点！

<template>
	<div @click="stop()" :class="yanse" style="width: 100vw;height: 100vh;">
		<h3 style="color: red;">游戏规则：变红就赶紧按</h3>
		<h1 style="text-align: center;font-size: 70px;">{{(haomiao/1000).toFixed(2)}}</h1>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				yanse: '',
				timer: '',  // 间歇的定时器
				haomiao:0
			}
		},
		onLoad() {
			const that = this
			setTimeout(function() {
				that.yanse = 'red'
				that.timer = setInterval(function(){
					that.haomiao += 10
				},10)
			}, 2000);
		},
		methods: {
			// 停下
			stop(){
				clearInterval(this.timer)
				// 检测违规
				if(this.haomiao == 0){
					uni.showToast({
						title:'还没变红你就点了，违规了',
						icon:'error'
					})
				}
			}
		}
	}
</script>

<style>
	.red{
		background-color: red;
	}
</style>