WeChat_Happy_Running

#คำเปิด

ฉันโพสต์บทความฝึกหัดในช่วงวันหยุดฤดูหนาว และกลายเป็นกระแสไวรัลอย่างที่คาดไว้: "Jian Nian 15: การพัฒนาแอปเพล็ต WeChat (เริ่มต้นจนจบโค้ดทั้งหมด) --- เรียกใช้แอป + เครื่องเล่นเพลง" ต่อมา เวอร์ชันแก้ไขข้อบกพร่องคือ เปิดตัวซึ่งได้รับความนิยมอย่างไม่คาดคิด: 18 มกราคม: การพัฒนาแอปเพล็ต WeChat (เริ่มต้นจนจบโค้ดทั้งหมด) --- เรียกใช้แอป + แก้ไขข้อบกพร่องของเครื่องเล่นเพลง ต่อมามีการเพิ่มโมดูลใหม่ เออ อันนี้ก็ได้รับความนิยมเช่นกัน: การพัฒนา WeChat Mini Program (ตั้งแต่ต้นจนจบ ทุกโค้ด) --- โมดูลที่เพิ่มเข้ามาใหม่: ฟังก์ชั่นการเลือกรูปภาพและการถ่ายภาพ เมื่อโรงเรียนเริ่มต้นแล้ว ฉันได้เขียนบางอย่างเพิ่มเติม: การพัฒนา WeChat Mini Program (ตั้งแต่ต้นจนจบ โค้ดทั้งหมด) - -- เพิ่มใหม่ [การบันทึก] และการปรับปรุง UI

#text#### 1. การปรับปรุง UI

เดิมทีฉันอยากจะหยุดเขียนเกี่ยวกับเรื่องนี้ แต่ช่วงนี้ฉันรู้สึกว่าต้องหาอะไรทำ ดังนั้นฉันจึงอาจจะเขียนเกี่ยวกับเรื่องนี้เช่นกัน ในขณะเดียวกันก็มีการปรับเปลี่ยนโค้ดก่อนหน้านี้บางส่วน เช่น การปรับปรุงการออกแบบ UI บางอย่าง รหัสทั้งหมดได้รับการอัปเดตบน 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. การปรับปรุง 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>

---

ยังต้องการการปรับปรุง ไม่มีทางอื่น ตอนนี้ 19.34 น. ยังไม่ได้กินข้าวเลย หิวนิดหน่อย! เลยต้องเดินไปทางทิศตะวันออกอีกประมาณครึ่งชั่วโมงแล้วไปกินข้าวที่ Yunyuan Hotel ที่รัก ถ้ามีข้าวมันไก่ก็ถือว่าโชคดี ข้าวหน้าเป็ดตุ๋นก็ทำ -

#คำปิดท้าย

โปรแกรมเล็ก ๆ ถือได้ว่าเป็นการพักผ่อนจากวันหยุด แต่ดูเหมือนว่าฉันจะประสบความสำเร็จในช่วงปีแรก ๆ สาเหตุหลักคือถ้าผลิตต่อไม่ได้ก็จะผ่อนคลาย ดังนั้น บรรยากาศช่วงปิดเทอมหน้าหนาวจึงค่อนข้างดีจริงๆ ในโรงเรียน เขาถูกครอบงำโดย Beige Chudongxi ฉันรู้สึกอกหักถึงแม้ว่าประสิทธิภาพของฉันจะสูงขึ้นมาก แต่ฉันก็ยังคิดถึงบ้าน คิดถึงบ้านที่สุดเลย

---

วันนี้เป็นวันเปิดเทอมอย่างเป็นทางการครั้งแรกที่ฉันต้องพิสูจน์:

#ประกาศส่วนตัว

ความรู้ถ่ายทอดพลัง เทคโนโลยีไร้ขอบเขต และวัฒนธรรมเปลี่ยนชีวิต!