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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1672
14
1428
52
1332
25
1277
29
1257
24
How to use PHP to implement weather forecast function
Jun 27, 2023 pm 05:54 PM
As a popular back-end programming language, PHP is widely popular in the field of web development. The weather forecast function is a common web application scenario. Implementing the weather forecast function based on PHP is relatively simple and easy to understand. This article will introduce how to use PHP to implement the weather forecast function. 1. Obtain weather data API To implement the weather forecast function, you first need to obtain weather data. We can use third-party weather APIs to obtain real-time, accurate weather data. At present, the mainstream weather API providers in China include the free “Xinzhiwei” and
How to use Java Websocket to implement real-time weather forecast function?
Dec 17, 2023 pm 05:10 PM
How to use JavaWebSocket to implement real-time weather forecast function? With the popularity of the Internet and mobile devices, real-time weather forecast function has become one of the essential functions of many applications. Using JavaWebSocket technology can realize real-time communication conveniently and quickly, providing users with the latest weather forecast information. This article will introduce how to use JavaWebSocket to implement the real-time weather forecast function and provide specific code examples. Environment preparation Before starting, you need to make sure that you have installed
Google launches 'advanced weather forecasting AI” MetNet-3, claiming to predict super-traditional physical models
Nov 03, 2023 pm 05:25 PM
IT House reported on November 3 that Google Research and DeepMind collaborated to develop the latest weather model MetNet-3. This model is based on the previous MetNet and MetNet-2. It can predict global weather conditions 24 hours in advance. High-resolution forecasts including precipitation, surface temperature, wind speed, wind direction and felt temperature. IT House found that Google mentioned that the MetNet-3 model has been implemented in the "Google Mobile Software" weather forecast on the mobile platform. The MetNet-3 model can create "smooth and high-precision" predictions with a spatial resolution of 1 to 4 kilometers and an analysis interval of 2 minutes. Experiments have proven that MetNet-3's prediction capabilities surpass traditional physical weather forecast models. For example
How to set the weather forecast on Huawei mobile phones on the desktop Detailed explanation: Tutorial on adding desktop widgets to mobile phones
Mar 02, 2024 pm 12:34 PM
Since December 2021, Huawei & Honor mobile phones have launched the Vientiane desktop widget function. Many convenient functions, visually optimized desktop controls, etc. have been added to many users’ mobile desktops; by August this year, the two major merchant platforms also opened up sports and health data, weather data, music data, system data, etc., allowing users to use their mobile desktops The interactive operation is more convenient, faster and more interesting, allowing users to DIY and create their own personalized desktop. Mobile desktop after adding widgets Recently, many Huawei mobile phone users have reported that they are not clear about how to add desktop widgets on Huawei and Honor mobile phones, complaining that the process is too complicated and cumbersome. In order to help everyone solve this problem, Qian Shuxian has prepared a detailed operation process, hoping to
PHP permission management and user role setting in mini program development
Jul 04, 2023 pm 04:48 PM
PHP permission management and user role setting in mini program development. With the popularity of mini programs and the expansion of their application scope, users have put forward higher requirements for the functions and security of mini programs. Among them, permission management and user role setting are An important part of ensuring the security of mini programs. Using PHP for permission management and user role setting in mini programs can effectively protect user data and privacy. The following will introduce how to implement this function. 1. Implementation of Permission Management Permission management refers to granting different operating permissions based on the user's identity and role. in small
PHP page jump and routing management in mini program development
Jul 04, 2023 pm 01:15 PM
PHP's page jump and routing management in mini program development With the rapid development of mini programs, more and more developers are beginning to combine PHP with mini program development. In the development of small programs, page jump and routing management are very important parts, which can help developers achieve switching and navigation operations between pages. As a commonly used server-side programming language, PHP can interact well with mini programs and transfer data. Let’s take a detailed look at PHP’s page jump and routing management in mini programs. 1. Page jump base
PHP security protection and attack prevention in mini program development
Jul 07, 2023 am 08:55 AM
PHP security protection and attack prevention in mini program development With the rapid development of the mobile Internet, mini programs have become an important part of people's lives. As a powerful and flexible back-end development language, PHP is also widely used in the development of small programs. However, security issues have always been an aspect that needs attention in program development. This article will focus on PHP security protection and attack prevention in small program development, and provide some code examples. XSS (Cross-site Scripting Attack) Prevention XSS attack refers to hackers injecting malicious scripts into web pages
How to implement small program development and publishing in uniapp
Oct 20, 2023 am 11:33 AM
How to develop and publish mini programs in uni-app With the development of mobile Internet, mini programs have become an important direction in mobile application development. As a cross-platform development framework, uni-app can support the development of multiple small program platforms at the same time, such as WeChat, Alipay, Baidu, etc. The following will introduce in detail how to use uni-app to develop and publish small programs, and provide some specific code examples. 1. Preparation before developing small programs. Before starting to use uni-app to develop small programs, you need to do some preparations.
