基于微信小程序的天气预报终端设计
本次开发是利用微信开发者工具Nightly V1.02版本进行开发的。
开发语言是WXML+WXSS+JS
天气查询设有当前天气，未来三天，一周天气，24小时温度及气温变化，相关生活指数，其他城市天气查询等功能。
先看效果图
1项目设计内容
(1)首页登录模块能获取用户登录的信息，显示用户头像，并且有２个接口能进入天气查询和计算器。
(2)天气查询模块能显示当天的天气信息：温度，风向，风力，阴晴，PM2.5，未来三天，一周天气，24小时温度及气温变化，相关生活指数，其他城市天气查询和新冠肺炎疫情查询。
(3)计算器模块能做简单的15位的＋、－、＊、／、％运算，用户输入的不符合运算规则，条件语句判断后，控制台打印NaN，不做任何操作.
(4)将这３个板块整合到一起，具有良好的页面跳转和交互功能。
1.1整体思路
本次开发是利用微信开发者工具Nightly V1.02版本进行开发的，开发人员需要具备WXML+WXSS+JS三种前端语言基础即可开发调试。该开发工具有编辑器，模拟器，调试器，代码在编辑器内被编译运行后其效果会实时显示在模拟器上，如果编译不通过控制台会报错，提示报错信息，开发者可以在调试器上单步调试运行。模拟器选择的是iPhone6/7/8机型，网络选择为WiFi。本项目是设计天气预报加简易计算器的应用，主要介绍主板块天气查询，副板块简易计算器的开发难度不是很大，但也有很多细节之处。整体项目，分为三个大页面，主页面index,作为首页上面显示用户信息、头像。下面有2个模块，天气查询weather和计算器calculator，用户根据需求自行点击进入。我们用到微信平台提供给用户的大概设计模板，这里包括系统初始化组件app.json、app.js、app.wxss、project.config.json，是为了对整个项目进行初始化配置，这部分开发者不用担心，只需在上面进行操作修改为用户指定样式就行。由于在天气查询页面会实时获取用户的动态地理位置，需要用到百度地图的微信小程序JSAPI接口，因此我们还需要在https://lbsyun.baidu.com/上下载第三方工具链bmap-wx.min.js作为本项目的库函数封装在libs中，我们在设计开发该项目时，为了后期的维护和修改，将页面布局、页面样式、页面效果分别单独封装起来。另外在天气查询页面由于气候是多种的，我将"晴", “多云”, “阴”, “阵雨”, “雷阵雨”,“小雪”, “中雪”, “大雪”, “暴雪”, “雾”, “冻雨”,……气候类型抽离出来单独封装，并用数组、指针进行循环遍历，达到动态实时现实天气的目的。我将本次将要用到的png图片和icon图标都放在img文件夹下，当要用到时，直接绝对路径引用或者数组循环遍历。
2项目开发设计的总目录结构
libs库文件夹下放的是百度mapAPI文件；
pages文件夹下放index首页，weather天气查询，calculator计算器，city城市天气查询，virus新冠疫情查询
src文件夹下放icon图标和img背景图；
style文件夹下放整个页面的布局样式；
utils文件夹下放整个项目所用到的工具类；
project.config.json，site.json都是小程序逻辑层和渲染层的配置；
app.json，app.js，app.wxss用来实现页面的交互和跳转。
3项目的详细设计及功能的实现
3.1认识开发者工具及搭建环境
3.1.1注册账号申请APPID
1，注册账号。打开微信公众平台（https://mp.weixin.qq.com）右上角立即注册。
2，选择需要注册的账号类型，这里选择小程序-个人，在根据指引填写资料提交。
3，完成邮箱激活，并登记信息就可以有账号。
安装开发者工具
登录小程序后台 ，我们可以在菜单 “首页”-“设置”-“基本设置” 看到小程序的 AppID 了 ，小程序的 AppID 相当于小程序平台的一个身份证。
3.1.3安装并认识开发者工具
有小程序帐号之后，我们需要一个工具来开发小程序。前往开发者工具下载页面https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据自己的操作系统下载对应的安装包进行安装。打开小程序开发者工具，用微信扫码登录开发者工具即可。
登录页
在登录页，可以使用微信扫码登录开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。
主界面
开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、资源管理器、编辑区、调试器 六大部分。
3.1.4登录开发者工具并创建项目
进入开发者工具扫码登陆，后点击小程序-创建新项目-选择文件存储路径E盘的本科毕业设计路径下-选择小程序名字本科毕业设计-小程序AppID：wxe344903caa37d
58f，创建成功进入到项目。
当符合以下条件时，可以在本地创建一个小程序项目
1.需要一个小程序的 AppID；如没有 AppID，可以选择申请使用测试号。
2.登录的微信号需要是该 AppID 的开发者；
3.需要选择一个空目录，或者选择的非空目录下存在 app.json 或者 project.config
.json。当选择空目录时，可以选择是否在该目录下生成一个简单的项目。
3.1.5搭建环境及配置项目
我们首先要做的是初始化项目配置，可以看到微信已经已经为开发者提供了一套Hello World程序。登录wx.login({success: res => {发送 res.code 到后台换取 openId, sessionKey, unionId，wx.getUserInfo({success: res => 可以将 res 发送给后台解码出 unionId， this.globalData.userInfo = res.userInfo，由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回，所以此处加入 callback 以防止这种情况，获取用户信息wx.getSetting({success: res => {if (res.authSetting[‘scope.userInfo’]) ，已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框。由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回， 在没有 open-type=getUserInfo 版本的兼容处理，所以此处加入 callback 以防止这种情况。点击即可获取头像昵称，微信授权允许，即可看到用户头像。
//index.js //获取应用实例 var app = getApp() Page({ data: { userInfo: { avatar: '../../src/img/menu-img.jpg', name: "金阳", post: "前端开发实习生", desc: "本科毕业设计！欢迎大家使用我的小程序，若有好的意见或建议，请发到邮箱1571849142@qq.com" } }, onShareAppMessage: function () { return { title: '欢迎转发我的小程序', path: '/pages/index/index.js' } }, //事件处理函数 weatherSearch: () => { wx.navigateTo({ url: '../bar/index' }); }, calc: () => { wx.navigateTo({ url: '../calculator/calculator' }); }, virus: () => { wx.navigateTo({ url: '../virus/virus' }); }, map: () => { wx.navigateTo({ url: '../map/map' }); }, calendarList: () => { wx.navigateTo({ url: '../calendar/index' }); }, onLoad: function () { } })
