北京华网天下

简年15：微信小程序（有始有终，全部代码）开发

2023-10-16

来源：网络整理

微信小程序（从头到尾，全部代码）开发 --- 新增【录音】及UI改进

开头句

寒假期间我发了一篇练习文章，果然火了：

《建年十五：微信小程序（从头到尾，全部代码）开发---运行app+音乐播放器》

后来，发布了一个修复了错误的版本，出乎意料地受欢迎：

建年十八：微信小程序（从头到尾，全部代码）开发---运行app+音乐播放器bug修复

后来又添加了一个新的模块。嗯，这个也很受欢迎：

微信小程序（从头到尾，全部代码）开发---新模块：图片选择和拍照功能

现在开学了，我又写了一些东西：

微信小程序（从头到尾，全部代码）开发 --- 新增【录音】及UI改进

文本 1. UI 改进

本来想不写了，但最近觉得自己需要找点事情做，就写一下吧。同时对之前的一些代码进行了调整，比如一些UI设计的改进。代码已全部更新，欢迎大家查看：

更新后的页面更加美观。添加了新的录音模块。由于主页.wxml只能容纳五个导航栏，因此只能集成到最后一个视频中。不然没地方放就很烦了！

新录音功能

更新后的代码如下，是.js文件下所做的修改：

//index.js //获取应用实例 var app = getApp() Page({ data: { source:"http://159.203.250.111/Carly.png", }, listenerButtonChooseImage: function() { var that = this; wx.chooseImage({ count: 1, //original原图，compressed压缩图 sizeType: ['original'], //album来源相册 camera相机 sourceType: ['album', 'camera'], //成功时会回调 success: function(res) { //重绘视图 that.setData({ source: res.tempFilePaths, }) } }) }, yulan:function(){ var that=this; wx.previewImage({ current: 'http://119.29.74.46/myphoto/5.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张 urls: [ 'http://119.29.74.46/myphoto/0.jpg', 'http://119.29.74.46/myphoto/1.jpg', 'http://119.29.74.46/myphoto/2.jpg', 'http://119.29.74.46/myphoto/3.jpg', 'http://119.29.74.46/myphoto/4.jpg', 'http://119.29.74.46/myphoto/5.jpg', 'http://119.29.74.46/myphoto/6.jpg', 'http://119.29.74.46/myphoto/7.jpg'], success: function(res){ }, fail: function() { // fail }, complete: function() { // complete } }) }, Startrecord:function(){ wx.startRecord({ success: function(res) { var tempFilePath = res.tempFilePath wx.playVoice({ filePath: tempFilePath }) setTimeout(function() { //暂停播放 wx.pauseVoice() }, 5000) } }) setTimeout(function(){ wx.stopVoice() }, 5000) }, Stoprecord:function(){ var that=this; wx.stopRecord({ success: function(res){ // succes }, fail: function() { // fail }, complete: function() { // complete } }) }, onShareAppMessage: function () { return { title: '欢迎使用颜大傻牌跑步计', desc: '将你的战绩分享到~~~', path: '/page/picture/picture.js' } }, })

另外，对wxml添加修改：

点击我选择相册开始录音停止录音

另外，很遗憾的说一下，录音功能已经内置了，但是在调试的时候，可以完美的进行录音，但是说到播放控制，我就GG了。 API根本不配合我。

这三个API绝对配不上我。我希望我能活着吃他们的肉。如果他有

它有效，但我不知道它存储在哪里！！

2. 界面改进

UI一直是我的一个问题。我无能为力。强迫症一旦出来就再也找不回来了。不将尺寸误差缩小到像素级别根本无法让我安心。所以这次我改变了一些地方。然后我感觉好多了。

代码更新如下：

Start Pause To14s Stop Next Last

《.wxss》

.banner{ width: 750rpx; height: 80rpx; position: center; } .img{ position: center; padding-left: 100rpx; padding-right: 100rpx; } .img1{ position: center; padding-left: 75rpx; } .pic{ width: 550rpx; height: 640rpx; } .button_anniu{ width: 150rpx; height: 100rpx; margin: 50rpx auto; display: flex; } .swiper{ width: 750rpx; height: 80rpx; position: center; }

渲染看起来更好，对吧？

主页的改进，我认为它们看起来很棒！！并且通过添加滚动条，您可以滚动出三张图片。

《.wxml》

Fucking Running The First Program of HustWolf and XNC {{item.name}}

看一下效果，很漂亮

仍需改进。没有解决办法了。现在已经晚上7点34分了，可是我还没吃饭，我有点饿了！所以我稍后要向东走，大约半个小时，然后去我亲爱的、亲爱的云源酒店吃饭。如果有红烧鸡和米饭，那你就幸运了。如果没有微信小程序开发案例之音乐播放器，就吃一份。卤鸭饭就可以了。。

时间

结论

小程序也算是假期里的一个休息，不过看来我还是成功的把它带进了大三。主要是不能继续制作的话就放松一下，所以寒假期间的气氛其实还是挺好的。在学校里，他以米色楚动西为主。我感到心碎。虽然我的效率高了很多，但我还是想家。最想家了。

今天是正式开学的第一天。我必须证明：

我是受虐狂。。。每次看到家我就想念它。。 .我不是一个宅男。

所有功能的展示（还是和之前一样，这次改动太小，没有截图）。速度太快了，你可能看不清楚。如果您有兴趣，请阅读文章！