适合小白入门的生日惊喜小程序

效果图展示
确认整体框架
- 封面设计
- - 点击图标实现页面跳转
  - 背景图的设置
- 答题环节
- - 消息提示框弹出
- 图片展示
- 音乐播放
- - 音频播放暂停
  - 图片转动
- 总结

效果图展示

这个程序是本人开发的一个简单微信小程序。
适合想开发小程序的小白们参考~，下面先给大家看看效果

确认整体框架

确认框架是每个程序员开发项目必须要做的工作~对于该小程序，主要框架分为以下几个方面：

封面设计 ，即首页展示；
答题环节 ，即实现一些基本的鼠标点击，弹出相应小窗口等事件；
图片展示 ，即图片展览；
音乐播放 ，即实现音乐播放以及暂停事件；

封面设计

效果图：
分析：
在上述的效果图，具体实现的功能有 点击图标实现页面跳转、背景图的设置

代码贴上↓↓↓
.wxml

<image class="picture" bindtap="clickme" src="../picture/pig.jpeg"></image>

.js

Page({clickme: function(){wx.navigateTo({url: '../letter/letter'})}
})

.json

{"navigationBarTitleText": "Birthday","usingComponents": {}
}

.wxss

.page{background-image: url("//添加想要背景图片对应的base64码");background-size: 100% 100%;
}.picture{width:100px; height:100px; border-radius:90px; margin-top:1025rpx; margin-left:70%;
}

点击图标实现页面跳转

主要思路是利用bindtap点击事件完成触发对应的功能函数。bindtap点击事件对于小白可以简单理解为微信开发工具提供的一个可以响应用户的点击动作的工具.bindtap=“clickme” 即设置此图片对应一个名称为"clickme"的功能函数，接着就需要我们在 .js 中完成clickme功能函数的具体实现。

在 clickme 的功能函数中，利用实现 wx.navigateTo 接口完成页面的跳转，关于该接口的使用，可以参考微信开发文档，而要转向的对应页面则只需在 url 输入对应的路径即可。

背景图的设置

背景图的设置，也算是我在学习过程中踩的一个坑。微信小程序的背景图使用应先将所要设置的图片转换为 base64码（可搜索在线转换工具进行转换），然后将base64码复制粘贴到 background-image:url("") 里面，再设置一下 background-size 属性即可。

答题环节

效果图：

分析：
在上述的效果图，具体实现的功能有 消息提示框弹出

代码贴上↓↓↓
.wxml

<view class="title">Ask and Answer
</view><view class="question"><text decode="{{true}}">&nbsp;&nbsp;问：请选出最帅的那位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（点击选项哦）</text>
</view><view class="answer"><view class="seletionA" bindtap="answerB">A.TT</view><view class="seletionB" bindtap="answerB">B.暖心师兄</view><view class="seletionC" bindtap="answerB">C.亚当</view><view class="seletionD" bindtap="answerD">D.藏..</view>
</view><view class="story">
<text decode="{{true}}">
&nbsp;&nbsp;&nbsp;&nbsp;课程是旷的，考试是抄的，学分是蹭的，毕设是买的，论文是拼的，学位证是水的，三方协议是用来骗就业率的，什么是真的？球场上流过的汗，操场上跑过的圈，宿舍里开过的黑，分离时流过的泪，寝室里放过的dj，卧谈会争论的妹，小饭馆买过的醉，食堂里排过的队，图书馆占过的位，所有回不去的，都是真的。
---《我想念》
</text>
</view><image class="picture" bindtap="clickme" src="../picture/pig.jpeg"></image>

.js

Page({answerB: function () {wx.showToast({title: '诚实！加一分！',icon: 'none',duration: 1500 //持续的时间})},answerD: function () {wx.showToast({title: '好行你居然敢点！马上选别的！',icon: 'none',duration: 1500 //持续的时间})},clickme: function () {wx.navigateTo({url: '../Photo/Photo'})}})

.json

{"navigationBarTitleText": "Birthday","usingComponents": {}
}

.wxss

.page{background-image: url("//添加想要背景图片对应的base64码");background-size: 100% 100%;
}.title{width: 690rpx;height: 150rpx;margin-top: 30rpx;margin-bottom: 30rpx;text-align: center;margin-right: 30rpx;margin-left: 30rpx;color: #ffffff;font-size: 60rpx;line-height: 140rpx;font-weight: 550;}.question{font-size: 30rpx;margin-right: 20%;margin-left: 20%;margin-top: 15rpx;color: #ffffff;font-weight: 550;
}.answer{margin-right: 20%;margin-left: 40%;margin-top: 30rpx;color: #ffffff;font-weight: 650;
}.seletionA,.seletionB,.seletionC,.seletionD{margin-top: 50rpx;
}.story{margin-right: 20%;margin-left: 20%;margin-top: 60rpx;color: #ffffff;font-weight: 650;font-size: 25rpx;
}.picture{width:80px; height:80px; border-radius:90px; margin-top:30rpx; margin-left:40%;
}

消息提示框弹出

该功能的具体操作是点击相应选项弹出相应的消息提示框，所以还是需要用到 bindtap点击事件 标识对应要响应的功能函数。例如代码中的 answerD 便是点击D选项时会响应的功能函数。

实现弹出消息提示框，在微信开发文档中我们可以知道，可通过实现 wx.showToast 接口来完成。在 title 中输入对应的文字、icon默认下是“succe”，即按钮属性，在程序中我将其设置了“none”，即无需按钮、duration 则是提示框的持续时长。更多的属性，小白可以多参考微信开发文档。

图片展示

关于图片展示的话，就没有太多新功能啦，就是简单的"image"标签的使用，以及对应的修饰，在这里就不啰嗦啦。

音乐播放

效果图
分析：
在上述的效果图，具体实现的功能有 音频播放暂停、图片转动

代码贴上↓↓↓
.wxml

<view class="title">Muisc House
</view><!-- 当前为停止状态 -->
<view class="player" wx:if="{{pS == false}}" bindtap="play"><image class="playerOn" src="../../pages/picture/pig.jpeg"></image>
</view><!-- 当前为播放状态 -->
<view class="player" wx:if="{{pS == true}}" bindtap="stop"><image class="playerStop" src="../../pages/picture/pig.jpeg"></image>
</view><view class="story">
<text decode="{{true}}">
文字
</text>
</view>

.js

const myaudio = wx.createInnerAudioContext();//创建对象Page({/*** 页面的初始数据*/data: {pS: false},/*** 生命周期函数--监听页面显示*/onShow: function () {myaudio.src ="http://music.163.com/song/media/outer/url?id=1359356908.mp3"},play: function () {if (wx.setInnerAudioOption) {wx.setInnerAudioOption({obeyMuteSwitch: false,autoplay: true})} else {myaudio.obeyMuteSwitch = false;myaudio.autoplay = true;}//监听各个阶段myaudio.onCanplay(() => {console.log('可以播放');});myaudio.onPlay(() => {console.log('监听到音频开始播放');});myaudio.onEnded(() => {console.log('音频自然播放结束事件');});myaudio.onStop(() => {console.log('音频停止事件');});myaudio.onError((res) => {console.log(res.errMsg);console.log(res.errCode);});myaudio.onWaiting((res) => {console.log('音频加载中事件，当音频因为数据不足，需要停下来加载时会触发')});myaudio.play();console.log(myaudio.duration);this.setData({ pS: true });},// 停止stop: function () {myaudio.pause();this.setData({ pS: false });}})

.json

{"navigationBarTitleText": "Birthday","usingComponents": {}
}

.wxss

.page{background-image: url("//添加想要背景图片对应的base64码");background-size: 100% 100%;
}.title{width: 690rpx;height: 150rpx;margin-top: 30rpx;margin-bottom: 30rpx;text-align: center;margin-right: 30rpx;margin-left: 30rpx;color: #292929;font-size: 60rpx;line-height: 140rpx;font-weight: 550;}.player{widows: 100%;padding-bottom: 30rpx;display: flex;flex-direction: column;justify-content: center;
}.playerOn,.playerStop{border-radius: 180rpx;margin: 10% 20% 0% 25%;width: 400rpx;height: 400rpx;}.playerStop{animation: audio-rotate 8s linear infinite;
}/*旋转动画*/
@keyframes audio-rotate{0%{transform: rotateZ(0deg);}100%{transform: rotateZ(360deg);}
}.story{margin-right: 20%;margin-left: 20%;margin-top: 60rpx;color: #292929;font-weight: 650;font-size: 25rpx;
}

音频播放暂停

该功能的具体操作是点击图标实现音频的播放以及暂停两种状态，由此可知，便需要有true和false两种情况。关于这一点，只需要在标签中使用如wx:if="{{pS == false}}" 即可进行判断，再响应对应的功能函数。

音频的播放我采用的是wx.createInnerAudioContext() api，先创建一个实例即对象（可理解为该对象就是音频文件），通过操作该对象来实现对音频的操作。

play 功能函数主要功能即是播放，由于微信开发文档提供了相应的方法，所以我们只需要调用 .play() 即可。对于上面的监听函数主要是为了测试bug，小白可暂时不深学。stop() 功能函数主要功能便是暂停，同样地，我们只需要调用 .pause() 即可。

最后一个是音乐链接。我们只需要在 onShow 功能函数中添加（该生命周期函数，可简单理解为当我们加载页面时，音乐链接也随之加载，只要页面未关闭，该链接就不用重新加载）。接着利用如 “myaudio.src=” 方法添加即可。

在这里说一下本人踩过的坑，相信很多小白都会遇到。就是音乐链接的准确性，首先一定要保证音乐链接正确，如果错误console是不会提示的，但是就是加载不出来。还有的是关于兼容性问题，一些音频文件在安卓和开发工具可加载，但是ios上不行，关于这一点，小白可通过微信开发文档确认音频文件格式是否兼容。

图片转动

关于图片的转动，在效果图里并没展示，主要效果就是点击播放后，图片会旋转，暂停时即不动。而实现这一点，主要是在wxss中进行属性修饰。同样地，由于这里涉及了两种状态，所以我们可以使用 true 和 false 来判断。在该程序中，我定义了一个 pS 变量，当 pS == false 时，采用wxss中对应标识的属性修饰，反之。借此来实现图片的转动，具体的属性设置可参考以上代码。

总结

在开发过程中，我发现了微信小程序有一个2M的限制，不过在找其他文章学习后，利用分包功能可解决此问题，微信开发工具提供的分包功能让用户开发小程序使用容量可到8M，在这里就不啰嗦啦~

作为大二的计算机专业学生，可能学的不多，但是我会尽力地去学，这是我的第一篇CSDN文章，也是我整理的觉得可能对一些跟我一样刚接触的小白有帮助的干货。若有一些写得不好，请各位尽管说出来，大家一起学习进步~谢谢每一位看完的小伙伴(^▽)。

参考文章
①音频相关：
https://blog.csdn.net/weixin_33897722/article/details/88712410
②分包加载：
https://blog.csdn.net/acmdown/article/details/80037660

小白微信小程序开发入门经验总结，干货！生日惊喜可用相关推荐

从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门主讲人介绍沁修,葡萄藤技术总监项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结直播录屏版 https://v.qq.com/x/page/n ...
微信小程序开发入门（连载）—— 认识微信小程序
从今天开始,为大家开一门连载课程 --<微信小程序开发入门>. 2011 年,腾讯公司新的即时通讯社交软件微信正式上线,凭借其新颖的设计风格和良好的使用体验,微信很快就获得了大量的用户.据 ...
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
ready等方法微信小程序_微信小程序开发一些经验
对于微信小程序开发入门,还是比较简单的,只需要具备基本的css+js知识就可以了,成本比较低. 写了小程序和RN之后,有一种原生很笨重的感觉,就是小程序或者是RN等这些新的开发方式在效率上面真的有比较 ...
微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
微信小程序开发大赛经验总结
微信小程序开发大赛经验总结直接上项目什么的,太肤浅了. 看看可能可以避过很多的不用走的坑哦! 个人经历最近也是在做微信小程序,玩一玩. 我的微信小程序创造路程可谓是艰辛.我从大一下就开始独自开发, ...
微信小程序开发入门（连载）—— Hello World
上一篇:微信小程序开发入门(连载)-- 微信公众平台配置 3.1 微信开发者工具前往开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/ ...
微信小程序开发入门（连载）—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...

小白微信小程序开发入门经验总结，干货！生日惊喜可用

适合小白入门的生日惊喜小程序

效果图展示

确认整体框架

封面设计

点击图标实现页面跳转

背景图的设置

答题环节

消息提示框弹出

图片展示

音乐播放

音频播放暂停

图片转动

总结

小白微信小程序开发入门经验总结，干货！生日惊喜可用相关推荐

最新文章

热门文章