Unduhan WeChat_Happy_Running - Unduhan kode sumber WeChat_Happy

WeChat_Happy_Running

Kode Sumber AI

1.0.0

Unduh

#katapembuka

Saya memposting artikel latihan selama liburan musim dingin, dan menjadi viral seperti yang diharapkan: "Jian Nian 15: pengembangan applet WeChat (mulai berakhir, semua kode) --- menjalankan aplikasi + pemutar musik" Kemudian, versi perbaikan bug adalah dirilis, yang tidak terduga Populer secara tak terduga: 18 Januari: Pengembangan applet WeChat (mulai berakhir, semua kode)--- Menjalankan perbaikan bug Aplikasi + pemutar musik Kemudian, modul baru ditambahkan, nah, yang ini juga populer: Pengembangan Program Mini WeChat (mulai dari akhir, semua kode) --- Modul yang baru ditambahkan: Fungsi pemilihan gambar dan pengambilan foto Sekarang sekolah telah dimulai, saya telah menulis sesuatu yang lebih: Pengembangan Program Mini WeChat (mulai dari akhir, semua kode) - -- [Rekaman ] yang baru ditambahkan dan peningkatan UI

#teks#### 1. Peningkatan UI

Awalnya aku ingin berhenti menulis tentang hal itu, namun akhir-akhir ini aku merasa perlu menemukan sesuatu untuk dilakukan, jadi sebaiknya aku menulis tentang hal itu. Pada saat yang sama, beberapa kode sebelumnya telah disesuaikan, seperti beberapa peningkatan desain UI. Semua kode telah diperbarui di Github, semua orang boleh memeriksanya: https://github.com/HustWolfzzb/WeChat-Fucking_Running.git

Halaman yang diperbarui lebih indah. Modul perekaman baru telah ditambahkan. Karena halaman utama index.wxml hanya dapat menampung lima bilah navigasi, maka hanya dapat diintegrasikan ke dalam video terakhir. Kalau tidak, akan sangat menjengkelkan jika tidak punya tempat untuk menyimpannya!

Kode yang diperbarui adalah sebagai berikut, yaitu perubahan yang dilakukan pada file 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'
    }
  },
})

Selain itu, modifikasi ditambahkan ke 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>

Selain itu, saya minta maaf untuk menyatakan bahwa fungsi perekaman telah dibangun, tetapi ketika debugging, perekaman dapat dilakukan dengan sempurna, tetapi ketika datang ke kontrol pemutaran, saya hanya GG. API sama sekali tidak bekerja sama dengan saya.

####2. Peningkatan UI

UI selalu menjadi masalah bagi saya. Saya tidak bisa menahannya. Begitu gangguan obsesif-kompulsif muncul, saya tidak bisa mendapatkannya kembali. Tidak memperkecil kesalahan ukuran hingga ke tingkat piksel sama sekali tidak membuat saya tenang. Jadi kali ini saya mengubah beberapa tempat. Kemudian saya merasa lebih baik.

Kode diperbarui sebagai berikut:

<musik.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>

《musik.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;
}

Peningkatan pada halaman beranda, menurut saya tampak hebat! ! Dan dengan tambahan scroll bar, tiga gambar dapat di-scroll keluar.

"indeks.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>

Masih perlu perbaikan. Tidak ada cara lain. Sekarang sudah jam 19:34, tapi saya belum makan, saya sedikit lapar! Jadi saya harus berjalan ke timur nanti, sekitar setengah jam, lalu pergi ke Hotel Yunyuan sayang untuk makan. Nasi bebek rebus bisa digunakan. .

#Kata Akhir

Program kecil-kecilan ini bisa dikatakan sebagai jeda dari liburan, namun sepertinya saya berhasil melaksanakannya di tahun pertama saya. Alasan utamanya adalah saya akan santai jika tidak bisa terus berproduksi, jadi suasana saat liburan musim dingin sebenarnya cukup bagus. Di sekolah, dia didominasi oleh Beige Chudongxi. Saya merasa patah hati. Meskipun efisiensi saya jauh lebih tinggi, saya tetap rindu rumah. Yang paling rindu kampung halaman.