微信小程序实战项目开发（天气预报项目实战）：内涵开发说明文档、需求文档 && 手把手分步骤教你写出自己的小程序项目 && 天气预报小程序 && 时实请求获取天气 && 自定义功能 && 完整的源代码

文章目录

• • • 微信小程序开发实现天气预报
    • 一、项目需求分析
    • • 需求分析
      • 实现思路分析详解如下：
      • • • 1、创建项目、全局配置 json 文件
          • 2、在 wxml文件中完成布局
          • 3、wxss的实现美化效果
          • • 颜色渐变效果：
            • 鼠标 hover 浮动阴影效果：
            • 圆角效果
            • 底部按钮button使用flex布局实现
            • 对天气信息采用分模块化的配色，同时添加了动画效果
            • 4、业务逻辑的实现
            • • 全部逻辑代码如下
              • js代码分步介绍：
              • 获取天气详细信息模块
              • 将获取到的数据渲染到页面中：
              • 二、完整代码实现
              • • 1、wxml代码
                • 2、wxss代码
                • 3、js代码
                • 4、效果图:

                  微信小程序开发实现天气预报

                  一、项目需求分析

                  需求分析

                  1. 静态页面设计：要求界面美观 → 在wxss代码文件中对 wxml代码文件进行合理布局和美化，舒适的交互效果.
                  2. 功能逻辑完善：能够使用到 wx.request 请求接口实现天气预报查询的功能

                  主要使用到的技术栈如下：

                  • wxml：中使用了 picker 组件标签来完成了我们城市选择
                  • wxss：我们使用了简单的布局：background-image、动画效果等常用属性完成页面的美化
                  • app.json：该项目由于考虑到为一个页面，所以在全局配置文件中对页面的 window进行了配置，从而实现顶部的下拉、背景、文字和颜色的效果
                  • js：文件中我们主要的使用了 wx.request 方法请求和风天气的WebAPI 后端接口 实现了最直观的业务逻辑。

                    实现思路分析详解如下：

                    1、创建项目、全局配置 json 文件

                    创建小程序项目，使用JavaScript开发，这一点注意了即可。

                    项目创建成功后，我第一时间对 json 文件中的代码进行阅读和配置，这也是项目开发的第一步和后续操作防止出现问题的重要手段

                    代码如下：

                    	"window": {
                    		"navigationBarBackgroundColor": "#00FFFF",
                    		"navigationBarTextStyle": "black",
                    		"navigationBarTitleText": "WeatherQuery",
                    		"backgroundColor": "#00FA9A",
                    		"backgroundTextStyle": "light",
                    		"enablePullDownRefresh": true
                    	}
                    

                    • 同时需要注意的是：pages配置值的时候注意我们天气页面的位置，需要放在第一个，否则会出现跑错的问题！（最好建议除非有多个页面，不然除了需要的直接删掉就好了）。

                      2、在 wxml文件中完成布局

                      实现代码如下：

                      		
                      		
                      			当前查询城市:
                      			{{city}}