微信小程序案例之天气预报

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序案例之天气预报，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6894字，纯文字阅读大概需要10分钟。

内容图文

前言

这俩年微信小程序特别火，就抽空在网上找了个天气案例自己学习了下，这个案例稍微做了些调整，所以就和大家一起分享下吧~~~~~。

小程序案列本人参考网址：https://www.cnblogs.com/demodashi/p/8481610.html

步骤

1.注册微信小程序。

2.注册和风天气账号。

3.注册百度地图开发平台应用。

4.微信小程序平台设置合法request域。

5.微信工具开发编码实现。

6.微信小程序平台提交审核发布。

一、准备工作

1.注册微信小程序

注册微信小程序账号就不用多说了，按照注册步骤一步步来就行了，网上一大把教程。

注册教程：https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html

2.注册和风天气账号

获取天气情况，和风天气网址：https://dev.heweather.com/

1）免费注册和风账号

微信小程序案例之天气预报 - 文章图片

2）创建应用，不清楚的可以点击->如何添加应用

微信小程序案例之天气预报 - 文章图片

2）和风API接口方式，注册完可以登录看下，写的还是挺详细的

微信小程序案例之天气预报 - 文章图片

3.注册百度地图开发平台应用

获取城市定位参数，百度地图网址：http://lbsyun.baidu.com/

1）注册账号后，点击控制台->应用管理->我的应用->创建应用

微信小程序案例之天气预报 - 文章图片

2)创建应用，输入应用名称及注册微信小程序的APPID号，点击确定。

微信小程序案例之天气预报 - 文章图片

4.微信小程序平台设置合法request域

5.微信工具开发编码实现

1）项目结构

2）index.wxml

<!--index.wxml-->
<image src="../images/bj4.jpg" class="bg"></image>
<view class="container">
  <view class="nowWeather">
    <view class="city w">{{city}} {{district}}</view>
    <view class="road w">{{street}}</view>
    <view class="temp w b">{{tmp}}°</view>
    <view class="weather w">{{txt}} | 空气 {{qlty}}</view>
  </view>
 
  <view class="weahterDetail">
    <view class="">
      <view class="w center">{{dir}}</view>
      <view wx:if="{{sc == '微风'}}" class="w b center f50">微风</view>
      <view wx:else class="w b center f50">{{sc}}级</view>
    </view>
    <view class="l"></view>
    <view class="">
      <view class="w center">相对湿度</view>
      <view class="w b center f50">{{hum}}%</view>
    </view>
    <view class="l"></view>
    <view class="">
      <view class="w center">体感温度</view>
      <view class="w b center f50">{{fl}}°</view>
    </view>
  </view>
</view>
<view wx:key="item" wx:for-items="{{daily_forecast}}" wx:for-index="i">
  <view class="hor forcast">
   <view class="day">{{day[i]}}</view>
    <view class="hor">
     <image class="img" src="../images/icons/{{item.cond_code_d}}.png"></image>
      <view class="center">{{item.cond_txt_d}}|{{qlty}}</view>
    </view>
    <view class="tmp">最低{{item.tmp_min}}°/ 最高{{item.tmp_max}}°</view>
  </view>
</view>
<view class='notice-wrap' hidden='{{hideNotice}}'>
  <image class="img" style="position:absolute;" src="../images/icons/gg2.png"></image>
　　<view class='tongzhitext'>
　　　　<text class="tongzhi-text">{{notice}}</text>
　　</view>
　　<!--<view bindtap='switchNotice' class="closeView">x</view>-->
</view>

3)index.js

//index.js
//获取应用实例
var app = getApp()
var day = ["今天", "明天", "后天"];
Page({
  data: {
    //初始化数据
    hideNotice: false,
    day: day,
  },

  onl oad: function () {
    var that = this
    that.getLocation();
  },

  //获取经纬度方法
  getLocation: function () {
    var that = this
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.getCity(latitude, longitude);
      }
    })
  },
  //获取城市信息
  getCity: function (latitude, longitude) {
    var that = this
    var url = "https://api.map.baidu.com/reverse_geocoding/v3/";
    var params = {
      ak: "RGTU7HzbPplaGoAoT0q0TFLSyF5yLqGO",
      output: "json",
      location: latitude + "," + longitude
    }
    wx.request({
      url: url,
      data: params,
      success: function (res) {
        var city = res.data.result.addressComponent.city;
        var district = res.data.result.addressComponent.district;
        var street = res.data.result.addressComponent.street;

        that.setData({
          city: city,
          district: district,
          street: street,
        })

        var descCity = city.substring(0, city.length - 1);
        that.getWeahter(descCity);
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },

  //获取常规天气信息
  getWeahter: function (city) {
    var that = this
    var url = "https://free-api.heweather.net/s6/weather"
    var params = {
      location: city,
      key: "460b5cda5ed8494f82cfc51d7f0a512e"
    }
    wx.request({
      url: url,
      data: params,
      success: function (res) {
        var tmp = res.data.HeWeather6[0].now.tmp;
        var txt = res.data.HeWeather6[0].now.cond_txt;
        var code = res.data.HeWeather6[0].now.cond_code;
        var vis = res.data.HeWeather6[0].now.vis;
        var dir = res.data.HeWeather6[0].now.wind_dir;
        var sc = res.data.HeWeather6[0].now.wind_sc;
        var hum = res.data.HeWeather6[0].now.hum;
        var fl = res.data.HeWeather6[0].now.fl;
        var notice = res.data.HeWeather6[0].lifestyle[2].txt;
        var daily_forecast = res.data.HeWeather6[0].daily_forecast;
        that.setData({
          tmp: tmp,
          txt: txt,
          code: code,
          vis: vis,
          dir: dir,
          sc: sc,
          hum: hum,
          fl: fl,
          daily_forecast: daily_forecast,
          notice: notice
        })
        that.getWeahterAir(city);
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
  //获取空气质量
  getWeahterAir: function (city) {
    var that = this
    var url = "https://free-api.heweather.net/s6/air"
    var params = {
      location: city,
      key: "460b5cda5ed8494f82cfc51d7f0a512e"
    }
    wx.request({
      url: url,
      data: params,
      success: function (res) {
        var qlty = res.data.HeWeather6[0].air_now_city.qlty;
        that.setData({
          qlty: qlty,
        })
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
  //下拉刷新
  onPullDownRefresh: function () {
    var that = this
    that.getLocation();
    //下拉刷新后回弹
    wx.stopPullDownRefresh();
  },
  // 点击关闭公告
  /*switchNotice: function () {
    this.setData({
      hideNotice: true
    })
  },*/
}
)

4)index.wxss

/**index.wxss**/
 
/**common css**/
.w{
  color: white;
}
.b{
  font-weight: bold;
}
 
.l{
  border: 1rpx solid #fff;
}
 
.center{
  text-align: center;
  margin: auto 0;
}

 .day{
  text-align: center;
  margin: auto 0;
  width: 20%;
}
 .tmp{
  text-align: center;
  margin: auto 0;
  width: 50%;
  margin-left: 25rpx;
}
.hor{
  display: flex;
}
 
.f50{
  font-size: 50rpx;
}
 
/**index css**/
 
 
.bg {
  width: 100%;
  height: 700rpx;
}
 
.temp{
  font-size: 170rpx;
}
 
.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 700rpx;
  display: block;
}

.nowWeather{
  padding: 60rpx;
}

.weahterDetail{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 50rpx;
}
 
.forcast{
  padding: 30rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  border-bottom: 1rpx solid #eee;

}


.img{
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
}


@keyframes remindMessage {
  0% {
    -webkit-transform: translateX(90%);
  }

  100% {
    -webkit-transform: translateX(-180%);
  }
}

.tongzhitext {
  /* margin-right:80rpx; */
  margin-left: 60rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 22px;
}

.tongzhi-text {
  font-size: 30rpx;
  animation: remindMessage 14s linear infinite;
  width: 100%;
  color: #000000;
  display: block;
  margin-top: 5rpx;
}

.notice-wrap {
  background: rgb(245, 241, 240);
  width: 100%;
  height: 60rpx;
  line-height: 10rpx;
  color: #d09868;
  font-size: 28rpx;
}

.closeView {
  width: 45rpx;
  height: 45rpx;
  line-height: 45rpx;
  position: absolute;
  right: 20rpx;
  top: 5rpx;
  text-align: center;
  font-size: 35rpx;
}

5)index.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

项目保存后，可用手机微信扫描预览看下效果

微信小程序案例之天气预报 - 文章图片

6.微信小程序平台提交审核发布

1）点击上传按钮

微信小程序案例之天气预报 - 文章图片

2）微信公众平台提交审核，静等几个小时，审核通过后点击提交发布，微信搜索小程序名称就可以看到啦~~~

微信小程序案例之天气预报 - 文章图片

注：背景图片可以自己更新，icons包里的天气小图标可以在和风官网天气状况和图标打包下载。

图标网址：https://dev.heweather.com/docs/refer/condition

内容总结

以上是互联网集市为您收集整理的微信小程序案例之天气预报全部内容，希望文章能够帮你解决微信小程序案例之天气预报所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/647704.html

来源：【匿名】

【上一篇】计算机运行原理？什么是操作系统？应用程序的启动【下一篇】关于IE的RegExp.exec的问题

更多 ►

【微信小程序案例之天气预报】教程文章相关的互联网学习教程文章

微信小程序学习总结(四) 一. 视图容器 1. view 视图容器属性名类型默认值说明hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0hover-start-time Number 50 ...

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题【代码】【图】

一、位置position【定位属性：static，relative，absolute，fixed，inherit，-ms-page，initial，unset】 1.static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中。 2.relative：【相对于自己本身在流中的位置的偏移】元素框偏移某个距离。元素扔保持其未定位前的形状，它原来所占的空间扔保留。 3.absolute：【相对于父元素 —— 前提是父元素的位置是确定的】...

【微信小程序】自定义导航栏【代码】【图】

大部分情况下我们都是使用微信官方自带的 navigationBar 配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。思路隐藏官方导航栏获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算导航栏高度编写新的导航栏页面引用自定义导航一、隐藏官方导航栏隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。{"path" : "pages/public/login","style": {"navigationBarTitleText": "","...

微信小程序获取当前位置并调用微信内置地图打开【代码】【图】

图示：index.wxml  <button bindtap="map">定位</button> index.js //index.js //获取应用实例 const app = getApp() Page({data: {},map:function(){wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success: function (res) {var latitude = res.latitudevar longitude = res.longitudewx.openLocation({latitude: latitude,longitude: longitude,scale: 28})}})} })解说：1、index.wxml...

微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示（转载）【代码】【图】

一、前言项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次，是基于微信小程序开发而提炼出一个简单方便使用的方法，网页开发中同样可用。这次使用的还是字体，主要是字体这个比较通用，颜色，大小都可以自己定义。当然了，来的最快的其实是用图片代替。二、微信小程序中评分功能实现 1.css文件中引入字体文件。也可以点此下载字体文件 @font-face { font-family: FontAwesome; src: url(h...

[微信小程序]实现一个自定义遮罩层【代码】【图】

正文：先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bindtap="showview">Show</button> <view class="bg" bindtap=hideview style=display:{{display}}></view> <view class="show" bindtap=hideview style=display:{{display}}>申请成功 <view class=txt>您的密码为:123456</view> </view> .bg {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-colo...

微信小程序之数据传递【代码】【图】

本文主要介绍，页面跳转间的数据传递。传递的数据类型主要有1，基本数据类型；2，对象；3，数组集合；先告诉你，本质上都是string类型传递。但是对于对象和数组集合的传递需要小小的处理一下传递时的数据和接收后的数据。 1，传递基本数据类型 index.js 发送页JSPage({data: {testStr: 字符串str},onl oad: function () {},next: function(e){wx.navigateTo({url: /pages/test/test?str=+this.data.testStr,})} })test.js 接受页J...

【微信小程序】获取用户地理位置权限，二次请求授权，逆解析获取地址【代码】【图】

摘要：微信小程序内获取用户地理位置信息授权，被拒绝后二次获取，获取权限后逆解析得到用户所在省市区等.. 场景：商城类小程序，在首页时需展示附近门店，即用户刚进入小程序时就需要获取到用户位置信息 step1 在小程序中若要获取用户地理位置信息，需得到用户明确授权，且声明用途，所以首先在app.json中配置声明参见（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html）"permission":...

2019课设---基于微信小程序的食堂订餐送餐系统设计【构思】（12）【图】

第12 天:(1)完成数据库的改善工作。（2）完善送货员的订单详情部分的时间问题明日计划：（1）根据数据库完善代码（2）根据老师的建议作出改善今日小结：上午主要把数据库重新设计了一下，这样方便查找，减少代码的重复度。另外，学习了时间戳，可以获取当前时间，完善订单信息。下午老师进行小评。emmm,可怜我抓不到重点，好像没有给老师看到送货员和采购员的页面。因为前面的页...

趣味测试类微信小程序【图】

先说说项目需求吧， l 点击【再测一次】，重新开始测试流程，主持人回复第一个题目，流程同上；答完全部题目后，底部不显示【立即开始分析】按钮，而是直接展示结果，且上一次测试内容不清空；如退出再进来，则清空全部历史记录。图片说明： l 图片上面显示微信头像和昵称 l 名称：左右脑人才鉴定，下面显示2019权威测试标记； l 分数、简述文案与详述文案 l 二维码：H5聚合页的二维码 l 二维码文案为：长按识别二维码|快来领取...

【微信小程序企业级开发教程】快递查询实例【代码】

//index.js //获取应用实例 const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),expressNu:null,expressInfo:null},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onl oad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else ...

微信小程序---------前段调取接口获取数据，并显示在页面需要的位置！【图】

建议刚入坑小程序的朋友，不懂的仔细看看！然后记住，多使用。话不多B说，直接上代码：部分说明： setData()；该方法是小程序特有的，就是一个将数据渲染到页面的方法，建议仔细去看看官方文档了解下（之前折腾了好久！）

开发微信小程序还是H5，两者的区别是什么？

现在如果说到小程序相信大家都不会陌生，经过数据统计现在微信小程序的数量已经达到了百万个的级别，其实不光有微信小程序，其他的app也有小程序，比如百度小程序、抖音小程序和支付宝小程序等，小程序很多app都有，只不过由于微信使用的用户更多，所以微信小程序比较出名，但是现在移动端还有一个产品比较流行，那就是H5，很多客户不懂这两者的区别，今天我们给大家简单的介绍一下。首先来说微信小程序，微信小程序是基于微信上的...

微信小程序端上传照片ssm后台处理【代码】【图】

微信小程序端的效果1：微信端代码（2）wxxml <view class="container-body container-gray" style="display:{{showfootertab==0?'block':'none'}}"><form bindsubmit="evaSubmit"><view class="group"><view class="group-header">问题描述</view><view class="group-body"><textarea name="evaContent" maxlength="500" value="{{evaContent}}" class="weui-textarea" placeholder="填写内容(12-500字)" bindblur="charChange" /...

微信小程序picker 日期（年/月/日/时/分）选择器【代码】【图】

<view class="df yuding" style="padding:24rpx 0;"><view class="fs26">预计到店</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><input value={{time}} name="dd_time" placeholder=选择时间 class="fs26 changetime"/></picker></view>const date = new Date(); const years = []; const months = [];...

首页 / 更多教程 / 微信小程序案例之天气预报

微信小程序案例之天气预报

内容导读

内容图文

内容总结

内容备注

内容手机端

【微信小程序案例之天气预报】教程文章相关的互联网学习教程文章

微信小程序学习总结(四)【代码】

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题【代码】【图】

【微信小程序】自定义导航栏【代码】【图】

微信小程序获取当前位置并调用微信内置地图打开【代码】【图】

微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示（转载）【代码】【图】

[微信小程序]实现一个自定义遮罩层【代码】【图】

微信小程序之数据传递【代码】【图】

【微信小程序】获取用户地理位置权限，二次请求授权，逆解析获取地址【代码】【图】

2019课设---基于微信小程序的食堂订餐送餐系统设计【构思】（12）【图】

趣味测试类微信小程序【图】

【微信小程序企业级开发教程】快递查询实例【代码】

微信小程序---------前段调取接口获取数据，并显示在页面需要的位置！【图】

开发微信小程序还是H5，两者的区别是什么？

微信小程序端上传照片ssm后台处理【代码】【图】

微信小程序picker 日期（年/月/日/时/分）选择器【代码】【图】

更多教程 - 最新教程

更多教程 - 最热教程