Descarga de WeChat_Happy_Running - Descarga del código fuente de WeChat_Happy

WeChat_Happy_Running

Código Fuente de IA

1.0.0

Descargar

#palabradeapertura

Publiqué un artículo de práctica durante las vacaciones de invierno y se volvió viral como se esperaba: "Jian Nian 15: desarrollo del subprograma WeChat (de principio a fin, todos los códigos) --- ejecución de aplicación + reproductor de música". Más tarde, se publicó una versión con corrección de errores. lanzado, que fue inesperado Inesperadamente popular: 18 de enero: desarrollo del subprograma WeChat (de principio a fin, todos los códigos) --- aplicación en ejecución + corrección de errores del reproductor de música Más tarde, se agregó un nuevo módulo, bueno, este también es popular: Desarrollo del miniprograma WeChat (de principio a fin, todos los códigos) --- Módulo recién agregado: funciones de selección y toma de fotografías Ahora que comenzaron las clases, he escrito algo más: desarrollo del miniprograma WeChat (de principio a fin, todo el código) - - [Grabación] recientemente agregada y mejoras en la interfaz de usuario

#text#### 1. Mejoras en la interfaz de usuario

Al principio quería dejar de escribir sobre ello, pero recientemente siento que necesito encontrar algo que hacer, así que también podría escribir sobre ello. Al mismo tiempo, se ajustaron algunos códigos anteriores, como algunas mejoras en el diseño de la interfaz de usuario. Todo el código se ha actualizado en Github, todos pueden consultarlo: https://github.com/HustWolfzzb/WeChat-Fucking_Running.git

La página actualizada es más hermosa. Se ha agregado un nuevo módulo de grabación. Dado que la página principal index.wxml solo puede contener cinco barras de navegación, solo se puede integrar en el último video. De lo contrario, ¡sería molesto no tener dónde ponerlo!

El código actualizado es el siguiente, que es el cambio realizado en el archivo 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'
    }
  },
})

Además, se agregan modificaciones a 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>

Además, lamento decir que se ha creado la función de grabación, pero durante la depuración, la grabación se puede realizar perfectamente, pero cuando se trata del control de reproducción, simplemente hago GG. La API no coopera conmigo en absoluto.

####2. Mejoras en la interfaz de usuario.

La interfaz de usuario siempre ha sido un problema para mí. No puedo evitarlo. Una vez que sale el trastorno obsesivo-compulsivo, no puedo recuperarlo. No reducir el error de tamaño al nivel de píxeles no me da ninguna tranquilidad. Así que esta vez cambié algunos lugares. Entonces me sentí mejor.

El código se actualiza de la siguiente manera:

<música.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>

"música.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;
}

Las mejoras en la página de inicio, ¡creo que lucen geniales! ! Y con la adición de barras de desplazamiento, se pueden desplazar tres imágenes.

"índice.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>

Todavía necesita mejoras. No hay otra manera. Son las 7:34 pm, pero aún no he comido, ¡tengo un poco de hambre! Así que tengo que caminar hacia el este más tarde, durante aproximadamente media hora, y luego ir a mi querido, querido hotel Yunyuan para comer. Si hay pollo estofado y arroz, tendrás suerte. Si no, come una ración. El arroz con pato estofado servirá. .

#Palabras finales

El pequeño programa puede considerarse como un descanso de las vacaciones, pero parece que lo llevé con éxito hasta mi tercer año. La razón principal es que me relajaré si no puedo seguir produciendo, por lo que el ambiente durante las vacaciones de invierno es bastante bueno. En la escuela, estaba dominado por Beige Chudongxi. Me siento desconsolado. Aunque mi eficiencia es mucho mayor, todavía extraño mi hogar. La más nostálgica de todos los tiempos.