微信小程序入门:和风天气小程序
《移动软件开发》实验2
一、实验目标
1、掌握服务器域名配置和临时服务器部署;
2、掌握 wx.request 接口的用法。
二、实验步骤
1.使用和风天气API的准备工作
1.1 API密钥申请
在和风天气开发平台进行注册
和风天气开发平台 ~ 高效强大的天气API,天气SDK和天气插件 (qweather.com)
注册后在控制台的应用管理中,创建应用
获得了KEY
1.2 API调用方法
开发版 :https://devapi.qweather.com/v7/weather/now?[请求参数]
参数具体如下,使用时多参数以&&连接
如获取北京的天气情况:
https://devapi.qweather.com/v7/weather/now?location=101010100&key=你的KEY
请求URL和格式,具体参考和风官方开发文档
实时天气 - API | 和风天气开发平台 (qweather.com)
返回类型为json格式的键值对,同样参考开发文档,选取需要的即可;
1.3 服务器域名配置
小程序在与指定域名地址通信前需要将该域名地址添加到管理员后台白名单中;
故需要将https://devapi.qweather.com进行服务器配置。
登录mp.weixin.qq.com进入管理员后台进行配置
2.项目创建
2.1 获得一个空项目
将创建的项目中app.json中logs路径删除,logs文件夹及其下内容wxml内容等删去,具体参照上一篇步骤;
2.2 导入素材
本次会使用到和风图标素材,故需要先导入到小程序目录下
天气图标 - RESOURCE | 和风天气开发平台 (qweather.com)
先去和风平台下载icons资源包,可以在GitHub下将icons压缩包下载,较为方便;
3.视图设计
3.1导航栏设计
需要在app.json中将导航栏进行设计:
3.2界面设计
设计要求如下:
页面的设计图如下
此处用到picker组件,对城市进行选择;
随后对天气文本、图标、详细信息等进行设计:
再对详细信息进行设计
使用了三种自定义样式,也要在wxss中进行定义;
wxss设计与展示效果:
3.3 逻辑设计
3.3.1 更新省市区信息
在index.js中 data中声明region变量,赋初值;
编写一个函数regionChange进行对region变量的修改;
将其绑定在picker上;
实现效果:
3.3.2 实时更新天气信息
编写用于获取天气信息的函数,使用和风天气的API,在生命周期函数Onload和自定义函数regionChange中分别调用,用于初始化和切换城市时数据刷新;
getWeather的实现:
在Onload和regionChange的调用:
获取城市的天气信息,需要得到locationID,regionChange中获取的是城市名字,故还需要调用API来获取locationID,API使用具体参考官方文档
城市信息查询 - API | 和风天气开发平台 (qweather.com)
需要在开发平台中加入该域名
https://geoapi.qweather.com
防止重名,引入一个参数adm
编写的获取locationID的函数:
先获取locationID再通过locationID调用getWeather来获取当地的天气,此处会存在wx.request异步的问题,在问题总结与体会第3项进行了具体的解释;
修改后的getlocationID如下:
修改后的函数调用:
3.3.3更新页面天气信息
在page的data中声明now数组
将WXML页面上所有临时数据都替换为{{now.XXX}}
函数可以正常运行:
三、程序运行结果
初始状态:
切换城市:
切换后:
效果展示:(GIF)
四、问题总结与体会
1.显示“登录用户不是小程序的开发者”,导致无法真机调试等问题
同时这样导致我调用API时失败,毕竟用的appid不对。。。之前设置的服务器域名就白搭了。
解决办法:修改文件中appid
修改后解决,也不知道为什么创建时用了这个appid;
2.使用此方法调用API时,返回错误数据 code:”400“
官方文档中location应为locationID,而教程所给可能是汉字;
经测试确实如此,而放入locationID是可以正常返回的
所以需要从picker中去获取locationID
解决方法:使用和风天气的城市查询接口
所以需要从picker中去获取locationID
解决方法:使用和风天气的城市查询接口
3.两个函数不按顺序执行
希望先获取locationID再用得到的locationID来获取地区的天气信息,但实际执行情况恰恰相反,导致更新可能出错;
**解决方法:**因为wx.request是异步的,所以使用Promise包装来实现顺序执行;
成功解决:
微信小程序入门:和风天气小程序相关推荐
- 钉钉小程序入门2—区分小程序和H5微应用
一.简介 在钉钉小程序入门1-区分企业内部应用.第三方企业应用.第三方个人应用一文中我解释了钉钉的三种应用以及它们的区别,以企业内部应用为例,点击创建应用按钮后会弹出了如下的弹窗: 这里有一个应用类型 ...
- 微信小程序入门--快递查询小程序的制作
最近在自学微信小程序开发,做了一个很垃圾的快递查询小demo,记录一下(=^ ^=) 开发前准备:微信开发者工具.快递查询的接口 我用的快递查询接口是聚合数据的,地址如下https://www.juh ...
- [微信小程序入门-1]注册小程序帐号
解决注册微信小程序遇到的两个问题 学习微信小程序开发,第一步当然是注册一个小程序帐号,在这个过程中,我被整个过程秒晕了一下下,现在将我注册小程序的整个过程总结一下. 参考官网的简易教程,一步步按部就班 ...
- 微信小程序入门---01
目录 微信小程序入门 一.小程序简介 二.第一个小程序 二.小程序代码的构成 三.WXML模块 四.WXSS 样式 五.JS 逻辑交互 六.组件 七.API 八.WXML 模板语法 - 数据绑定 九. ...
- C语言程序入门设计OJ练习题7 浙江大学——程序入门设计-翁恺
C语言程序入门设计 OJ #浙江大学--程序入门设计-翁恺 7.高精度小数 题目内容: 由于计算机内部表达方式的限制,浮点运算都有精度问题,为了得到高精度的计算结果,就需要自己设计实现方法. (0,1 ...
- 【微信小程序】使用和风天气接口api(全过程)——获取天气
介绍 这里是小编成长之路的历程,也是小编的学习之路.希望和各位大佬们一起成长! 以下为小编最喜欢的两句话: 要有最朴素的生活和最遥远的梦想,即使明天天寒地冻,山高水远,路远马亡. 一个人为什么要努力? ...
- 微信小程序开发--利用和风天气API实现天气预报小程序
本来是参照<微信小程序开发实战>做一个天气预报小程序的,实际运行的时候提示错误,code 400,参数错误.说明问题应该出在查询API的语句上,没有返回结果. 查阅后才知道,可能书籍出版时 ...
- 微信小程序-小程序天气页面对接和风天气API实例
一.前言展示 最近开发小程序发现需要植入一个天气系统,在网上找了好久实例,发现很多都是不太好看的,或者发不出来的也用不了,最后我只能自己动手写出来的一个页面,现在分享出来给大家,希望能给到你们帮助! ...
- 天气预报小程序源码,天气类微信小程序源码。API使用的是和风天气。
天气预报小程序源码,天气类微信小程序源码.API使用的是和风天气. 可以提供实时全国天气气象信息,及时发布天气预报.灾害预警.气象云图.旅游天气.台风.暴雨雪等气象信息, 为我国的生产生活提供全面精确 ...
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
最新文章
- JackJson 使用记录
- 保障K8s部署中的安全性
- L :WeChat Walk
- python类继承返回值_python继承threading.Thread实现有返回值的子类实例
- MySQL事件与定时器,mysql下存储过程与定时器
- 被新款iPad和AirPods拯救的苹果 夺回全球市值最高公司宝座
- 何时使用 Golang
- mysql 断号查询_怎么查询SQL中连续编号中间的断号
- CSS代码属性大全(HTML)
- linux笔记8.0
- 51单片机学习笔记_2 LED 模块
- 设计模式之抽象工厂模式以及与工厂模式区别
- Python数据处理041:数据分析之时间序列
- 计算机打印机无法打印机驱动,win7安装打印机出现无法找到打印机驱动程序包...
- 「ZigBee模块」串口通讯 -- 详解
- PHP(euc) + Smarty(euc) で、UTF-8やSJIS出力する方法(解決策とまとめ)
- 【高等数学】第一章 函数与极限——第六节 极限存在准则 两个重要极限
- Android:使用 Flutter 包创建 Xylophone 应用程序
- RN组件 - Image图片
- 项目开发流程(简述)
热门文章
- [ElasticSearch ]2轻量级搜索
- ESP32控制器使用SX1278 LoRa模块的方法
- 在大学城开一间宾馆能挣多少钱?
- 华为认证hcip怎么找工作?考取华为认证hcip证书可以做什么?
- 最新炫酷恶趣图制作神器小程序源码+支持流量主/功能强大
- hdfs 指令_HDFS之一:hdfs命令行操作
- 获取当前的url并移除不想要的字段
- i3处理器_千元英特尔10代I3处理器套装跑分72万?微星差异化赢得市场
- WIN10 共享文件夹并取消密码访问
- error CS0227: Unsafe code may only appear if compiling