Android版本——天气预报制作过程

Android版本——天气预报制作过程

一、 Android版本

（一） 创建项目工程

1. 安装Android Studio并初始化工程

2. 将项目上传到github

（1） 注册github账号，在github上创建一个仓库。

（2） 进入天气预报项目，初始化git项目

（3） 将项目提交到github

（二） 制作项目UI界面

1. 制作工具栏

顶部工具栏包含“选择城市”、“分隔符”、“天气名称”、“定位”、“刷新”等

控件。

（1）将资源文件导入项目drawable目录下中：

（2）在“weather_info”布局文件中增加一个RelativeLayout布局，之后在这个布

局中依次增加城市图标、城市信息、定位图标、分享图标等。 效果如下：

2. 今日天气信息制作

把所需的资源文件放置到对应的资源目录中，采用嵌套布局的方式，放置一个线性布

局，采用垂直方式分布，分别放置今日天气、7日天气信息以及广告信息。并指定背景图

片。 效果如下：

（三） 项目联网

1. 检查网络状态

创建一个工具类NetUtiil，在其中实现getNetworkState方法，在连接网络之前，直

接调用检测网络连接状态方法。最后，增加项目访问网络状态的权限。效果如下：

2. 获取网络数据

为更新按钮添加单击事件，从SharedPreferences读取城市的id，在

文件中增加访问INTERNET 的权限。效果如下：

3. 解析网络数据

编写解析函数，解析出城市名称已经更新时间信息并在获取网络数据后调用。

4. 更新今日天气数据

初始化界面控件以及控件内容，在onCreate方法中调用。效果如下：

（四） 搜索城市功能

1. 制作选择城市界面

添加“选择城市”的布局文件，选择城市的Activity。为选择城市的ImageView添加

点击事件，在中注册Activity。效果如下：

完善选择城市界面布局，为选择城市界面的返回按钮设置点击事件。效果如下：

返回主界面时，传递城市代码数据。修改更新按钮的单击事件处理程序，并编写

onActivityResult函数用于接收返回的数据。

效果如下：

2. 从数据库中读取城市列表

将数据库文件导入assets目录中，建立City的Bean，建立MyApplication

类，创建getInstance方法，创建cityDB操作类，创建打开数据库的方法。初始化城市信

息列表，在程序运行时读取数据库信息。效果如下：

3. 通过ListView展示城市信息

在布局文件select_中新增一个ListView组件，在java文件中定义ListView

变量，并与该组件绑定，并加载ListView内容。将ListView内容加载为我们从数据库文

件读到的城市列表。效果如图：

4. 选中城市并将结果返回

根据得到的citycode，更新主界面天气信息。在SelectCity类中onClick方法中新增

点击返回按钮时，将citycode传递给MainActivity类。在MainActivity的onCreate方

法中新增如果citycode改变过，更新天气预报的代码段。效果如图：

5. 搜索城市

select_布局中增加SearchView控件，效果如下：

使用SearchView的setOnQueryListener

(yTextListener listener)方法监听搜索框的文字变化，一有输入，

则重新对搜索框内文字进行搜索，更新 adapter的数据集。搜索完毕后，使用

ArrayAdapter 的 notifyDataSetChanged()方法，通知 ListView 更新数据。效果如下：

（五） 定位功能

1. 申请百度SDK账号

进入百度地图开放平台，选择开发文档中的Android 定位 SDK，申请密钥，创建应

用，完善信息，复制AK，下载SDK并放在程序中相应位置。

2. 配置文件

3. 添加定位权限

使用定位 SDK，需在 Application 标签中声明 service 组件，每个 App 拥有自己

单独的定位 service

除此之外，还需要添加如下权限：

4. 配置SDK参数

创建initLocation类并调用

5. 获取城市编码

6. 监听定位按钮

二、 公众号版本

（一） 基于公众号的天气预报查询（静态数据）

在域名服务器下新建public/wx/文件，代码如下：

//获得参数 signature nonce token timestamp echostr

$nonce = $_GET['nonce'];

$token = 'yuan';

$timestamp = $_GET['timestamp'];

$echostr = $_GET['echostr'];

$signature = $_GET['signature'];

//形成数组，然后按字典序排序

$array = array();

$array = array($nonce, $timestamp, $token);

sort($array);

//拼接成字符串,sha1加密 ，然后与signature进行校验

$str = sha1( implode( $array ) );

if( $str == $signature && $echostr ){

//第一次接入weixin api接口的时候

echo $echostr;

exit;

}

//1.获取到微信推送过来post数据（xml格式）

$postArr = $GLOBALS['HTTP_RAW_POST_DATA'];

//2.处理消息类型，并设置回复类型和内容

$postObj = simplexml_load_string( $postArr );

//判断该数据包是否是订阅的事件推送

if( strtolower( $postObj->MsgType) == 'event'){

//如果是关注 subscribe 事件

if( strtolower($postObj->Event == 'subscribe') ){

//回复用户消息(纯文本格式)

$toUser = $postObj->FromUserName;

$fromUser = $postObj->ToUserName;

$time = time();

$msgType = 'text';

$content = '欢迎关注我们的微信公众账号，此公众号为测试公众号';

$template = "

%s

";

$info = sprintf($template, $toUser, $fromUser, $time,

$msgType, $content);

echo $info;

}

}

//判断该数据包是否是文本消息

if( strtolower( $postObj->MsgType) == 'text'){

//接受文本信息

$content = $postObj->Content;

if($content == '北京天气'){

//回复用户消息(纯文本格式)

$toUser = $postObj->FromUserName;

$fromUser = $postObj->ToUserName;

$time = time();

$msgType = 'text';

//$content = '您发送的内容是：'.$content;

$content = '【北京市天气预报】

2018年11月21日 星期三

温度：8°C

湿度：47%

高温：9°C

低温：-3°C

风力：2级

风向：西南风

PM2.5：23';

$template = "

%s

";

$info = sprintf($template, $toUser, $fromUser, $time,

$msgType, $content);

echo $info;

}

}

运行结果如下：

（二） 获取今日信息接口

1. 数据库爬虫

连接数据库，将宝塔数据库页面的访问权限设置为所有人，在安全页面设置放行端口。

设置数据库连接

从数据库查找citycode并更新数据库，在服务器上执行py文件。

执行结果如下：

2. 用爬取的数据生成api接口

在wx/model中实现通过城市名称获取citycode，通过citycode获取天气信息。代

码如下：

namespace appapimodel;

use thinkModel;

use thinkDb;

class Weathers extends Model

{

//通过城市 code 取得天气信息

public function getWeathers($id = 1)

{

$res =

Db::name('ins_county')->where('weather_code',$id)->column('weather_info');

return $res;

}

//通过城市名称取得城市 code

public function getCityCode($city = 1)

{

$res =

Db::name('ins_county')->where('county_name',$city)->column('weather_code');

return $res;

}

}

在wx/controller中添加对这两个功能的使用，使其成为api接口。代码如下：

namespace appapicontroller;

header("Content-type: text/html; charset=utf-8");

use thinkController;

class Weathers extends Controller

{

public function read()

{

$id = input('id');

$model = model('Weathers');

$data = $model->getWeathers($id);

$html = json_decode($data[0]);

return json($html);

}

//得到城市 id

public function getcitycode()

{

$id = input('name');

$model = model('Weathers');

$data = $model->getCityCode($id);

if ($data) {

$code = 200;

} else {

$code = 404;

}

$data = [

'code' => $code,

'data' => $data

];

return json($data);

}

}

（三） 完成天气预报功能

在微信处理页面添加逻辑。先通过城市名找到对应的 citycode，再使用 citycode 找

到天气信息。

效果如下：

三、 小程序版本

（一） 制作静态页面

1. 注册微信小程序

进入微信公众平台注册一个小程序账号，添加小程序的基本信息，获取小程序的

AppleID。

2. 编写天气预报静态界面

下载微信开发者工具，创建天气预报项目。新建一个天气页面，pages 文件下面，创

建一个 weather 文件夹，里面在创建 ，，，

，四个文件。效果如图：

编写，相当于前端的html，负责整个页面的结构表现。代码如下：

{{tmp}}°

{{city}} {{district}} {{street}}

{{txt}}

空气{{qlty}} {{pm25}}

{{dir}}

微风

wx:else class="w b center f50">{{sc}}级

相对湿度

{{hum}}%

体感温度

{{fl}}°

{{day[i]}}

{{_txt_d}}|{{_dir}}

{{_min}}°/ {{_max}}°

编写文件，对应于前端的css文件，负责给结构处理，例如某一块的颜

色，背景，大小，居中等。代码如下:

.w{

color: white;

} .b{

font-weight: bold;

}

.l{

border: 1rpx solid #fff;

}

.center{

text-align: center;

margin: auto 0;

}

.hor{

display: flex;

}

.bg {

width: 100%;

height: 1800rpx;

}

.temp{

font-size: 170rpx;

}

.container {

position: absolute;

left: 0;

top: 0;

width: 100%;

padding: 0;

margin: 0;

height: 1800rpx;

display: block;

}

.nowWeather{

padding: 60rpx;

} .pm25{

padding: 20px 60px 0px 30px;

}

.weahterDetail{

width: 100%;

display: flex;

flex-direction: row;

justify-content: space-around;

padding: 10px 0px 100px 10px;

}

.forcast{

padding: 5px 0px 0px 0px;

margin-left: 10rpx;

margin-right: 10rpx;

font-size: 40rpx;

border-bottom: 1rpx solid rgb(241, 229, 229);

color: white;

justify-content: space-around;

}

（二） 获取实时天气

1. 利用微信接口获取经纬度

//获取经纬度方法

getLocation: function () {

var that = this

ation({

type: 'wgs84',

success: function (res) {

var latitude = de

var longitude = ude

("lat:" + latitude + " lon:" + longitude);

y(latitude, longitude);

}

})

},

2. 调用百度API获取当前城市

进入百度地图开放平台创建一个微信小程序应用，获取自己的AK值。

获取城市信息代码如下：

//获取城市信息

getCity: function (latitude, longitude) {

var that = this;

var url = "/geocoder/v2/";

var params = {

ak: "1urfRnxgAf4tsW80Dvojq3HRHMzMbwRB",

output: "json",

location: latitude + "," + longitude

}

t({

url: url,

data: params,

success: function (res) {

var city = ;

var district = ct;

var street = ;

a({

city: city,

district: district,

street: street,

})

var descCity = ing(0, - 1);

hter(descCity);

},

fail: function (res) { },

complete: function (res) { },

})

},

3. 由和风天气API获取城市天气信息

注册和风天气，获取免费天气API接口，获取KEY。

获取天气信息代码如下：

//获取天气信息

getWeahter: function (city) {

var that = this

var url = "/s6/weather"

var url2 = "/s6/air"

var parameters = {

location: city,

key: "18c02b1ac21a4020903d85a77d2fd97c"

}

t({

url: url,

data: parameters,

success: function (res) {

var tmp = her6[0].;

var txt = her6[0]._txt;

var code = her6[0]._code;

var dir = her6[0]._dir;

var sc = her6[0]._sc;

var hum = her6[0].;

var fl = her6[0].;

var daily_forecast = her6[0].daily_forecast;

a({

tmp: tmp,

txt: txt,

code: code,

dir: dir,

sc: sc,

hum: hum,

fl: fl,

daily_forecast: daily_forecast

})

},

fail: function (res) { },

complete: function (res) { },

})

t({

url: url2,

data: parameters,

success: function (res) {

var qlty = her6[0].air_now_;

var pm25 = her6[0].air_now_25;

// var air_forecast = her6[0].air_forecast;

a({

qlty: qlty,

pm25: pm25

// air_forecast: air_forecast

})

},

fail: function (res) { },

complete: function (res) { },

})

}

})

最终得到运行结果如下：