小程式開發之——簡簡天氣

来源:http://www.cnblogs.com/xhf121012/archive/2017/07/12/7156455.html
-Advertisement-
Play Games

小程式已經出來有段時間了，之前也有瞭解過。早起也有瞭解過，但是很不看好。 最近因工作需要，開始學了小程式。 隨著小程式SDK開放的API越來越多，功能也越來越強大，也許一不留神，他又火了。 拿來練手的是一個天氣預報（好像每次練手都是天氣預報，尷尬了……） 先看運行效果：（目前已經上線了，具體效果可以 ...


小程式已經出來有段時間了，之前也有瞭解過。早起也有瞭解過，但是很不看好。

最近因工作需要，開始學了小程式。

隨著小程式SDK開放的API越來越多，功能也越來越強大，也許一不留神，他又火了。

拿來練手的是一個天氣預報（好像每次練手都是天氣預報，尷尬了……）

先看運行效果：（目前已經上線了，具體效果可以掃右邊二維碼）

　　　　　　　　　　　　　　

 

　　首先需要的就是天氣介面，這種介面有很多，而且大部分都是免費的。無意中找到一個百度的介面：

http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getweather ，然後就可以開發了。

具體不多說了，直接上代碼：

主頁面：

index.wxml

<!--index.wxml-->
<view style="background-color:#36c;color:#fff;min-height:{{device.height}}px">
  <view class="box-city">{{weather.today.city}}</view>
  <view class="box-date">{{weather.today.date}}</view>
  <view class="flex-weather">
    <view class="flex-item-3">
      <image wx:if="{{weather.today.icon}}" src="../../images/icon/{{weather.today.icon}}" style="height:{{device.width/4}}px;width:{{device.width/4}}px"></image>
    </view>
    <view class="flex-item-3">
      <view style="font-size:2.5em;font-weight: bold;">{{weather.today.c_temperature}}</view>
      <view class="pm25" style="background-color:{{weather.today.pm_color}}">{{weather.today.pm25}}</view>
    </view>
    <view class="flex-item-3">
      <view class="weather-text" style="font-size:1.5em;font-weight:bold">{{weather.today.weather}}</view>
      <view class="weather-text">{{weather.today.wind}}</view>
      <view class="weather-text">{{weather.today.temperature}}</view>
    </view>
  </view>
  <view wx:for="{{weather.list}}" class="flex-weather">
    <view style="font-size:0.9em;font-weight:bold" class="flex-item-3">{{item.date}}</view>
    <view class="flex-item-3">
      <image src="../../images/icon/{{item.icon_day}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image>
      <image src="../../images/icon/{{item.icon_night}}" style="height:{{device.width/8}}px;width:{{device.width/8}}px"></image>
    </view>
    <view class="flex-item-3">
      <view style="font-size:1.1em;font-weight:bold">{{item.weather}}</view>
      <view style="font-size:0.8em">{{item.temperature}}</view>
      <view style="font-size:0.8em">{{item.wind}}</view>
    </view>
  </view>
  <view class="flex-weather" wx:for="{{weather.index}}">
    <view style="width:28%; padding: 0.3em;">
      <view style="font-size:0.8em;">{{item.title}}</view>
      <view style="font-size:1.5em;font-weight:bold;">{{item.zs}}</view>
    </view>
    <view style="width:72%; padding: 0.3em;font-size:0.9em;text-align:left;">{{item.des}}</view>
  </view>
</view>

樣式表文件 index.wxss

/**index.wxss**/

.box-city {
  font-size: 2.5em;
  text-align: center;
  vertical-align: middle;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.box-date {
  font-size: 0.8em;
  text-align: center;
  vertical-align: middle;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.flex-weather {
  flex-direction: row;
  display: -webkit-flex;
  align-items: center;
  text-align: center;
  margin-top: 0.1em;
  margin-bottom: 0.3em;
}

.flex-item-3 {
  width: 33.33%;
  padding: 0.1em;
}

.pm25 {
  font-size: 1.5em;
  margin-left: 1em;
  margin-right: 1em;
  border-radius: 0.1em;
}

.weather-text {
  font-size: 0.9em;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

邏輯層 index.js

var Bmap = require("../../bmap-wx.js");
var util = require("../../util.js");
var app = getApp();
Page({
  data: {
    weather: {},
    device: app.globalData.deviceInfo
  },
  onLoad: function () {
    var that = this;
    var bmap = new Bmap.BMapWX({ ak: "需要填寫你的ak，免費申請"});
    bmap.weather({
      success:function(data){
        that.setData({ weather: util.formatWeather(data)});
      },
      fail: function(data){
        wx.showToast({
          title: '獲取天氣信息失敗！'
        });
      }
    });
  }
})

用來處理json的工具類 util.js

function formatWeather(res) {
  var weathers = {
    today: {},
    list: []
  };
  console.log(res);
  weathers.today.city = res.currentWeather[0]["currentCity"];
  weathers.today.pm25 = res.currentWeather[0]["pm25"];
  weathers.today.temperature = res.currentWeather[0]["temperature"];
  weathers.today.weather = res.currentWeather[0]["weatherDesc"];
  weathers.today.wind = res.currentWeather[0]["wind"];
  var today_date = res.currentWeather[0]["date"].split(/[ ：()]/);

  weathers.today.c_temperature = today_date[4];
  weathers.today.date = today_date[1] + " " + today_date[0];
  var weatherArray = res.originalData.results[0].weather_data;
  for (var i = 0; i < weatherArray.length; i++) {
    var weather = {};
    var date = new Date((Date.parse(res.originalData.date) / 1000 + (86400 * i)) * 1000);
    var month = date.getMonth() + 1;
    month = month > 9 ? month + "月" : "0" + month + "月";
    weather.date = month + date.getDate() + "日" + " " + weatherArray[i]["date"].split(" ")[0];
    weather.temperature = weatherArray[i]["temperature"];
    weather.weather = weatherArray[i]["weather"];
    weather.wind = weatherArray[i]["wind"];
    var day_pic = weatherArray[i]["dayPictureUrl"];
    weather.icon_day = day_pic.substring(day_pic.lastIndexOf("/") + 1, day_pic.length);
    var night_pic = weatherArray[i]["nightPictureUrl"];
    weather.icon_night = night_pic.substring(night_pic.lastIndexOf("/") + 1, night_pic.length);
    weathers.list.push(weather);
  }
  if (new Date().getHours() > 18) {
    weathers.today.icon = weathers.list[0].icon_night;
  } else {
    weathers.today.icon = weathers.list[0].icon_day;
  }
  if (weathers.today.pm25 > 300){
    weathers.today.pm_color = "#6d001d";
  }else if (weathers.today.pm25 > 200) {
    weathers.today.pm_color = "#884898";
  } else if (weathers.today.pm25 > 150) {
    weathers.today.pm_color = "#f00";
  } else if (weathers.today.pm25 > 100) {
    weathers.today.pm_color = "#fc0";
  }else{
    weathers.today.pm_color = "#0f0";
  }

 weathers.index = [];
 var indexArray = res.originalData.results[0].index;
 for(var i = 0; i < indexArray.length; i++){
  var index = {
    title: indexArray[i].title,
    des: indexArray[i].des,
    zs: indexArray[i].zs
  };
  weathers.index.push(index);
 }
  console.log(weathers);
  return weathers;
}

module.exports = {
  formatWeather: formatWeather
}

最後，需要下載一下 

bmap-wx.js
地址：http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download

至此，全部完成工作！

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 擴展運算符（Spread operator）
    擴展運算符（Spread operator） let zzz=[2,4,6]; console.log(zzz);//[2, 4, 6] console.log(...zzz);//2 4 6 展開併合並 let a=[1,2,3]; let b=[...a,4,5,6]; console.log( ...
  • 你不知道的javaScript筆記(7)
    非同步：現在與將來 分塊的程式 可以把JavaScript 程式寫在單獨的js 文件中，這個程式是由多個塊組成的，這些塊 中只有一個是現在執行，其餘在撿來執行，最常見的塊單位是函數。 例如： function now() { return 21; } function later() { answer ...
  • iOS11 AR場景中關於3D模型的觸碰檢測
    最新 iOS11中的AR特別火爆，自己也到網上找了幾個Demo把玩了下，核心代碼無非以下： //AR視圖：展示3D界面 @property(nonatomic,strong)ARSCNView *arSCNView; 添加模型方法一： // Create a new scene SCNScene * ...
  • Fiddler抓包使用教程-模擬低速網路環境
    轉載請標明出處：http://blog.csdn.net/zhaoyanjun6/article/details/73467267 本文出自 "【趙彥軍的博客】" 在無線測試中，網路測試是必不可少的環節，通過網路限速查看頁面渲染等效果，能有效保障低速網路下的用戶體驗和頁面性能。Fiddler可通過延 ...
  • Android WiFi使用記錄
    最近在做Android的WiFi部分的開發，連接的工具類參照了這個文章的工具類。 http://www.cnblogs.com/zhuqiang/p/3566686.html 開發中碰上的一些問題，在這裡對一些解決辦法做了些記錄。 1.對於WiFi加密方式的識別 2.連接WiFi的成功率 開發中發現 ...
  • Fiddler抓包使用教程-亂碼處理 Decode
    轉載請標明出處：http://blog.csdn.net/zhaoyanjun6/article/details/73350344 本文出自 "【趙彥軍的博客】" 在 Fiddler 的工具欄中有一個 Decode 功能，一直不知道是幹嘛用的. 從一個簡單的介面說起 最近在調試一個介面，伺服器返回值 ...
  • Fiddler抓包使用教程-基本功能介紹
    轉載請標明出處：http://blog.csdn.net/zhaoyanjun6/article/details/72932886 本文出自 "【趙彥軍的博客】" Fiddler 基本頁面 會話列表功能介紹 | 標識符 | 含義| | |: :| | | Fiddler為Session生成的ID | ...
  • ionic3 生成android 如何控制versionCode版本號
    ionic 項目中生成 android 如何控製版本號呢。 1.在項目的配置文件下的config.xml 來我們可以看到 <widget id="com.ionicframework.vp2342525" version="1.0.0">···················略 我們改成這樣 <wi ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類