【程序人生 編者按】新人如何入門小程序？不妨嘗試做一個實用性強(qiáng)的天氣應(yīng)用小程序吧。下面是作者只用了兩天時間寫的已上線天氣小程序，一起來學(xué)學(xué)如何做的。 前期準(zhǔn)備 天氣數(shù)據(jù)因為這是個人的DEMO，開發(fā)前就決定選擇免費(fèi)的天氣數(shù)據(jù)（個人開發(fā)免費(fèi)），我選擇了百度地圖開放平臺的天氣數(shù)據(jù)，正好也提供了小程序?qū)?yīng)的 SDK，可能相比于其他的天氣 API，百度返回的數(shù)據(jù)偏少：例如當(dāng)天 PM2.5、當(dāng)天和未來三天數(shù)據(jù)、當(dāng)天生活指數(shù)，但是對于一款簡單的天氣應(yīng)用小程序來說也夠了。 地理編碼獲取天氣數(shù)據(jù)默認(rèn)返回當(dāng)前城市的天氣數(shù)據(jù)，如果要獲取其他的城市的天氣數(shù)據(jù)，需要傳入經(jīng)緯度。為了獲取其他城市的經(jīng)緯度，這里使用的地圖的地理編碼接口，輸入城市名，輸出經(jīng)緯度，然后調(diào)用獲取天氣數(shù)據(jù) API 即可。 運(yùn)行前準(zhǔn)備
具體實現(xiàn)該應(yīng)用有五個頁面：首頁、城市選擇頁、設(shè)置頁、關(guān)于頁、系統(tǒng)信息頁（展示頁）。分別是這樣實現(xiàn)的： 首頁 從上到下依次是：其他城市天氣搜索、當(dāng)前城市數(shù)據(jù)展示、當(dāng)天和未來三天天氣數(shù)據(jù)展示、當(dāng)天生活指數(shù)展示、footer。下拉刷新會刷新當(dāng)前地區(qū)的天氣數(shù)據(jù)。其中，頂部城市天氣搜索和生活指數(shù)可以在設(shè)置中隱藏。屏幕右下角是一個可以移動的懸浮球菜單，點(diǎn)擊后會彈出城市選擇、設(shè)置、關(guān)于頁面的入口。背景色默認(rèn)是 #40a7e7 純色，可在設(shè)置中更換背景圖，未來三天天氣預(yù)報和生活指數(shù)分別添加了透明的黑色背景。最終實現(xiàn)圖如下： 主頁面 先定義一個方法獲取當(dāng)前地區(qū)的天氣數(shù)據(jù)： init(params) { let that = this let BMap = new bmap.BMapWX({ ak: globalData.ak, }) BMap.weather({ location: params.location, fail: that.fail, success: that.success, })}, ak 請?zhí)鎿Q為自己的 ak，因為需要獲取用戶的地理位置，所以在 fail 的回調(diào)中需要處理用戶拒絕獲取地理位置的邏輯。這里處理為：提示打開地理位置授權(quán)，3000ms 后 wx.openSetting() 跳轉(zhuǎn)到小程序設(shè)置頁，如下： fail (res) { wx.stopPullDownRefresh() let errMsg = res.errMsg || '' // 拒絕授權(quán)地理位置權(quán)限 if (errMsg.indexOf('deny') !== -1 || errMsg.indexOf('denied') !== -1) { wx.showToast({ title: '需要開啟地理位置權(quán)限', icon: 'none', duration: 3000, success (res) { let timer = setTimeout(() => { clearTimeout(timer) wx.openSetting({}) }, 3000) }, }) } else { wx.showToast({ title: '網(wǎng)絡(luò)不給力，請稍后再試', icon: 'none', }) }},獲取到用戶的地理位置后，執(zhí)行 success： success (data) { wx.stopPullDownRefresh() let now = new Date() // 存下來源數(shù)據(jù) data.updateTime = now.getTime() data.updateTimeFormat = utils.formatDate(now, 'MM-dd hh:mm') let results = data.originalData.results[0] || {} data.pm = this.calcPM(results['pm25']) // 當(dāng)天實時溫度 data.temperature = `${results.weather_data[0].date.match(/\d+/g)[2]}` wx.setStorage({ key: 'cityDatas', data: data, }) this.setData({ cityDatas: data, })}, 看一下返回的天氣數(shù)據(jù)格式： { 'error': 0, 'status': 'success', 'date': '2018-06-29', 'results': [ { 'currentCity': '北京市', 'pm25': '55', 'index': [ { 'des': '天氣炎熱，建議著短衫、短裙、短褲、薄型T恤衫等清涼夏季服裝。', 'zs': '炎熱', 'tipt': '穿衣指數(shù)', 'title': '穿衣' }, { 'des': '較適宜洗車，未來一天無雨，風(fēng)力較小，擦洗一新的汽車至少能保持一天。', 'zs': '較適宜', 'tipt': '洗車指數(shù)', 'title': '洗車' }, { 'des': '各項氣象條件適宜，發(fā)生感冒機(jī)率較低。但請避免長期處于空調(diào)房間中，以防感冒。', 'zs': '少發(fā)', 'tipt': '感冒指數(shù)', 'title': '感冒' }, { 'des': '天氣較好，無雨水困擾，但考慮氣溫很高，請注意適當(dāng)減少運(yùn)動時間并降低運(yùn)動強(qiáng)度，運(yùn)動后及時補(bǔ)充水分。', 'zs': '較不宜', 'tipt': '運(yùn)動指數(shù)', 'title': '運(yùn)動' }, { 'des': '屬中等強(qiáng)度紫外線輻射天氣，外出時建議涂擦SPF高于15、PA+的防曬護(hù)膚品，戴帽子、太陽鏡。', 'zs': '中等', 'tipt': '紫外線強(qiáng)度指數(shù)', 'title': '紫外線強(qiáng)度' } ], 'weather_data': [ { 'date': '周五 06月29日 (實時：34℃)', 'dayPictureUrl': 'http://api.map.baidu.com/images/weather/day/duoyun.png', 'nightPictureUrl': 'http://api.map.baidu.com/images/weather/night/qing.png', 'weather': '多云轉(zhuǎn)晴', 'wind': '東南風(fēng)微風(fēng)', 'temperature': '38 ~ 25℃' }, { 'date': '周六', 'dayPictureUrl': 'http://api.map.baidu.com/images/weather/day/duoyun.png', 'nightPictureUrl': 'http://api.map.baidu.com/images/weather/night/duoyun.png', 'weather': '多云', 'wind': '東南風(fēng)微風(fēng)', 'temperature': '36 ~ 23℃' }, { 'date': '周日', 'dayPictureUrl': 'http://api.map.baidu.com/images/weather/day/qing.png', 'nightPictureUrl': 'http://api.map.baidu.com/images/weather/night/qing.png', 'weather': '晴', 'wind': '東南風(fēng)微風(fēng)', 'temperature': '35 ~ 23℃' }, { 'date': '周一', 'dayPictureUrl': 'http://api.map.baidu.com/images/weather/day/qing.png', 'nightPictureUrl': 'http://api.map.baidu.com/images/weather/night/duoyun.png', 'weather': '晴轉(zhuǎn)多云', 'wind': '南風(fēng)微風(fēng)', 'temperature': '35 ~ 25℃' } ] } ]}success 里緩存了最新一次獲取的天氣數(shù)據(jù)+更新的時間 cityDatas，小程序的模板里無法使用方法，所以數(shù)據(jù)需要在 js 里面先格式化。 calcPM 用來計算當(dāng)前 PM2.5 的質(zhì)量，返回“優(yōu)良差”類似字樣，范圍標(biāo)準(zhǔn)可自行搜索。當(dāng)天的實時溫度并沒有給出獨(dú)立的字段，而是混在了 wearther_data[0] 的 data 字段里：'date': '周五 06月29日 (實時：34℃)'，需要自行提取。返回的天氣 icon 和色調(diào)不搭，就沒有使用。其他的數(shù)據(jù)按照按照我們要顯示的格式直接填充即可。 城市天氣搜索 獲取天氣數(shù)據(jù)傳參為經(jīng)緯度，所以搜索城市天氣時，需先將城市轉(zhuǎn)換為對應(yīng)的經(jīng)緯度，然后調(diào)用獲取天氣數(shù)據(jù) API 即可。 返回的數(shù)據(jù)格式為： { 'status':0, 'result':{ 'location':{ 'lng':117.21081309155257, 'lat':39.143929903310074 }, 'precise':0, 'confidence':12, 'level':'城市' }} 然后直接調(diào)用獲取天氣 API 即可。具體代碼可參考文末。 搜索動畫彩蛋 在搜索框里搜索 520 或 521，會出現(xiàn)從頂部下小心心的動畫，如下： 只需創(chuàng)建了一個 heartbeat 的組件。wxml 結(jié)構(gòu)是遍歷數(shù)組，創(chuàng)建多個大小、位置隨機(jī)的圖片： <image wx:for='{{arr}}' wx:key='{{index}}' animation='{{animations[index]}}' class='heart' style='left:{{lefts[index]}}px;top:{{tops[index]}}px;width:{{widths[index]}}rpx;height:{{widths[index]}}rpx;' src='/img/heartbeat.png'></image>然后使用的是小程序提供的 wx.createAnimation，動畫的使用比較簡單，創(chuàng)建動畫，然后賦予 animation 屬性即可，比較簡單。 但是也有局限性，比如沒有直接的動畫結(jié)束后的回調(diào)，但是可以使用 setTimeout 來實現(xiàn)等。這里會用到可用窗口寬高，因為多處用到了該參數(shù)，所以在 app.js 里面異步獲取了先。 動畫代碼如下： dance (callback) { let windowWidth = this.data.windowWidth let windowHeight = this.data.windowHeight let duration = this.data.duration let animations = [] let lefts = [] let tops = [] let widths = [] let obj = {} for (let i = 0; i < this.data.arr.length; i++) { lefts.push(Math.random() * windowWidth) tops.push(-140) widths.push(Math.random() * 50 + 40) let animation = wx.createAnimation({ duration: Math.random() * (duration - 1000) + 1000 }) animation.top(windowHeight).left(Math.random() * windowWidth).rotate(Math.random() * 960).step() animations.push(animation.export()) } this.setData({ lefts, tops, widths, }) let that = this let timer = setTimeout(() => { that.setData({ animations, }) clearTimeout(timer) }, 200) let end = setTimeout(() => { callback && callback() clearTimeout(end) }, duration) },}, 首頁搜索特定關(guān)鍵詞后，調(diào)用組件 dance 方法即觸發(fā)小心心動畫。 懸浮球菜單 屏幕右下角的懸浮球提供了三個頁面的入口：城市選擇頁、設(shè)置頁、關(guān)于頁。菜單彈出、收回會有動畫。 這里的動畫分為彈出和收起，兩者寫起來基本上一樣的，只是動畫的參數(shù)不一樣。這里貼出彈出的動畫： // wxml<!-- 懸浮菜單 --><view class='menus'> <image src='/img/location.png' animation='{{animationOne}}' class='menu' bindtap='menuOne' style='top:{{pos.top}}px;left:{{pos.left}}px;'></image> <image src='/img/setting.png' animation='{{animationTwo}}' class='menu' bindtap='menuTwo' style='top:{{pos.top}}px;left:{{pos.left}}px;'></image> <image src='/img/info.png' animation='{{animationThree}}' class='menu' bindtap='menuThree' style='top:{{pos.top}}px;left:{{pos.left}}px;'></image> <image src='/img/menu.png' animation='{{animationMain}}' class='menu main' bindtap='menuMain' catchtouchmove='menuMainMove' style='top:{{pos.top}}px;left:{{pos.left}}px;'></image></view>// jspopp() { let animationMain = wx.createAnimation({ duration: 200, timingFunction: 'ease-out' }) let animationOne = wx.createAnimation({ duration: 200, timingFunction: 'ease-out' }) let animationTwo = wx.createAnimation({ duration: 200, timingFunction: 'ease-out' }) let animationThree = wx.createAnimation({ duration: 200, timingFunction: 'ease-out' }) animationMain.rotateZ(180).step() animationOne.translate(-50, -60).rotateZ(360).opacity(1).step() animationTwo.translate(-90, 0).rotateZ(360).opacity(1).step() animationThree.translate(-50, 60).rotateZ(360).opacity(1).step() this.setData({ animationMain: animationMain.export(), animationOne: animationOne.export(), animationTwo: animationTwo.export(), animationThree: animationThree.export(), })},懸浮菜單是可以在屏幕上隨意滑動的，方法也很簡單，監(jiān)聽 touchmove 事件即可，因為菜單展開方向是在左邊，所以懸浮菜單能往左邊移動的最遠(yuǎn)距離要有一段間隔，否則展開的菜單就進(jìn)入左邊屏幕了，移動到上方同樣邏輯（后期可以改成菜單展開方向隨移動而改變，而不是一味在左邊展開）。 城市選擇頁 城市選擇頁面就是一個城市列表，如下圖： 點(diǎn)擊相應(yīng)的城市，跳轉(zhuǎn)到首頁獲取所選城市的天氣數(shù)據(jù)。這里的城市數(shù)據(jù)是這樣的格式無序的列表： { 'letter': 'B', 'name': '北京市' } 因為需要按照字母排列進(jìn)行排序，所以需要先排序再遍歷，代碼如下： // 按照字母順序生成需要的數(shù)據(jù)格式getSortedAreaObj(areas) { // let areas = staticData.areas areas = areas.sort((a, b) => { if (a.letter > b.letter) { return 1 } if (a.letter < b.letter) { return -1 } return 0 }) let obj = {} for (let i = 0, len = areas.length; i < len; i++) { let item = areas[i] delete item.districts let letter = item.letter if (!obj[letter]) { obj[letter] = [] } obj[letter].push(item) } // 返回一個對象，直接用 wx:for 來遍歷對象，index 為 key，item 為 value，item 是一個數(shù)組 return obj},點(diǎn)擊城市后，需要通知首頁“我已經(jīng)切換城市了，麻煩獲取下這個城市的數(shù)據(jù)謝謝”，這里使用的是使用 getCurrentPages 獲取頁面堆棧，修改首頁數(shù)據(jù)的方式。 關(guān)于頁 關(guān)于頁是一個展示頁，沒有多少交互，使用到的 API 只有復(fù)制到剪切板 wx.setClipboardData?！拔⑿趴焖俾?lián)系”使用的是小程序提供的聯(lián)系客服的方式。有精力的話，可以自己搭建服務(wù)，將小程序的消息 Push 到自己的服務(wù)上去。效果圖： 設(shè)置頁 設(shè)置頁的功能看著有點(diǎn)多，其實并不多，只是一堆 API 的調(diào)用。這個頁面分了自定義、檢查更新、小工具、清除數(shù)據(jù)三個部分。各個設(shè)置參數(shù)保存在 Storage 中。一個一個來說。 1. 自定義
自定義背景是將選取的圖片（wx.chooseImage）保存（wx.saveFile）到本地，然后首頁獲取（wx.getSavedFileList）保存的圖片，在首頁展示出來即可。 長按刪除，則是獲取（wx.getSavedFileList）保存的圖片，然后 wx.removeSavedFile 掉即可?，F(xiàn)在設(shè)置的是本地只保存一張圖片，所以重新設(shè)置其他背景時，會刪除上一張背景圖，然后重新保存新背景圖。
該操作只是將首頁的頂部搜索 wx:if 掉而已。switch 組件的樣式可以通過修改默認(rèn)的類來修改，調(diào)一個自己滿意的即可。 .wx-switch-input{width:84rpx !important;height:43rpx !important;}.wx-switch-input::before{width:82rpx !important;height: 38rpx !important;}.wx-switch-input::after{width: 38rpx !important;height: 38rpx !important;}
同樣 wx:if 。
檢查更新默認(rèn)關(guān)閉。小程序的更新是在冷啟動時去檢查，如果有新版本會異步下載，再次冷啟動時會加載新版本。這里使用 wx.getUpdateManager，因為該 API 基礎(chǔ)庫支持最低版本是 1.9.90，基礎(chǔ)庫版本低的會提示不支持，顯示的文案也會相應(yīng)修改。
1）NFC 使用 wx.getHCEState。 2）屏幕亮度 獲取屏幕亮度、設(shè)置屏幕亮度、保持常亮使用的 API 分別是 wx.getScreenBrightness、wx.setScreenBrightness、wx.setKeepScreenOn。完整實現(xiàn)可查看源碼。 3）系統(tǒng)信息 系統(tǒng)信息會跳轉(zhuǎn)到新頁面。
1）首頁懸浮球復(fù)位 首頁懸浮球的位置信息是保存本地的變量 pos，復(fù)位位置，清除 pos 即可。 2）恢復(fù)初始化設(shè)置 設(shè)置信息是保存本地的變量 setting，復(fù)位位置，清除 setting 即可。 3）清除所有本地數(shù)據(jù) wx.clearStorage 即可。 效果圖：
源碼地址：https://github.com/myvin/quietweather原文鏈接：https:///post/5b39bbcc5188252ce018c745 |
|
|
