WeChat_Happy_Running
1.0.0
#كلمة افتتاحية
لقد نشرت مقالًا تدريبيًا خلال العطلة الشتوية، وانتشر كما هو متوقع: "Jian Nian 15: تطوير تطبيق WeChat الصغير (من البداية إلى النهاية، جميع الرموز) --- تشغيل التطبيق + مشغل الموسيقى" لاحقًا، تم إصلاح الإصدار الذي تم إصلاح الأخطاء فيه تم إصداره، والذي كان غير متوقع شائعًا بشكل غير متوقع: 18 يناير: تطوير تطبيق WeChat الصغير (من البداية إلى النهاية، جميع الرموز) --- إصلاح أخطاء تشغيل التطبيق + مشغل الموسيقى لاحقًا، تمت إضافة وحدة جديدة، حسنًا، هذه الوحدة شائعة أيضًا: تطوير برنامج WeChat Mini (من البداية إلى النهاية، كل التعليمات البرمجية) --- الوحدة المضافة حديثًا: وظائف اختيار الصور والتقاط الصور الآن بعد أن بدأت المدرسة، كتبت شيئًا أكثر: تطوير برنامج WeChat Mini (من البداية إلى النهاية، كل التعليمات البرمجية) - - تمت إضافة [التسجيل] حديثًا وتحسينات واجهة المستخدم
#text#### 1. تحسينات واجهة المستخدم
كنت أرغب في البداية في التوقف عن الكتابة عنه، لكن مؤخرًا أشعر أنني بحاجة إلى العثور على شيء لأقوم به، لذا ربما من الأفضل أن أكتب عنه. وفي الوقت نفسه، تم تعديل بعض الرموز السابقة، مثل بعض التحسينات في تصميم واجهة المستخدم. تم تحديث الكود بالكامل على Github، ونرحب بالجميع للتحقق منه: 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:
<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. تحسين واجهة المستخدم
لقد كانت واجهة المستخدم دائمًا مشكلة بالنسبة لي، ولا أستطيع مساعدتها بمجرد ظهور اضطراب الوسواس القهري، لا أستطيع استعادته. إن عدم جعل خطأ الحجم يصل إلى مستوى البكسل لا يمنحني راحة البال على الإطلاق. لذلك هذه المرة قمت بتغيير بعض الأماكن. ثم شعرت بتحسن.
يتم تحديث الكود على النحو التالي:
<موسيقى.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 مساءً، لكنني لم آكل بعد، أنا جائع قليلاً! لذلك يجب أن أسير إلى الشرق لاحقًا، لمدة نصف ساعة تقريبًا، ثم أذهب إلى فندق يونيوان العزيز لتناول وجبة. إذا كان هناك دجاج مطهو ببطء وأرز، فستكون محظوظًا، وإذا لم يكن الأمر كذلك، تناول وجبة. أرز البط المطهو ببطء سيفي بالغرض. .
#الكلمات النهائية
يمكن اعتبار البرنامج الصغير بمثابة استراحة من العطلات، ولكن يبدو أنني حملته بنجاح في سنتي الأولى. السبب الرئيسي هو أنني سأرتاح إذا لم أتمكن من الاستمرار في الإنتاج، لذا فإن الجو خلال عطلة الشتاء جيد جدًا بالفعل. في المدرسة، كان يهيمن عليه البيج Chudongxi. أشعر بالحزن الشديد على الرغم من أن كفاءتي أعلى بكثير، إلا أنني مازلت أفتقد المنزل. الأكثر حنينًا إلى الوطن على الإطلاق.
اليوم هو أول يوم رسمي في المدرسة علي أن أثبت:
#إعلان شخصي
المعرفة تنقل القوة، والتكنولوجيا لا تعرف الحدود، والثقافة تغير الحياة!
