前言
每次开新的笔记，总爱啰嗦两句
我时常在想为什么都觉得上课这么无聊，因为都是简单的模仿，抄写，机械式的完成作业，实在太没意思了！！
我现在决定让学生自己发挥想象力，开发自己觉得好玩的软件，题材不限，开发完了之后，要真的发到公共平台上（目前考虑是微信小程序，毕竟要是免费的平台），让所有人都可以用，然后还要给我们分享下是怎么设计的，灵感思路怎么来的，评价的标准就是好玩就行了。关键在于这是自己创作的作品，而不是作业。
这就是是主动和被动的区别，就像有的歌手，没有自己的作品，只会唱别人的歌，没有感情只有技巧，只有自己创作的作品才会投入感情，编程也是一样的，程序之中也是有情感的，编者能投入情感，读者能产生共鸣，说明境界到了。
坤坤表情包
微信小程序搜索鸡音盒，偶然发现的，作为一个入门的案例，正好
uniapp目前是基于vue2的语法，我们都知道网页分为结构、样式、交互。
在原生JavaScript中，结构中只能写html标签，写死结构固然没问题，但是要动态改变结构，可太麻烦了，要去获取dom、操作dom。
对于vue2来说，结构中居然可以读到变量，相当于我们可以直接操作数据就行了，不用去动结构，太方便了。
重点知识：
vue2中的变量需要定义在
data中，以键值对的形式定义，变量可以在结构中使用，我们今天就讲如何在标签属性中使用变量在标签属性前加上
:，这个属性的值就不再是字符串，而是被当作是表达式了，表达式包括变量、常量和运算符。在
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>思考：我们学过的JavaScript不是说不用了，只是不用操作dom了，比如JavaScript随机数还记得吗？如果能产生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>
