WeChat_Happy_Running
1.0.0
#오프닝워드
겨울방학 때 연습 글을 올렸는데 예상대로 입소문이 났다: "지앤니안 15: 위챗 애플릿(시작부터 끝까지, 모든 코드) 개발 --- 앱 실행 + 뮤직 플레이어 실행" 나중에 버그 수정 버전이 나왔다. 출시, 예상치 못한 인기: 1월 18일: WeChat 애플릿 개발(시작부터 끝까지, 모든 코드)---실행 앱 + 음악 플레이어 버그 수정 나중에 새 모듈이 추가되었습니다. 음, 이 모듈도 인기가 있습니다. WeChat Mini 프로그램(시작부터 끝까지, 모든 코드) 개발 --- 새로 추가된 모듈: 사진 선택 및 사진 촬영 기능 이제 학교가 시작되었으므로 더 많은 것을 작성했습니다: WeChat Mini 프로그램(시작부터 끝까지, 모든 코드) 개발 - -- 신규 추가 [녹음] 및 UI 개선
#text#### 1. UI 개선
원래는 그만 쓰고 싶었는데, 최근에는 뭔가 할 일을 찾아야 할 것 같아서 글을 쓰는 게 좋을 것 같습니다. 동시에 일부 UI 디자인 개선 등 일부 이전 코드가 조정되었습니다. 코드는 모두 Github에 업데이트되었습니다. 누구나 확인하실 수 있습니다: https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
업데이트된 페이지가 더 예뻐졌습니다. 새로운 녹화 모듈이 추가되었습니다. 기본 페이지 index.wxml에는 5개의 탐색 모음만 포함될 수 있으므로 마지막 비디오에만 통합할 수 있습니다. 그렇지 않으면 놓을 곳이 없어서 불편할 것 같아요!
업데이트된 코드는 다음과 같습니다. 이는
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에 수정 사항이 추가되었습니다.
<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>
그리고 녹음 기능이 내장되어 있다는 점은 아쉽지만, 디버깅 시 녹음은 완벽하게 할 수 있지만 재생 제어에 있어서는 그냥 GG 입니다. API가 전혀 협조하지 않습니다.
####2. UI 개선
UI는 항상 나에게 문제였습니다. 강박 장애가 나타나면 되돌릴 수 없습니다. 크기 오류를 픽셀 수준까지 낮추지 않는 것은 나에게 전혀 마음의 평화를 주지 않습니다. 그래서 이번에 몇 군데를 바꿨어요. 그러자 기분이 좋아졌습니다.
코드는 다음과 같이 업데이트됩니다.
<음악.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>
《음악.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"
<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>
아직 개선이 필요합니다. 다른 방법은 없습니다. 지금 시간은 저녁 7시 34분인데 아직 밥도 안먹고 조금 배가 고프네요! 그래서 나중에 동쪽으로 30분쯤 걸어간 다음 친애하는 윤위안 호텔로 가서 밥을 먹어야 합니다. 그렇지 않다면 운이 좋을 것입니다. 찐 오리 밥이 좋습니다. .
#엔드워즈
작은 프로그램은 방학의 휴식이라 할 수 있지만, 3학년 때까지 성공적으로 진행한 것 같습니다. 주된 이유는 작품을 계속 못 하면 편하게 쉬려고 하기 때문에 겨울방학 분위기는 사실 꽤 좋은 편이다. 학교에서는 베이지색 추동희가 지배했다. 효율성이 훨씬 높아졌지만 여전히 집이 그리워요. 가장 향수병적인 사람.
오늘은 공식적인 첫 개학일입니다. 나는 다음을 증명해야 합니다.
#개인선언
지식은 힘을 전달하고, 기술은 국경을 모르고, 문화는 삶을 변화시킵니다!
