# WeChat_Happy_Running
**Repository Path**: HustWolf/WeChat_Happy_Running
## Basic Information
- **Project Name**: WeChat_Happy_Running
- **Description**: 这是我在官方的文档的进行的微信小程序的改进，个人觉得非常有学习意义！
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-11-07
- **Last Updated**: 2020-12-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#开篇语
>寒假发了一篇练手文章，不出意外地火了：
[《简年15： 微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器 》](http://www.jianshu.com/p/9f5fd83aad52)
后来又发了BUG修复的版本，出乎意料的火了：
[简年18： 微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器 Bug修复](http://www.jianshu.com/p/c2f9034baca7)
后来又新增了一个模块，嗯，这个也火了：
[微信小程序（有始有终，全部代码）开发--- 新增模块： 图片选取以及拍照功能](http://www.jianshu.com/p/c4b4b56a95ff)
现在开学了，我又写了点东西：
[微信小程序（有始有终，全部代码）开发--- 新增【录音】以及UI改进](http://www.jianshu.com/p/90d7768c8a4f)
#正文
####一、UI改进
>本来想要就此封笔，但是最近觉得要找点事情干，所以还是写一写吧。同时调整了下以前的一些代码，比如一些的UI设计增进了。代码已经全部更新于Github，欢迎大家去查看：
[https://github.com/HustWolfzzb/WeChat-Fucking_Running.git](https://github.com/HustWolfzzb/WeChat-Fucking_Running.git)
>更新之后的页面更加漂亮了。新增了一个录音的模块，由于主页面index.wxml只能放五个导航条，所以就只能整合在最后一个影音里面了。不然的话无处安放也是讨嫌！
>更新的代码如下，是在```picture.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一点都不配合我。
####二、UI改进
>UI一直是我的心头病，没办法，强迫症一出来，几头牛都拉不回来。不把尺寸搞得误差在像素级根本不能让我心安。所以这次改了几个地方。然后感觉好多了。
>代码更新如下：
****
```
```
**《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;
}
```
>主页的改进，我觉得很好看咯！！而且加了滚条，可以滚出三个图。
**《index.wxml》**
```
{{item.name}}
```
----
>还是需要改进啊。没办法了。我现在是下午七点三十四，但是我还没吃饭，有点饿！所以我待会还要走到东边去，大概半个小时，然后再去我亲爱的，亲爱的韵苑大酒店吃一顿，如果有黄焖鸡米饭就大运临头了，没有的话吃一份卤鸭饭就行了。。
#结束语
>小程序算是假期的一个调剂吧，不过，貌似被我成功的带到大三下了。主要是不能持续产出，我会松懈，所以寒假的氛围其实还是蛮好的。在学校就贝格忠东喜支配了。心塞，虽然效率高了不少，但是还是想家了。最想家的一次。
-------
>今天是正式开学的第一天，我得证明下：
#个人宣言
>知识传递力量，技术无国界，文化改变生活！