摘要：潤物無聲，做一個有個格調(diào)的小程序快應(yīng)用現(xiàn)在可謂是家喻戶曉，也更加密切的滲透入我們的生活中，筆者也算是個愛折騰的人，俗話說的好嘛，不折騰，不前端當(dāng)然是筆者自己的小心聲。于是在平日里忙碌的工作之余抽出來時(shí)間搞點(diǎn)事情來寫一個屬于自己的貼身小天氣。

———— 潤物無聲，做一個有個格調(diào)的coder
小程序、快應(yīng)用現(xiàn)在可謂是家喻戶曉，也更加密切的滲透入我們的生活中，筆者也算是個愛折騰的人，俗話說的好嘛，“不折騰，不前端“（當(dāng)然是筆者自己的小心聲）。于是在平日里忙碌的工作之余抽出來時(shí)間搞點(diǎn)事(si)情,來寫一個屬于自己的貼身小天氣。說時(shí)遲那時(shí)快，這就來了...

經(jīng)過兩三年的發(fā)展，小程序的地位也步步高升，由騰訊領(lǐng)隊(duì)的騰訊小程序，再到后來的支付寶，美團(tuán)，頭條等也都相應(yīng)推出自家的小程序平臺，都想順著潮流抓住流量分一杯羹，可謂是兵家必爭之地。大環(huán)境的改變，為了提高小程序的快速迭代和多人合作開發(fā)的效率，也使得各大廠商都開源了自己的小程序框架，mpvue、wepy、MINA、Taro等相信大家也比較熟悉了。而小程序的社區(qū)也變得跟豐富健壯，也衍生出很多精美的UI框架。有興趣的可以自行去相應(yīng)的官網(wǎng)了解詳情。

雖然上面介紹了那么多的框架，而本次筆者并沒有使用框架，而是用原生的小程序來開發(fā)今天的主角，也希望能夠用原始的方式來給那些和筆者一樣的剛剛?cè)腴T的小程序開發(fā)者一些幫助，也將自己所學(xué)的記錄下來。畢竟原生才是最底層的基礎(chǔ)，所有的框架都是在原生的基礎(chǔ)上開花結(jié)果的，這樣才能以不變應(yīng)萬變(吼吼~)。筆者水平有限，有錯誤或者解釋不當(dāng)?shù)牡胤竭€望各位看官多多包涵。

項(xiàng)目源碼 潤物無聲github

在定位功能中，本程序用到騰訊地圖的api
相應(yīng)的天氣接口中，本程序用到的是和風(fēng)天氣提供的api

兩者都需要到官網(wǎng)中注冊開發(fā)者賬號，通過注冊后得到的appKey來請求我們需要的數(shù)據(jù)，詳細(xì)注冊步驟請自行度娘
由于需要用到定位功能，而小程序本身的getLocation方法獲取到的是當(dāng)前位置的坐標(biāo)：

    wx.getLocation({
      type: "gcj02", // 返回坐標(biāo)的格式
      success: res => {
          // 此處只能獲取到當(dāng)前位置的經(jīng)緯度（坐標(biāo)）
      },
    })

所以需要利用騰訊地圖Api，通過坐標(biāo)點(diǎn)反向獲得該地點(diǎn)的詳細(xì)信息。

基本配置

在app.json中是對整個小程序的一些基本配置

    {
    "pages": [
        "pages/index/index" // 當(dāng)前小程序的主入口頁面
    ],
    // 主窗口的一些配置，如下，對背景顏色和小程序頂部的導(dǎo)航欄的樣式進(jìn)行了配置
    "window": {
        "backgroundColor": "#A7CAD3", 
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#A7CAD3",
        "navigationBarTitleText": "蝸牛天氣",
        "navigationBarTextStyle": "black",
        "navigationStyle":"custom"
    },
    "permission": {
        "scope.userLocation": {
        "desc": "蝸牛天氣嘗試獲取您的位置信息" // 詢問用戶是否可以得到獲取位置權(quán)限的提示文字
        }
    }
}

接下來，我們就來一步一步的實(shí)現(xiàn)這個小程序吧~~

由于沒有UI，再加上筆者扭曲的審美能力（坐在屏幕前開始愣神，陷入沉思...）,所以還望各位看官多忍耐筆者又想又借鑒的界面成果...看來以后要多加強(qiáng)這方面的能力(haha~)

好了言歸正傳，首先，準(zhǔn)備用一個頁面來解決戰(zhàn)斗，那就是各位看到以上的這個頁面(都說了是‘小天氣’嘛)，頁面一共分為五個部分，實(shí)時(shí)天氣、24小時(shí)內(nèi)天氣情況、未來一星期內(nèi)天氣情況、今天日落日出風(fēng)向降雨等相關(guān)信息和天氣的生活指數(shù)，這五個部分組成了整個頁面，其對應(yīng)的相應(yīng)布局見一下代碼

    
      
      
        
          
          {{position}}
        
        
        
        
        
        ...  
        
        
        
          
            
              {{item.time}}點(diǎn)
              
                
              
              {{item.tmp}}°
            
          
        
      
        
      
        
          
            {{item.weekday}}
            {{item.date}}
          
          {{item.cond_txt_d}}
          
            
          
          {{item.tmp_min}}~{{item.tmp_max}}°
          
            
          
          {{item.cond_txt_n}}
          
            {{item.wind_dir == "無持續(xù)風(fēng)向" ? "無" : item.wind_dir}}
            {{item.wind_sc}}級
          
        

      
        
      
        ...
      
        
      
        
          {{lifeEnum[item.type]}}
          {{item.brf}}
        
      
    

具體 css 樣式，詳見 蝸牛小天氣 源碼

注意：(筆者入坑，一開始使用的縱向的scroll-view，后來無奈的用了原來頁面的滾動)
scroll-view: 具體屬性參考小程序官方文檔
在小程序中，內(nèi)部為我們提供了scroll-view這個頁面滾動的組件，對性能進(jìn)行了一些優(yōu)化，方便我們的使用。與此同時(shí)，也會有一些小坑

在使用scroll-view是，如果是縱向（Y軸）滾動，scroll-y屬性，則必須為此scroll-view設(shè)置一個固定(明確)的高
請勿在scroll-view組件標(biāo)簽內(nèi)使用 textarea、map、canvas、video等組件
在使用了scroll-view組件時(shí)會阻止頁面的回彈效果，也就是在scroll-view中滾動，無法觸發(fā)onPullDownRefresh方法
如果想使用原生的下拉刷新（非自定義）或者雙擊頂部頁面回滾到頁面頂部，請不要使用scroll-view。

相信各位看官發(fā)現(xiàn)了以上代碼中有一個 的標(biāo)簽，此標(biāo)簽為一個圖標(biāo)組件，因?yàn)槲伵Ｌ鞖庵杏玫降膱D標(biāo)也比較多。接下來我們說明下有關(guān)組件的封裝事宜。為了提高代碼的復(fù)用性和易維護(hù)性，以及多人合作開發(fā)的效率，組件化似乎是一個很好的解決辦法，在微信小程序中，每個頁面由四個文件組成

*.wxml ----文檔結(jié)構(gòu) => 等同于html

*.js ----處理業(yè)務(wù)邏輯

*.json ----當(dāng)前頁面或組件的一些配置和選項(xiàng)

*.wxss ----樣式文件 => 等同于css

而對于本小程序中組件來說

// 小程序中的組件，通過調(diào)用Component方法，將組件的邏輯處理部分，屬性以及方法（生命周期）等一對象的方式傳入Component方法中
Component({
    properties: {
      type: {
        type: String, // type屬性的類型
        value: "" // 默認(rèn)值
      }
    }
  });

使用了Component構(gòu)造器，通過參數(shù)指定組件的屬性，數(shù)據(jù)，方法以及生命周期中的一些方法，在此組件中定義了接受的type屬性，類型為字符串，其默認(rèn)值為空字符串。

{
    "component": true // 配置，當(dāng)前為組件
}

// CSS 部分略過...

就這樣，一個簡單的icon圖標(biāo)組件就封裝好了，是不是很簡單啊。封裝是封裝好了，那么我們怎么調(diào)用這個組件呢，是不是很類似于Vue呢，沒錯，只需要在你調(diào)用的頁面中注冊一下即可

// 當(dāng)前想要調(diào)用的頁面的*.json文件中，如下
{
  "enablePullDownRefresh": true, // 此項(xiàng)與組件無關(guān)，此項(xiàng)為是否用小程序本身的下拉刷新功能
  "usingComponents": {
    "myicon": "../../components/icon/index" // 調(diào)用，注冊icon組件
  }
}

一開始就說到了需要使用騰訊地圖API的appkey還有和風(fēng)天氣API的appkey，筆者是將appkey配置在了config.js中，看官只需將自己相應(yīng)的appkey值替換即可，由于appkey是私密的，此處就不公開了，還望諒解。

// config.js
export default {
    MAP_API_KEY: "XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX", // 騰訊地圖key
    WEATHER_API_KEY: "XXXXXXXXXXXXXXXX" // 和風(fēng)天氣key
}

所有數(shù)據(jù)的接口，都定義在了api.js文件中，此處沒什么好說的，看官自行通過接口文檔查詢。接口均采用回調(diào)的方式，筆者并沒有封裝成Promise的方式，如果有興趣可自行更改。

// 引入config，為了后面的key
import config from "../uitl/config"
// 地圖key
const mapKey = config.MAP_API_KEY
// 和風(fēng)天氣key
const weatherKey = config.WEATHER_API_KEY
// map url
const locationUrl = "https://apis.map.qq.com/ws/geocoder/v1/"
//天氣url
const weatherUrl = "https://free-api.heweather.net/s6/weather/forecast"
//24小時(shí)內(nèi) 每小時(shí)
const everyhoursUrl = "https://api.heweather.net/s6/weather/hourly"
// 一周內(nèi)
const everyWeekUrl = "https://api.heweather.net/s6/weather/forecast"
//空氣質(zhì)量
const airQualityUrl = "https://api.heweather.net/s6/air/now"
// 實(shí)況天氣
const weatherLive = "https://api.heweather.net/s6/weather/now"
// 生活指數(shù)
const lifeStyle = "https://api.heweather.net/s6/weather/lifestyle"
// 根據(jù)當(dāng)前位置的坐標(biāo)反得到當(dāng)前位置的詳細(xì)信息
// lat,lon 為經(jīng)緯度坐標(biāo)
export const getPosition = (lat, lon, success = {}, fail = {}) => {
  return wx.request({
    url: locationUrl,
    header: {
      "Content-Type": "application/json"
    },
    data: {
      location: `${lat},${lon}`,
      key: mapKey,
      get_poi: 0
    },
    success,
    fail
  })
}
// 根據(jù)location得到天氣信息
// lat,lon 為經(jīng)緯度坐標(biāo)
export const getWeaterInfo = (lat, lon, success = {}, fail = {}) => {
  return wx.request({
    url: weatherUrl,
    header: {
      "Content-Type": "application/json"
    },
    data: {
      location: `${lat},${lon}`,
      lang: "zh",
      unit: "m",
      key: weatherKey
    },
    success,
    fail
  })
}
// 根據(jù)location信息得到24小逐小時(shí)天氣情況
// lat,lon 為經(jīng)緯度坐標(biāo)
export const getEveryHoursWeather = (lat, lon, success = {}, fail = {}) => {
  return wx.request({
    url: everyhoursUrl,
    header: {
      "Content-Type": "application/json"
    },
    data: {
      location: `${lat},${lon}`,
      lang: "zh",
      unit: "m",
      key: weatherKey
    },
    success,
    fail
  })
}
...
... // 其他接口類似
...
}

首先，當(dāng)初次加載頁面時(shí)，大體流程為首先通過定位獲取位置，然后通過位置信息去得到我們需要的每一項(xiàng)天氣信息，最后將天氣信息渲染后頁面中相應(yīng)的位置
具體流程：

獲取位置經(jīng)緯度

通過經(jīng)緯度逆向獲得位置信息

通過位置信息獲取天氣信息

獲取實(shí)時(shí)天氣信息

判斷是否為白天和晚上（改變頁面背景）--該小程序中定義早上6點(diǎn)到晚上18點(diǎn)為淺色背景，其他時(shí)間為深色背景

判斷當(dāng)前天氣的情況(雨或雪的大小),在實(shí)況天氣界面中通過canvas模擬雨雪的動畫

獲取24小時(shí)天氣信息

獲取一星期的天氣信息

獲取生活指數(shù)信息

當(dāng)通過手動改變位置信息時(shí)，按順序重復(fù)執(zhí)行以上步驟

通過wx.getLocation原生方法獲取經(jīng)緯度信息，在經(jīng)過騰訊地圖api通過經(jīng)緯度逆向獲取到相應(yīng)的位置信息，對于這個項(xiàng)目來說獲取位置信息是最重要的信息，故我們希望在頁面一加載的時(shí)候就執(zhí)行方法獲取，然后『onLoad』方法可以幫助我們解決，這個方法就是小程序的生命周期函數(shù)--監(jiān)聽頁面加載，此方法會在頁面剛加載的時(shí)候（document文檔結(jié)構(gòu)渲染完成后）執(zhí)行。

小程序頁面（Page）的生命周期函數(shù)：

以下為獲取位置信息代碼：

    // onLoad
    onLoad: function () {
        ...
        ...
        this.getPositon() // 調(diào)用獲取位置信息
    }
    // 原生方法獲取經(jīng)緯度信息
    getPosition: function () {
        wx.getLocation({
            type: "gcj02",
            success: this.updateLocation, // 成功會掉  updataLocation 方法為更新位置
            fail: err => {
                console.log(err)
            }
        })
    }
    // 更新位置信息
    updateLocation: function(res) {
        ...
        ...
        let {latitude: x,longitude: y,name} = res;
        let data = {
            location: {
                x,
                y,
                name: name || "北京市"
            },
            ...
            ...
        };
        this.setData(data); // 設(shè)置page中data對象中的屬性
        // 通過經(jīng)緯度逆向獲得位置信息
        this.getLocation(x, y, name);
  }
  // 逆向獲取位置信息
  getLocation: function(lat, lon, name) {
    wx.showLoading({
      title: "定位中",
      mask: true
    })
    // 騰訊地圖api接口
    getPosition(lat, lon, (res) => {
        if (res.statusCode == 200) {
            let response = res.data.result
            let addr = response.formatted_addresses.recommend || response.rough
            this.setData({
                position: addr // 賦值給 data對象中的相應(yīng)屬性
            })
            wx.hideLoading()
            this.getData(lat, lon);
        }
        }, (err => {
        console.log(err)
        wx.hideLoading()
        }))
  },
    // 當(dāng)用戶點(diǎn)擊顯示定位處的view時(shí)，會調(diào)用原生的chooseLocation方法，內(nèi)部調(diào)用選擇位置頁面
    chooseLocation: function() {
        wx.chooseLocation({
            success: res => {
                let {latitude,longitude} = res
                let {x,y} = this.data.location
                if (latitude == x && longitude == y) {

                } else {
                    this.updateLocation(res)
                }
            }
        })
    },

setData方法

上面代碼中兩次用到了setData方法，該方法接受一個對象，對象中的屬性為需要改變的數(shù)據(jù)，同時(shí)接受一個callback函數(shù)，用于通過改變數(shù)據(jù)更新頁面渲染完成之后的回調(diào)。我們來看看data的作用。

    page({
        data: {
            backgroundColor："red",
            fontSize: "20",
            ...
            ...
        }
    })

在page中，data中的屬性是連接邏輯層和視圖層的一個橋梁，也就是說我們可以通過js代碼的邏輯來控制data中的屬性的值，而頁面中的一部分顯示內(nèi)容是根據(jù)data中的屬性的值而變化。這也就是我們所說的mvvm模型，我們只需把重心放在js邏輯層，而無需去頻繁的手動的操作視圖層。了解了data的作用，再來說setData，setData就是在js邏輯層中去改變和設(shè)置data中的屬性的值，從而使頁面得到響應(yīng)。

    ...
    this.setData({
        backgroundColor: "green" // 改變背景顏色屬性，視圖中以來此屬性的會將顏色變成綠色
    })
    ...

注意：

直接修改this.data的值，而不是通過調(diào)用this.setData()方法，是無法成功改變頁面的狀態(tài)的
僅僅支持JSON化的數(shù)據(jù)（key：value）
單詞設(shè)置的值不能超過1024K，所以使用的時(shí)候盡量不要一次設(shè)置過多的數(shù)據(jù)
不要把data中的任何一項(xiàng)value值設(shè)置成undefined，否則這一項(xiàng)將不能被設(shè)置，也可能會有其他問題
不要頻繁的去調(diào)用this.setData()方法去設(shè)置同一個值或者多個值，比如通過在循環(huán)中調(diào)用this.setData(),這樣會導(dǎo)致性能損耗

通過上面獲得到的位置信息，用來調(diào)用相應(yīng)的接口獲得當(dāng)前位置的天氣。方法接口已在前面封裝好，直接調(diào)用然后通過對response進(jìn)行過濾或者重組等來滿足當(dāng)前的應(yīng)用，最后通過this.setData()方法去更新數(shù)據(jù)是頁面得到響應(yīng)。

getWeather(lat, lon) // lat, lon 為當(dāng)前位置的經(jīng)緯度
getAir(lat, lon)
getHourWeather(lat, lon)
getWeatherForWeek(lat, lon)
getLifeIndex(lat, lon)

以上方法不在一一列舉其中數(shù)據(jù)處理的過程，可自行查看源碼 詳見 蝸牛小天氣 源碼

關(guān)于canvas畫出模擬雨和雪的粒子動畫效果

粒子動畫在現(xiàn)在越來越多的項(xiàng)目中被用到。從靜態(tài)到動態(tài)最后再到仿真效果更好的視覺體驗(yàn)，也是人們在視覺上追求極致的體驗(yàn)。我們通過粒子，也就是通過點(diǎn)和線，來模擬出雨和雪的效果。通過小程序中的canvas畫布來畫出我們想要的效果。
實(shí)現(xiàn)原理：

首先我們通過點(diǎn)和線來模擬雨滴下落和雪花飄落

我們通過在同一時(shí)間同一塊區(qū)域(也就是此小程序頁面中實(shí)況天氣的區(qū)域)中雨滴或雪花的多少來表示大小

構(gòu)造一個總的Weather基類，來設(shè)置畫布的width，height，以及雨滴或雪花的數(shù)量，同時(shí)會有兩個Start和Stop方法（也就是開始和停止方法）

構(gòu)造一個Rain類和一個Snow類，都繼承自Weather類，Rain和Snow都有自己私有的 _init(初始化), _drawing（畫）, _update（更新畫布）三個方法來控制Rain和Snow的動作

Weather類是一個基類，主要處理畫布的一些信息，例如width，height，定時(shí)器，以及當(dāng)前動畫的狀態(tài)（status）等

    const STOP_ANIMATION = "stop"
    const START_ANIMATION = "start"

    class Weather {
        constructor(context, width, height, option = {}) {
            this.opt = option || {}
            this.context = context
            this.timer = null
            this.status = STOP_ANIMATION
            this.width = width
            this.height = height
            this._init()
        }
        // 實(shí)例調(diào)用此方法，開始在畫布上畫
        start() {
            if(this.status !== START_ANIMATION) {
                this.status = START_ANIMATION
                this.timer = setInterval(() => {
                    this._drawing()
                }, 30)
            return this
            }
        }
        stop() {
            this.status = STOP_ANIMATION
            clearInterval(this.timer)
            this.timer = null
            return this
        }
    }

    export default Weather

Rain類繼承自Weather類，通過_init方法和父類中畫布參數(shù)，以及option參數(shù)中的counts(雨滴數(shù)量)來初始化。

import Weather from "./Weather.js"
class Rain extends Weather {
    // 初始化
  _init() {
    this.context.setLineWidth(2)
    this.context.setLineCap("round")
    let height = this.height
    let width = this.width
    let counts = this.opt.counts || 100
    let speedCoefficient = this.opt.speedCoefficient
    let speed = speedCoefficient * height
    this.animationArray = []
    let arr = this.animationArray

    for (let i = 0; i < counts; i++) {
      let d = {
        x: Math.random() * width,
        y: Math.random() * height,
        len: 2 * Math.random(),
        xs: -1,
        ys: 10 * Math.random() + speed,
        color: "rgba(255,255,255,0.1)"
      }
      arr.push(d)
    }
  }
 // 開始畫
  _drawing() {
    let arr = this.animationArray
    let ctx = this.context
    ctx.clearRect(0, 0, this.width, this.height)
    for (let i = 0; i < arr.length; i++) {
      let s = arr[i]
      ctx.beginPath()
      ctx.moveTo(s.x, s.y)
      ctx.lineTo(s.x + s.len * s.xs, s.y + s.len * s.ys)
      ctx.setStrokeStyle(s.color)
      ctx.stroke()
    }
    ctx.draw()
    return this.update()
  }
// 更新畫布
  update() {
    let width = this.width
    let height = this.height
    let arr = this.animationArray
    for (let i = 0; i < arr.length; i++) {
      let s = arr[i]
      s.x = s.x + s.xs
      s.y = s.y + s.ys
      if (s.x > width || s.y > height) {
        s.x = Math.random() * width
        s.y = -10
      }
    }
  }
}

export default Rain

Snow類繼承自Weather類，通過_init方法和父類中畫布參數(shù)，以及option參數(shù)中的counts(雪花數(shù)量)來初始化。

import Weather from "./Weather.js"
class Snow extends Weather {
    // 初始化
  _init() {
    let {
      width,
      height
    } = this
    console.log(width)
    let colors = this.opt.colors || ["#ccc", "#eee", "#fff", "#ffffd"]
    let counts = this.opt.counts || 100

    let speedCoefficient = this.opt.speedCoefficient || 0.03
    let speed = speedCoefficient * height * 0.15

    let radius = this.opt.radius || 2
    this.animationArray = []
    let arr = this.animationArray

    for (let i = 0; i < counts; i++) {
      arr.push({
        x: Math.random() * width,
        y: Math.random() * height,
        ox: Math.random() * width,
        ys: Math.random() + speed,
        r: Math.floor(Math.random() * (radius + 0.5) + 0.5),
        color: colors[Math.floor(Math.random() * colors.length)],
        rs: Math.random() * 80
      })
    }
    console.log(arr)
  }
  // 開始畫
  _drawing() {
    let arr = this.animationArray
    let context = this.context
    context.clearRect(0, 0, this.width, this.height)
    for (let i = 0; i < arr.length; i++) {
      let {
        x,
        y,
        r,
        color
      } = arr[i]
      context.beginPath()
      context.arc(x, y, r, 0, Math.PI * 2, false)
      context.setFillStyle(color)
      context.fill()
      context.closePath()
    }

    context.draw()
    this._update()
  }
  // 更新畫布
  _update() {
    let {
      width,
      height
    } = this
    let arr = this.animationArray
    let v = this.opt.speedCoefficient / 10
    for (let i = 0; i < arr.length; i++) {
      let p = arr[i]
      let {
        ox,
        ys
      } = p
      p.rs += v
      p.x = ox + Math.cos(p.rs) * width / 2
      p.y += ys
      if (p.x > width || p.y > height) {
        p.x = Math.random() * width
        p.y = -10
      }
    }
  }
}

export default Snow

結(jié)束?。?！

到此，蝸牛小天氣就開發(fā)完成了，希望對各位有幫助。
希望在閱讀的同時(shí)還請看官別忘了給一個大大的贊