WeChat_Happy_Running Télécharger - WeChat_Happy_Running Téléchargement du code source

WeChat_Happy_Running

Code Source AI

1.0.0

Télécharger

#motd'ouverture

J'ai publié un article pratique pendant les vacances d'hiver, et il est devenu viral comme prévu : "Jian Nian 15 : développement de l'applet WeChat (du début à la fin, tous les codes) --- application en cours d'exécution + lecteur de musique" Plus tard, une version corrigée d'un bug a été publié, ce qui était inattendu Populaire de manière inattendue : 18 janvier : développement de l'applet WeChat (du début à la fin, tous les codes) --- exécution de corrections de bugs de l'application + du lecteur de musique Plus tard, un nouveau module a été ajouté, eh bien, celui-ci est également populaire : Développement du mini programme WeChat (du début à la fin, tous les codes) --- Module nouvellement ajouté : fonctions de sélection d'images et de prise de photos. Maintenant que l'école a commencé, j'ai écrit quelque chose de plus : Développement du mini programme WeChat (du début à la fin, tout le code) - -- Récemment ajouté [Enregistrement] Et améliorations de l'interface utilisateur

#text#### 1. Améliorations de l'interface utilisateur

Au départ, je voulais arrêter d'écrire à ce sujet, mais récemment, j'ai senti que j'avais besoin de trouver quelque chose à faire, alors autant écrire à ce sujet. Dans le même temps, certains codes précédents ont été ajustés, comme certaines améliorations de la conception de l'interface utilisateur. Le code a été entièrement mis à jour sur Github, tout le monde est invité à le consulter : https://github.com/HustWolfzzb/WeChat-Fucking_Running.git

La page mise à jour est plus belle. Un nouveau module d'enregistrement a été ajouté. Étant donné que la page principale index.wxml ne peut contenir que cinq barres de navigation, elle ne peut être intégrée que dans la dernière vidéo. Sinon, ce serait ennuyeux de n'avoir nulle part où le mettre !

Le code mis à jour est le suivant, qui correspond à la modification apportée au fichier 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'
    }
  },
})

De plus, des modifications sont ajoutées à 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>

De plus, je suis désolé de déclarer que la fonction d'enregistrement a été intégrée, mais lors du débogage, l'enregistrement peut être effectué parfaitement, mais en ce qui concerne le contrôle de la lecture, je me contente de GG. L'API ne coopère pas du tout avec moi.

####2. Améliorations de l'interface utilisateur

L'assurance-chômage a toujours été un problème pour moi. Je n'y peux rien. Une fois que le trouble obsessionnel-compulsif est apparu, je ne peux plus le récupérer. Ne pas faire d'erreur de taille au niveau des pixels ne me donne pas du tout la tranquillité d'esprit. Alors cette fois, j'ai changé quelques places. Puis je me suis senti mieux.

Le code est mis à jour comme suit :

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

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

Les améliorations apportées à la page d'accueil, je les trouve superbes ! ! Et avec l’ajout de barres de défilement, trois images peuvent défiler.

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

Il faut encore des améliorations. Il n'y a pas d'autre moyen. Il est maintenant 19h34, mais je n'ai pas encore mangé, j'ai un peu faim ! Je dois donc marcher vers l'est plus tard, pendant environ une demi-heure, puis aller à mon cher, cher hôtel Yunyuan pour un repas. S'il y a du poulet braisé et du riz, vous aurez de la chance. Sinon, prenez-en une portion. Du riz au canard braisé fera l'affaire. .

#MotsFin

Le petit programme peut être considéré comme une pause pendant les vacances, mais il semble que je l'ai mené à bien pendant ma première année. La raison principale est que je me détendrai si je ne peux pas continuer à produire, donc l'ambiance pendant les vacances d'hiver est en fait plutôt bonne. À l'école, il était dominé par Beige Chudongxi. J'ai le cœur brisé. Même si mon efficacité est bien supérieure, la maison me manque toujours. Le plus grand mal du pays de tous les temps.