WeChat_Happy_Running
1.0.0
#eröffnungswort
Ich habe in den Winterferien einen Übungsartikel gepostet, der wie erwartet viral ging: „Jian Nian 15: Entwicklung des WeChat-Applets (von Anfang bis Ende, alle Codes) --- App + Musik-Player ausführen“ Später wurde eine fehlerbereinigte Version veröffentlicht veröffentlicht, was unerwartet war. Unerwartet beliebt: 18. Januar: WeChat-Applet-Entwicklung (von Anfang bis Ende, alle Codes) --- Ausführen von App- und Musik-Player-Fehlerbehebungen Später wurde ein neues Modul hinzugefügt, nun, dieses ist auch beliebt: Entwicklung des WeChat Mini-Programms (von Anfang bis Ende, alle Codes) --- Neu hinzugefügtes Modul: Bildauswahl- und Fotoaufnahmefunktionen Jetzt, da die Schule begonnen hat, habe ich etwas mehr geschrieben: Entwicklung des WeChat Mini-Programms (von Anfang bis Ende, alle Codes) - - Neu hinzugefügte [Aufnahme] und Verbesserungen der Benutzeroberfläche
#text#### 1. Verbesserungen der Benutzeroberfläche
Ursprünglich wollte ich damit aufhören, darüber zu schreiben, aber in letzter Zeit habe ich das Gefühl, dass ich etwas tun muss, also kann ich genauso gut darüber schreiben. Gleichzeitig wurden einige frühere Codes angepasst, beispielsweise einige Verbesserungen des UI-Designs. Der Code wurde vollständig auf Github aktualisiert, jeder ist herzlich eingeladen, ihn auszuprobieren: https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
Die aktualisierte Seite ist schöner. Ein neues Aufnahmemodul wurde hinzugefügt. Da die Hauptseite index.wxml nur fünf Navigationsleisten enthalten kann, kann sie nur in das letzte Video integriert werden. Sonst wäre es ärgerlich, wenn man es nirgendwo hinstellen könnte!
Der aktualisierte Code lautet wie folgt. Dabei handelt es sich um die in der Datei
picture.jsvorgenommene Änderung:
//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'
}
},
})
Darüber hinaus wurden Änderungen an wxml hinzugefügt:
<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>
Außerdem muss ich leider sagen, dass die Aufnahmefunktion erstellt wurde, aber beim Debuggen kann die Aufnahme perfekt durchgeführt werden, aber wenn es um die Wiedergabesteuerung geht, habe ich einfach GG. Die API kooperiert überhaupt nicht mit mir.
####2. Verbesserungen der Benutzeroberfläche
UI war schon immer ein Problem für mich. Sobald die Zwangsstörung auftritt, kann ich sie nicht mehr zurückbekommen. Wenn ich den Größenfehler nicht bis auf die Pixelebene mache, beruhige ich mich überhaupt nicht. Deshalb habe ich dieses Mal ein paar Orte gewechselt. Dann fühlte ich mich besser.
Der Code wird wie folgt aktualisiert:
<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;
}
Die Verbesserungen an der Homepage finde ich toll! ! Und mit der Hinzufügung von Bildlaufleisten können drei Bilder herausgescrollt werden.
„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>
Muss noch verbessert werden. Es gibt keinen anderen Weg. Es ist jetzt 19:34 Uhr, aber ich habe noch nichts gegessen, ich habe ein wenig Hunger! Also muss ich später etwa eine halbe Stunde nach Osten laufen und dann zum Essen in mein liebes, liebes Yunyuan-Hotel gehen. Wenn es geschmortes Hühnchen und Reis gibt, hast du Glück. Geschmorter Entenreis reicht aus. .
#Endwörter
Das kleine Programm kann als Pause von den Ferien betrachtet werden, aber es scheint, dass ich es erfolgreich in mein Juniorjahr übernommen habe. Der Hauptgrund ist, dass ich mich entspanne, wenn ich nicht weiter produzieren kann, sodass die Atmosphäre während der Winterferien eigentlich ganz gut ist. In der Schule wurde er von Beige Chudongxi dominiert. Ich fühle mich untröstlich, obwohl meine Leistungsfähigkeit viel höher ist, vermisse ich immer noch mein Zuhause. Das größte Heimweh aller Zeiten.
Heute ist der erste offizielle Schultag.
#persönlicheErklärung
Wissen überträgt Macht, Technologie kennt keine Grenzen und Kultur verändert das Leben!
