Build a weather forecast applet using a widget

1 Introduction to applets

When we use mobile phones everyday , Checking the recent weather is a common requirement , Can you make a small program to display the weather of the last seven days ？ The answer is yes , Using the external data source provided by wechat, we can easily obtain the weather forecast data publicly available on the Internet , To create our own proprietary applet .

2 Small program development method

To develop a weather forecast applet , Public API Is a must , Fortunately, there are many free API Website , We just need to register an account , Apply for test use , Free accounts are usually provided every day 50 Times of use , Being an individual user is actually enough .

obtain API after , You need to consider how to implement the functions of the applet , Our idea to solve the problem is to think about what ready-made functions of micro build can be used . External data sources are actually designed to meet the needs of data acquisition , We can obtain the interface data of the Internet through external data sources , Then the external data source is provided to the application call by defining variables .

The development steps are divided into creating external data sources 、 Create an 、 Defining variables 、 Component building 、 Preview release, etc .

3 Creating external data sources

Log in to the console , Find the data source in the menu bar on the left , Click create external data source

Insert picture description here

Enter the name and identification of the data source

Insert picture description here

After the data source is created, we need to create a new method

Insert picture description here

Enter the name and ID of the method , Enter the weather forecast API Of URL

Insert picture description here

Then click method test , See if our interface call is successful

Insert picture description here

If successful , You can click the parameter mapping

Insert picture description here

The data source will be created after the parameter is successfully entered

Insert picture description here

4 Create an applet

After the data source is defined , We can create the applet , Click the application on the left , Click blank application

Insert picture description here

Enter the app name , Type selection applet

Insert picture description here

Select Create a blank page , After successful creation, the home page is created by default

Insert picture description here

In order to display the data of the weather forecast , We need to define a variable first , Click the variable in the navigation bar

Insert picture description here

Create a model variable

Insert picture description here

Select the data source we created and the method we defined

Insert picture description here

We add a list item component to the page

Insert picture description here

Then bind the loop variable to the list item component

Insert picture description here

Insert picture description here

Then the name of the city 、 The weather 、 The date is bound to the corresponding attribute

Insert picture description here

In this way, the small program will be developed

5 Preview release

After the function is developed, it can be tested , We click the real-time preview function of the navigation bar

Insert picture description here

You can view the final effect of our applet in the browser

Insert picture description here