小程序 -- 瀑布流 -- 天气预报 --- 音乐播放

 两列布局为例：瀑布流

<view style='display:none'>
<image wx:for = "{{images}}" wx:key = 'id' id="{{item.id}}" src='{{item.pic}}' bindload='onImageLoad'></image>
</view>
<scroll-view scroll-y="true" style='height:{{scrollH}}px;' bindScrolltolower = "loadImages">
    <view style='width:100%'>
        <view class='img-item' style='width:48%;margin:1%;'>
            <view wx:for="{{col1}}" wx:key="id">
                <image src='{{item.pic}}' style='width:100%;height:{{iten,height}}px'></image>
            </view>
        </view>
        <view class='img-item'>
            <view wx:for="{{col2}}" wx:key="id">
                <image src='{{item.pic}}' style='width:100%;height:{{item.height}}px'></image>
            </view>
        </view>
    </view>
</scroll-view>
let col1H = 0;
let col2H = 0;
Page({
  data: {
      scrollH:0,
      col1:[],
      col2:[],
      images:[],
      imgWidth:0,
      loadingCount:0,
  },
  onLoad: function (options) {
      wx:wx.getSystemInfo({
          success: function(res) {
              let ww = res.windowWidth;
              let wh = res.windowHeight;
              let imgWidth = ww * 0.48;
              let scrollH = wh;
              this.setData({
                  scrollH:scrollH,
                  imgWidth:imgWidth
              })
              this.loadImages()
          },
      })
  },
  loadImages:function(){
      let images = [
          {pic: '../../images/1.png', height: 0},
          {pic: '../../images/2.png', height: 0},
          { pic: '../../images/3.png', height: 0 },
          { pic: '../../images/4.png', height: 0 },
      ]
      let baseId = "img-"+(new Data());
      for(let i = 0; i<images.length; i++){
          images[i].id = baseId + "-"+i;
      }
      this.setData({
          images:images,
          loadingCount: images.length
      })
  },
  onImageLoad: function(e){
      console.log(e)
      let imageId = e.currentTarget.id;
      let oImgH = e.detail.height;
      let oImgW = e.detail.width;
      let imgWidth = this.data.imgWidth;
      let scale = imgWidth/oImgW;
      let imgHeight = scale * oImgH;
      let images = this.data.images;
      let imageObj = null;
      for(let i = 0; i<images.length; i++){
          let img = imageId[i];
          if(img.id === imageId){
              imageObj = img;
              break;
          }
      }
      imageObj.height = imgHeight
      let loadingCount = this.data.loadingCount - 1;
      let col1 = this.data.col1;
      let col2 = this.data.col2;
      if(col1H<=col2H){
          col1H += imgHeight;
          col1.push(imageObj);
      }else{
          col2H += imgHeight;
          col2.push(imageObj);
      }
      let data = {
          loadingCount:loadingCount,
          col1 = col1,
          col2 = col2
      }
      if(!loadingCount){
          data.images = []
      }
      this.setData(data)
  }, 
})

天气预报：

<view class="main-container">
    <import src="../templates/today-tpl" />
    <view bindtap="gotoDetail">
        <template is="today-tpl" data="{{city, curWd}}" />
    </view>
    <import src="../templates/index-tpl" />
    <view class="index-content">
        <block wx:for="{{indexs}}" wx:key="item" wx:for-index="idx">
            <template is="index-tpl" data="{{item,idx}}"></template>
        </block>
    </view>
    <import src="../templates/forecast-tpl" />
    <view class="forecast">
        <block wx:for="{{forecast}}" wx:key="item">
            <template is="forecast-tpl" data="{{item}}" />
        </block>
    </view>
</view>

<template name="today-tpl">
    <view class="today">
        <view class="city">{{city}}</view>
        <view class="date">{{curWd.date}} {{curWd.week}}</view>
        <view class="temp">{{curWd.curTemp}}</view>
        <view class="weather">{{curWd.type}} {{curWd.lowtemp}}/{{curWd.hightemp}}</view>
        <view class="wd">{{curWd.wd}}</view>
    </view>
</template>

Page({
    data: {
        weatherApikey: '', //天气apikey，在http://apistore.baidu.com 上申请
        city: '', //城市名称
        areaid: '', //城市对应的id
        curWd: {}, //当天天气情况
        indexs: {}, //当天天气详情说明
        forecast: {} //未来4天的天气情况
    },
    onLoad: function(options) {
        // 生命周期函数--监听页面加载
        this.setData({
            weatherApikey: getApp().globalData.weatherApikey
        });
        this.loadCityName()
    },
    loadCityName: function() {
        wx.getLocation({
            type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
            altitude: true,
            success: function(res) {
                var latitude = res.latitude;
                var longitude = res.longitude;
                //获取城市
                page.loadCity(latitude, longitude);
            },
            fail: function(res) {},
            complete: function(res) {},
        })
    },
    //通过经纬度获取城市
    loadCity: function (latitude, longitude) {
        var page = this;
        //这个key是自己在http://apistore.baidu.com上申请的
        var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL";
        var url = "http://apis.map.qq.com/ws/geocoder/v1/?location=" + latitude + "," + longitude + "&key=" + key + "&get_poi=1";
        wx.request({
            url: url,
            data: {},
            method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            // header: {}, // 设置请求的 header
            success: function (res) {
                // success
                var city = res.data.result.address_component.city;
                city = city.replace("市", ""); //将“市”去掉，要不然取不了天气信息
                page.setData({ city: city });
                page.loadId(city);
            }
        })
    },
    //通过城市名称获取城市的唯一ID
    loadId: function (city) {
        var page = this;
        var url = "http://apis.baidu.com/apistore/weatherservice/citylist";
        wx.request({
            url: url,
            data: {
                cityname: city
            },
            header: {
                apikey: page.data.weatherApikey
            },
            method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            success: function (res) {
                // success
                var cityid = res.data.retData[0].area_id;

                page.setData({ areaid: cityid });
                page.loadWeather(city, cityid);
            }
        })
    },

    //通过城市名称和城市ID获取天气情况
    loadWeather: function (city, areaId) {
        var page = this;
        var url = "http://apis.baidu.com/apistore/weatherservice/recentweathers";
        wx.request({
            url: url,
            data: {
                cityname: city,
                cityid: areaId
            },
            header: {
                apikey: page.data.weatherApikey
            },
            method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            success: function (res) {
                // success
                page.setData({ curWd: res.data.retData.today, indexs: res.data.retData.today.index, forecast: res.data.retData.forecast });
            }
        })
    },
    //事件绑定，跳转到天气详情页面
    gotoDetail: function (event) {
        // console.log(this.data.areaid+"==在这里跳转=="+this.data.city);
        wx.navigateTo({
            url: '../detail/detail?city=' + this.data.city + "&cityid=" + this.data.areaid
        })
    }

})

音乐播放：

<button bindtap='btnPlay'>播放</button>
<button bindtap='btnGetInfo'>状态</button>
<button bindtap='btnPause'>暂停</button>
<button bindtap='btnStop'>停止/button>

Page({
    data: {},
    onLoad: function(options) {
        // 生命周期函数--监听页面加载
        this.btnPlay()
    },
    btnPlay: function() {
        wx.playBackgroundAudio({
            dataUrl: 'https://music.163.com/song?id=1293886117',
            title: '年少有为 -- 李荣浩',
            coverImgUrl: 'http://p1.music.126.net/oOfuEHY_sBxBJrQ98QuEAw==/109951163393738615.jpg?param=50y50',
            success: function(res) {
                console.log(res)
            },
        })
    },
    onReady: function() {
        wx.onBackgroundAudioPlay(function() {
            console.log("播放开始了")
        });
        wx.onBackgroundAudioPause(function() {
            console.log("音乐暂停了")
        })
    },
    btnGetInfo: function() {
        wx.getBackgroundAudioPlayerState({
            success: function(res) {
                console.log(res)
            },
        })
    },
    btnPause: function() {
        wx.pauseBackgroundAudio()
    },
    btnStop: function() {
        wx.stopBackgroundAudio()
    }
})

音乐播放控件：

<audio src='{{src}}' id='myAudio'></audio>
<button type='primary' bindtap='audioPlay'>播放</button>
<button type='primary' bindtap='audioPause'>暂停</button>
<button type='primary' bindtap='audio30'>设置当前播放时间为30秒</button>
<button type='primary' bindtap='audioStart'>回到开头/button>

Page({
    data: {
        src:''
    },
    audioPlay(){
        this.audioCtx = wx.createAudioContext("myAudio")
        this.audioCtx.setSrc('http://p1.music.126.net/oOfuEHY_sBxBJrQ98QuEAw==/109951163393738615.jpg?param=50y50')
        this.audioPlay()
    },
    audioPause(){
        this.audioCtx.play()
    },
    audio30:function(){
        this.audioCtx.seek(30)
    },
    audioStart:function(){
        this.audioCtx.seek(0)
    }
})