首页 » 微信小程序 » 例子小程序 » 正文

官方的文档的进行的微信小程序的改进

开篇语

>寒假发了一篇练手文章,不出意外地火了: 《简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 》 后来又发了BUG修复的版本,出乎意料的火了: 简年18: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复 后来又新增了一个模块,嗯,这个也火了: 微信小程序(有始有终,全部代码)开发--- 新增模块: 图片选取以及拍照功能 现在开学了,我又写了点东西: 微信小程序(有始有终,全部代码)开发--- 新增【录音】以及UI改进

正文

一、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中加入修改:




<!--通过数据绑定的方式动态获取js数据-->


<!--监听按钮-->
<button type="primary" class="button_anniu">点击我选择相册</button>

<button></button>



<button class="button_anniu"> 开始录音 </button>
<button class="button_anniu">  停止录音</button>




>另外,不好意思的声明下:录音功能是做出来了,但是调试的时候,录音是可以完美进行的,但是涉及到播放控制的时候我就直接GG了。API一点都不配合我。

就这三个API 死命的不配和我,恨不得生啖其肉,如果他有

能用,但是之后我就不知道它存哪儿去了!!

二、UI改进

>UI一直是我的心头病,没办法,强迫症一出来,几头牛都拉不回来。不把尺寸搞得误差在像素级根本不能让我心安。所以这次改了几个地方。然后感觉好多了。

>代码更新如下:




















<audio src="{{item.src}}" id="myAudio" controls="true">

<button type="primary" class="button_anniu">Start</button>
<button type="primary" class="button_anniu">Pause</button>
<button type="primary" class="button_anniu">To14s</button>
<button type="primary" class="button_anniu">Stop</button>



<button type="primary" class="button_anniu"> Next </button>
<button type="primary" class="button_anniu">Last</button>

</audio>







《music.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》


    <!--标题-->




        Fucking Running
        The First Program of HustWolf and XNC






                    {{item.name}}















看看效果咯,漂亮啊


>还是需要改进啊。没办法了。我现在是下午七点三十四,但是我还没吃饭,有点饿!所以我待会还要走到东边去,大概半个小时,然后再去我亲爱的,亲爱的韵苑大酒店吃一顿,如果有黄焖鸡米饭就大运临头了,没有的话吃一份卤鸭饭就行了。。

时间

结束语

>小程序算是假期的一个调剂吧,不过,貌似被我成功的带到大三下了。主要是不能持续产出,我会松懈,所以寒假的氛围其实还是蛮好的。在学校就贝格忠东喜支配了。心塞,虽然效率高了不少,但是还是想家了。最想家的一次。


>今天是正式开学的第一天,我得证明下:

我这是自虐。。。每次看到都会想家。。。我不是恋家的人啊

全部功能的展示(还是以前的,这次改动太小了 不截图了)。飞速,可能看不清,如果有兴趣请你看文章!

个人宣言

>知识传递力量,技术无国界,文化改变生活!

下载 (3)

本文共 1 个回复

  • 清道夫卫道士 2018/04/19 17:44

    学长你好,我大二狗,自己的公众号如何能够成为开发小程序的号,必须有营业执照吗?

发表评论