一、项目文件列表
二、小程序配置
使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{ "pages":[ "pages/index/index"
], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "天气预报", "navigationBarTextStyle":"black"
}, "networkTimeout": { "request": 10000
}, "debug": true}由于项目只有一个页面，所以不需要底部tab。另外设置网络请求时间为10秒，并且启用调试模式。
三、小程序逻辑层
首先在common.js中使用获取用户当前地理位置接口获取用户的坐标地址，坐标类型选择gcj02。
//获取当前位置坐标
function getLocation(callback) {
wx.getLocation({
type: 'gcj02',
success: function(res) {
callback(true, res.latitude, res.longitude);
},
fail: function() {
callback(false);
}
})
}Wx.getlocation调用成功之后，将坐标信息返回给callback函数。失败时将false传给callback函数。
获取到坐标之后，再使用百度接口查询天气。相应的查询代码如下所示。
function getWeather(latitude, longitude, callback) { var ak = "";//换成自己的ak,不要用方倍工作室的
var url = "https://api.map.baidu.com/telematics/v3/weather?location=" + longitude + "," + latitude + "&output=json&ak=" + ak;
wx.request({
url: url,
success: function(res){
console.log(res);
callback(res.data);
}
});
}在上述代码中，先定义百度接口的ak，再通过拼接参数构造url的其他部分。然后调用 wx.request 请求天气预报数据。
接下来把上述接口组合起来，组成给应用层的接口，相应代码如下所示。
function loadWeatherData(callback) {
getLocation(function(success, latitude, longitude){
getWeather(latitude, longitude, function(weatherData){
callback(weatherData);
});
});
}最后通过 module.exports对外暴露该接口。代码如下所示。
module.exports = {
loadWeatherData: loadWeatherData
}四、小程序页面与视图
在页面文件中，使用 require 将公共代码引入。代码如下所示。
WeMuseum博物馆微门户小程序主要功能包括展厅展馆、当前展览、馆藏文物、服务指南、活动讲座预约、参观预约等。具有“即开即用，用完即走”特点的微信小程序，创新了博物馆行业的服务方式，是传播博物馆服务和文化的便捷高效途径之一。微信小程序在博物馆中的应用，将会为博物馆文化的传播开辟出新渠道、新路径。我们的思路就是：轻量化前端，深度开发后台。
//index.jsvar common = require('common.js')
Page({
data: {
weather: {}
},
onLoad: function () { var that = this;
common.loadWeatherData(function(data){
that.setData({
weather: data
});
});
}
})在页面的Page函数中， data定义为天气的初始化数据，该数据将会以 JSON 的形式由逻辑层传至渲染层。在 onLoad 方法中，使用common中的 loadWeatherData 方法获取天气数据并设置到 UI 上，并将取到的数据使用 setData 方法将它设置到数据层中。
在页面的界面实现中，相应的代码如下所示。
{{weather.results[0].currentCity}} {{weather.date}} {{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}
最外层是一个 class 为 container 的 View，它的里面放了2个子 View，分别用于存放页面头和页面列表。页面头中存放城市名称和时间。页面列表用于存放最近几天的天气情况。
页面的样式表实现如下所示。
.header {
padding: 30rpx;
line-height: 1;
}.title {
font-size: 52rpx;
}.desc {
margin-top: 10rpx;
color: #888888;
font-size: 28rpx;
}.menu-list {
display: flex;
flex-direction: column;
background-color: #fbf9fe;
margin-top: 10rpx;
}.menu-item {
color: #000000;
display: flex;
background-color: #fff;
margin: 10rpx 30rpx;
flex-direction: column;
}.menu-item-main {
display: flex;
padding: 40rpx;
border-radius: 10rpx;
align-items: center;
font-size: 32rpx;
justify-content: space-between;
}.menu-item-arrow {
width: 96rpx;
height: 96rpx;
transition: 400ms;
}上述页面文件和样式表，都是从微信官方Demo中移植而来。
最终实现的天气预报小程序效果如图所示。
【相关推荐】
2.小程序配置0
