小程序 params_如何从零开始两天撸一个微信小程序？！（内含源码）

【程序人生 编者按】新人如何入门小程序？不妨尝试做一个实用性强的天气应用小程序吧。下面是作者只用了两天时间写的已上线天气小程序，一起来学学如何做的。

前期准备

天气数据

因为这是个人的DEMO，开发前就决定选择免费的天气数据(个人开发免费)，我选择了百度地图开放平台的天气数据，正好也提供了小程序对应的 SDK，可能相比于其他的天气 API，百度返回的数据偏少：例如当天 PM2.5、当天和未来三天数据、当天生活指数，但是对于一款简单的天气应用小程序来说也够了。

地理编码

获取天气数据默认返回当前城市的天气数据，如果要获取其他的城市的天气数据，需要传入经纬度。为了获取其他城市的经纬度，这里使用的地图的地理编码接口，输入城市名，输出经纬度，然后调用获取天气数据 API 即可。

运行前准备

1. 注册微信小程序，获取 AppID
2. 注册百度地图开放平台开发者，创建应用，获取 ak(其他配置自行查看)
3. 在 app.js 中替换 globalData 中的 ak 为自己的 ak
4. Run

具体实现

该应用有五个页面：首页、城市选择页、设置页、关于页、系统信息页(展示页)。分别是这样实现的：

首页

从上到下依次是：其他城市天气搜索、当前城市数据展示、当天和未来三天天气数据展示、当天生活指数展示、footer。下拉刷新会刷新当前地区的天气数据。其中，顶部城市天气搜索和生活指数可以在设置中隐藏。屏幕右下角是一个可以移动的悬浮球菜单，点击后会弹出城市选择、设置、关于页面的入口。背景色默认是 #40a7e7 纯色，可在设置中更换背景图，未来三天天气预报和生活指数分别添加了透明的黑色背景。最终实现图如下：

主页面

先定义一个方法获取当前地区的天气数据：

init(params) { let that = this let BMap = new bmap.BMapWX({ ak: globalData.ak, }) BMap.weather({ location: params.location, fail: that.fail, success: that.success, })},

ak 请替换为自己的 ak，因为需要获取用户的地理位置，所以在 fail 的回调中需要处理用户拒绝获取地理位置的逻辑。这里处理为：提示打开地理位置授权，3000ms 后 wx.openSetting() 跳转到小程序设置页，如下：

fail (res) { wx.stopPullDownRefresh() let errMsg = res.errMsg || '' // 拒绝授权地理位置权限 if (errMsg.indexOf('deny') !== -1 || errMsg.indexOf('denied') !== -1) { wx.showToast({ title: '需要开启地理位置权限', icon: 'none', duration: 3000, success (res) { let timer = setTimeout(() => { clearTimeout(timer) wx.openSetting({}) }, 3000) }, }) } else { wx.showToast({ title: '网络不给力，请稍后再试', icon: 'none', }) }},

获取到用户的地理位置后，执行 success：

success (data) { wx.stopPullDownRefresh() let now = new Date() // 存下来源数据 data.updateTime = now.getTime() data.updateTimeFormat = utils.formatDate(now, "MM-dd hh:mm") let results = data.originalData.results[0] || {} data.pm = this.calcPM(results['pm25']) // 当天实时温度 data.temperature = `${results.weather_data[0].date.match(/d+/g)[2]}` wx.setStorage({ key: 'cityDatas', data: data, }) this.setData({ cityDatas: data, })},

看一下返回的天气数据格式：

{ "error": 0,  "status": "success