WeChat_Happy_Running
1.0.0
#冒頭の言葉
冬休み中に練習記事を投稿したところ、予想通りバズりました。「Jian Nian 15: WeChat アプレット (最初から最後まで、すべてのコード) 開発 --- アプリと音楽プレーヤーの実行」 その後、バグ修正されたバージョンが公開されました。予想外のリリース 予想外の人気: 1 月 18 日: WeChat アプレット開発 (最初から最後まで、すべてのコード)---実行中のアプリ + 音楽プレーヤーのバグ修正 その後、新しいモジュールが追加されました。まあ、これも人気です。 WeChat ミニ プログラム (最初から最後まで、すべてのコード) 開発 --- 新しく追加されたモジュール: 写真の選択と写真撮影機能 学校が始まったので、さらに何かを書きました: WeChat ミニ プログラム (最初から最後まで、すべてのコード) の開発 - -- 新たに[録音]の追加と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 の改善
強迫性障害は一度出てしまうと元に戻せないので、ずっと悩んでいました。ピクセルレベルまでサイズの誤差を出さないということは、まったく安心できません。ということで、今回は少し場所を変えてみました。そうしたら気分が良くなりました。
コードは次のように更新されます。
<音楽.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;
}
ホームページの改善、とても良くなったと思います! ！スクロール バーを追加すると、3 つの画像をスクロール アウトできます。
「インデックス.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年生に持ち込んだようです。制作が続けられなくなったら休むというのが一番の理由なので、冬休みの雰囲気はむしろ良いです。学校ではベージュ・チュドンシーに支配されていた。効率はかなり向上しましたが、それでも家が恋しいです。今までで一番のホームシック。
今日は初めての正式な学校の日です。次のことを証明しなければなりません。
#個人宣言
知識は力を伝達し、テクノロジーには国境がなく、文化は生活を変えます。
