Mini program development weather forecast

This article introduces how to use the WeChat applet to develop the weather forecast function.

1. Project file list

2. Mini program configuration

Use the app.json file to globally configure the WeChat applet, determine the path of the page file, window performance, set the network timeout, set multiple tabs, etc.

{  "pages":[    "pages/index/index"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "天气预报",    "navigationBarTextStyle":"black"
  },  "networkTimeout": {    "request": 10000
  },  "debug": true}

Since the project has only one page, there is no need for bottom tabs. Also set the network request time to 10 seconds and enable debug mode.

3. Mini Program Logic Layer

First use the Get User's Current Geographic LocationInterfacein common.js to get the user's coordinate address, and select gcj02 as the coordinate type.
//Get the current locationCoordinates

function getLocation(callback) {
    wx.getLocation({
        type: 'gcj02',
        success: function(res) {
            callback(true, res.latitude, res.longitude);
        },
        fail: function() {
            callback(false);
        }
    })
}

After the Wx.getlocation call is successful, the coordinate information is returned to the callbackfunction. On failure, pass false to the callback function.
After obtaining the coordinates, use the Baidu interface to query the weather. The corresponding query code is shown below.

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);            
        }
    });
}

In the above code, first define ak of Baidu interface, and then construct other parts of the url through splicing parameters. Then call wx.request to request weather forecast data.
Next, combine the above interfaces to form an interface for the application layer. The corresponding code is as follows.

function loadWeatherData(callback) {
    getLocation(function(success, latitude, longitude){  
        getWeather(latitude, longitude, function(weatherData){
            callback(weatherData);   
        });
    });
}

Finally, the interface is exposed externally through module.exports. The code is shown below.

module.exports = {
    loadWeatherData: loadWeatherData
}

4. Mini Program Page and View

In the page file, use require to introduce the public code. The code is shown below.

//index.jsvar common = require('common.js')

Page({
    data: {
        weather: {}
    },
    onLoad: function () {        var that = this;
        common.loadWeatherData(function(data){
            that.setData({
                weather: data
            });
        });    
    }
})

In the Page function of the page, data is defined as the initialization data of the weather, which will be transmitted from the logic layer to the rendering layer in the form of JSON. In the onLoad method, use the loadWeatherData method in common to obtain weather data and set it to the UI, and use the setData method to set the obtained data to the data layer.
In the interface implementation of the page, the corresponding code is as follows.

<!--index.wxml--><view class="container">  
  <view class="header">
      <view class="title">{{weather.results[0].currentCity}}</view>
      <view class="desc">{{weather.date}}</view>
  </view>

  <view class="menu-list">
      <view class="menu-item" wx:for="{{weather.results[0].weather_data}}" wx:key="*this">
        <view class="menu-item-main">
          <text class="menu-item-name">{{item.date}} {{item.weather}} {{item.wind}} {{item.temperature}}</text>
          <image class="menu-item-arrow" src="{{item.dayPictureUrl}}"></image>
        </view>
      </view>
  </view></view>

The outermost layer is a View with class container, which contains two sub-Views, which are used to store the page header and page list respectively. The city name and time are stored in the page header. The page list is used to store the weather conditions of the past few days.
The style sheet implementation of the page is as follows.

.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;
}

The above page files and style sheets are all transplanted from the WeChat official Demo.
The final effect of the weather forecast applet is shown in the figure.

[Related recommendations]

1.WeChat applet complete source code download

2. WeChat mini program demo: Guoku and new version

The above is the detailed content of Mini program development weather forecast. For more information, please follow other related articles on the PHP Chinese website!