WeChat_Happy_Running
1.0.0
#openingword
I posted a practice article during the winter vacation, and it went viral as expected: "Jian Nian 15: WeChat applet (starting to end, all codes) development --- running app + music player" Later, a bug-fixed version was released, which was unexpected Unexpectedly popular: January 18: WeChat applet development (starting to end, all codes)---running app + music player bug fixes Later, a new module was added, well, this one is also popular: WeChat Mini Program (starting to end, all codes) development --- Newly added module: Picture selection and photo taking functions Now that school has started, I have written something more: WeChat Mini Program (starting to end, all code) development --- Newly added [Recording 】And UI improvements
#text#### 1. UI improvements
I originally wanted to stop writing about it, but recently I feel like I need to find something to do, so I might as well write about it. At the same time, some previous codes were adjusted, such as some UI design improvements. The code has all been updated on Github, everyone is welcome to check it out: https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
The updated page is more beautiful. A new recording module has been added. Since the main page index.wxml can only hold five navigation bars, it can only be integrated into the last video. Otherwise, it would be annoying to have nowhere to put it!
The updated code is as follows, which is the change made in the
picture.jsfile:
//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'
}
},
})
In addition, modifications are added to wxml:
<view class="header" style="flex-direction:row;">
<!--通过数据绑定的方式动态获取js数据-->
<image src="{{source}}" mode="fulltoFill" class="pic"/>
<!--监听按钮-->
<button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">点击我选择相册</button>
<button bindtap="yulan"><image src="/resources/yulan.png" class="swiper"></image></button>
<view>
<button bindtap="Startrecord" class="button_anniu"> 开始录音 </button>
<button bindtap="Stoprecord" class="button_anniu"> 停止录音</button>
</view>
</view>
In addition, I am sorry to state that the recording function has been built, but when debugging, the recording can be performed perfectly, but when it comes to playback control, I just GG. The API doesn't cooperate with me at all.
####2. UI improvements
UI has always been a problem for me. I can't help it. Once the obsessive-compulsive disorder comes out, I can't get it back. Not making the size error down to the pixel level doesn't give me peace of mind at all. So this time I changed a few places. Then I felt better.
The code is updated as follows:
<music.wxml>
<view class="header" style="flex-direction:row;">
<swiper class="swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" width="100" height="10">
<swiper-item wx:for="{{imgUrls}}">
<image src="{{item}}" class="slide-image" class="banner" mode="fullToFill"/>
</swiper-item>
</swiper>
<view class="img">
<image src="/resources/Carly.png" class="pic" ></image>
</view>
<view class="img1">
<block wx:for="{{song}}" wx:key="id" class="audio">
<block wx:if="{{item.musicid==count}}">
<audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true">
<view style="display:flex;flex-direction: row;">
<button type="primary" bindtap="audioPlay" class="button_anniu">Start</button>
<button type="primary" bindtap="audioPause" class="button_anniu">Pause</button>
<button type="primary" bindtap="audio14" class="button_anniu">To14s</button>
<button type="primary" bindtap="audioStart" class="button_anniu">Stop</button>
</view>
<view style="display:flex;flex-direction: row;">
<button type="primary" bindtap="NextMusic" class="button_anniu"> Next </button>
<button type="primary" bindtap="LastMusic" class="button_anniu">Last</button>
</view>
</audio>
</block>
</block>
</view>
</view>
《music.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;
}
The improvements to the homepage, I think they look great! ! And with the addition of scroll bars, three pictures can be scrolled out.
"index.wxml"
<view class="index">
<!--标题-->
<view class="header" >
<view style="flex-direction:row;"> <image class="icon" src="/resources/fuckrun.png" mode="aspectFill"/></view>
<view class="bigTitle">Fucking Running</view>
<view class="desc">The First Program of HustWolf and XNC</view>
</view>
<view class="body">
<view class="widget">
<block wx:for="{{pageNames}}">
<view class="widgets__item">
<navigator class="navigator-hover" url="{{item.id}}/{{item.id}}">{{item.name}}</navigator>
</view>
</block>
</view>
</view>
</view>
<scroll-view scroll-y="true" style="height: 630rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<image class="pic" src="/resources/run2.png" mode="aspectFill"/>
<image class="pic" src="/resources/run1.png" mode="aspectFill"/>
<image class="pic" src="/resources/run0.png" mode="aspectFill"/>
</scroll-view>
Still needs improvement. There is no other way. It's now 7:34 pm, but I haven't eaten yet, I'm a little hungry! So I have to walk to the east later, for about half an hour, and then go to my dear, dear Yunyuan Hotel for a meal. If there is braised chicken and rice, you will be lucky. If not, have a portion. Braised duck rice will do. .
#Endwords
The small program can be regarded as a break from the holidays, but it seems that I successfully carried it into my junior year. The main reason is that I will relax if I can't continue to produce, so the atmosphere during the winter vacation is actually quite good. In school, he was dominated by Beige Chudongxi. I feel heartbroken. Although my efficiency is much higher, I still miss home. The most homesick ever.
Today is the first official day of school. I have to prove:
#personaldeclaration
Knowledge transfers power, technology knows no borders, and culture changes life!
