Continue to talk about the development of micro channel small program, this time with you to develop a complete micro channel small program, I hope to have some reference value for you.
Micro weather
This time let’s develop a weather forecast small program, the reason for choosing this type, there are two reasons. One is the weather class of small program overall complexity is relatively low, suitable for us to explain the problem. In addition, this type of application is also more suitable for the wechat mini program ecosystem, which I understand is not suitable for the development of overly complex applications. That’s why we chose this type. Let’s take a look at the end result first, to get a sense of it:
This is the final run on my debugger, showing the current and upcoming week weather conditions based on your current location. For the use of small program scenarios, I feel more suitable.
The preparatory work
I’m going to show you how it works, to build a sense of it. So then, we can get started. First establish a project in wechat developer tools:
Next, in the project creation window, there is a little explanation. In the AppID entry, if you already have a private beta account, fill in your AppID. If you do not have a private beta account, click “No AppID” next to it.
About the basic process of small program, as well as the project structure, you can see our previous article without internal test account, take you to experience the complete development process of micro channel small program. We won’t go into the basic part here.
The project structure
The file structure of the whole project is as follows:
As you can see, there’s an index directory that contains the home page. App.js is the main entry of the program, utils.js is our tool script for reading weather data. There is also a bg.jpg image file, which is the background image of the applet.
All the files for the project are here, isn’t it pretty simple? The full project can be found on our Github homepage at github.com/swiftcafex/…
After introducing the basic structure, we can start Coding. For the weather program, the first thing to do is get the weather data. Let’s take it one step at a time.
First of all, we need to obtain the current geographical location, wechat provides us with the corresponding interface, we can define such a method in util.js:
function getLocation(callback) { wx.getLocation({ success: function(res) { callback(true, res.latitude, res.longitude); }, fail: function() { callback(false); }})}Copy the code
The wx.getLocation method returns a latitude and longitude information for our current location. On success, we pass the information back to the callback, on failure we return false to the callback. Note that failure situations need to be handled carefully in real development. For example, if some users do not have location permissions enabled and do not handle failures, unexpected situations may occur.
Once we get the current location, what else do we need to get? Weather data. There are many related apis, and this small program uses the weather API provided by DarkSky.net. It provides a very simple API interface:
Function getWeatherByLocation(latitude, longitude, callback) {var apiKey = "your own Key"; var apiURL = "https://api.darksky.net/forecast/" + apiKey + "/" + latitude + "," + longitude + "?lang=zh&units=ca"; wx.request({ url: apiURL, success: function(res){ var weatherData = parseWeatherData(res.data); getCityName(latitude, longitude, function(city){ weatherData.city = city; callback(weatherData); }); }}); }Copy the code
The getWeatherByLocation method is still in util.js, and the logic is simple: concatenate Darksky’s API URL and call wx.request to request network data. Because we don’t need to use all the data that the API returns, we just need to get the weather for that day and the forecast for the next 7 days. So we also use the parseWeatherData method to get the data we need and recompose the new results. This method is defined as follows:
function parseWeatherData(data) {
var weather = {};
weather["current"] = data.currently;
weather["daily"] = data.daily;
return weather;
}Copy the code
As you can see from the above code, we just get the currently and Daily data of the original result set and then return it. The reason why we get some data like this is because we don’t need the rest of the interface data, so we don’t have to pass it to the application layer. The format of the original data is posted to you:
Optimize data format
You may have noticed that some of the data that this API is returning to us is in a format that we need to work with a little bit more. For example, time is returned to us as a timestamp, but we need to display the time on the UI, so we need to do a format conversion. Also, the format of the Temperature field is not what we need. We don’t need to display the temperature data after the decimal point, we can just take the whole number.
Define several methods for formatting data:
Function formatDate(timestamp) {var date = new date (timestamp * 1000); Return date.getMonth()+1 + "month" + date.getDate() + "day" + formatWeekday(timestamp); Function formatTime(timestamp) {var date = new date (timestamp * 1000); return date.getHours() + ":" + date.getMinutes(); Function formatWeekday(timestamp) {var date = new date (timestamp * 1000);} function formatWeekday(timestamp) {var date = new date (timestamp * 1000); Var weekday = [" Sunday ", "Monday" and "Tuesday", "on Wednesday", "Thursday", "Friday", "Saturday"]. var index = date.getDay(); return weekday[index]; }Copy the code
All three methods format the output of the date. The specific function code in the comments have been explained, not to repeat. Finally, we combine all the previous methods to form an interface to the application layer:
Copy the code
Call getLocation to request the current location. In the callback, determine whether the returned result succeeded in obtaining the location. If not, set a default location. This judgment is useful in real products. There are a lot of unsuccessful locations. For example, the user does not have the location permission enabled.
Next, the getWeatherByLocation method is called to get the weather data, and the original weather data is returned.
After the original data is read successfully, we package another layer and process the original data:
Function loadWeatherData(callback) {requestWeatherData(function(data){var weatherData = {}; weatherData = data; weatherData.current.formattedDate = formatDate(data.current.time); weatherData.current.formattedTime = formatTime(data.current.time); weatherData.current.temperature = parseInt(weatherData.current.temperature); var wantedDaily = []; for(var i = 1; i < weatherData.daily.data.length; i++) { var wantedDailyItem = weatherData.daily.data[i]; var time = weatherData.daily.data[i].time; wantedDailyItem["weekday"] = formatWeekday(time); wantedDailyItem["temperatureMin"] = parseInt(weatherData.daily.data[i]["temperatureMin"]) wantedDailyItem["temperatureMax"] = parseInt(weatherData.daily.data[i]["temperatureMax"]) wantedDaily.push(wantedDailyItem); } weatherData.daily.data = wantedDaily; callback(weatherData); }); }Copy the code
This is the final output to the application layer, which uses the data formatting methods we just defined to process the raw weather data back. Eventually passed to the callback method.
Finally we expose this method to the application layer:
module.exports = {
loadWeatherData: loadWeatherData
}Copy the code
This syntax is similar to NodeJS. So far, we complete the development of the data processing logic part of this small program. You can digest it a little bit, and we’ll deal with the logic of the application layer in the next article. If you want to see the full code, you can also download it from the Github homepage: github.com/swiftcafex/… .
If you find this article helpful, you can also follow the wechat official account Swift-cafe and I will share more of my original content with you
This site articles are original content, if you need to reprint, please indicate the source, thank you.