1 Introduction

According to the official introduction, the WeChat Applets can be easily acquired and spread in WeChat, that provides an enormously convenient connection between the users and abundant services. Thanks to the complete documents and the lightweight development tool, a quick start to develop a simple applet is possible. It's not impossible to say that everybody can build an applet. More information can be referred on the official online development documents: Introduction to WeChat Applet.

Despite that a course design last semester gave me the opportunity to design the user interface using JS, HTML, and CSS, I'm green in the field of front-end development. Fortunately, there are lots of good open-source programmes, so that I can fork them and learn how does everything go. I fork a program provided by SwiftCafe, they explain at great length the structure of the program, data acquisition, and the logic of the application layer. The complete code can be download from Github: : https://github.com/swiftcafex/wechat-weather.

2 Code Structure

The structure of the program is like following: 

+--pages (represents a page, which includes the .js,.json,.wxml, and .wxss files)
|  |
|  +--index
|     |
|     +--index.js
|     +--index.json
|     +--index.wxml
|     +--index.wxss
|
+--utils
|  |
|  +--util.js (defines the global variables, which can be acquired anywhere)
|
+--app.json (global configuration. For instance, it defines the first page of the applet. )
+--app.wxss
+--app.js (There exists only one app.js file.)

The detailed description can be found at former mentioned links.

3 Time-based Background Image

Let's add the simple function to the applet now! We hope that the background image of the weather applet will change as time goes. If you have some experience in HTML, JS, and CSS, you might figure out the solution immediately. Nevertheless, in WeChat Applet the solution does differ, even though the basic idea is the same.

3.1 Configuration of index.wxml

Noted that this applet only has one page, the initial or in other words, the first page is described in the index.wxml file. The "box" of the page is defined by the top level class. We provide "" as the placeholder, and name it as "myclass". 

1: <view class="">
2: ...
3: </view>

3.2 Configuration of app.wxss

In app.wxss we difined the styles of three types of classes, namely "day", "sunset", and "night". 

 1: .day{
 2: ...
 3: background-image: url('...daytime_background...')
 4: }
 5: 
 6: .sunset{
 7: ...
 8: background-image: url('...sunset_background...')
 9: }
10: 
11: .night{
12: ...
13: background-image: url('...night_background...')
14: }

Noted that, the image file must be online or converted to base64 codes.

3.3 Configuration of index.js

The logical interaction is implemented in index.js. The official document gives the explaination:

"On the basis of JavaScript, we made some changes to facilitate the development of Mini Programs.

  • Add App and Page methods to register programs and pages.
  • Add getApp and getCurrentPages methods to get the app instance and the current page stack respectively.
  • Provide a rich set of APIs, such as WeChat user data, Scan, payment and other WeChat unique capabilities.
  • Each page has an independent scope and provides modular capabilities.
  • Since the framework is not running in a browser, some capabilities of JavaScript are not available in the web, such as document and window.
  • All the code written by the developer will eventually be packaged as a JavaScript and run when the Mini Program starts, until the Mini Program is destroyed. Similar to ServiceWorker, the logical layer is also called App Service."

The function of changing the background image as time goes is written in Page methods. 

 1: Page({
 2:     data: {
 3:         //initialize data "myclass"
 4:         myclass: {}
 5:     },
 6: 
 7:     onLoad: function () {
 8:         //this will be executed when the program is loaded
 9:         var that = this;
10:         var date = new Date();
11:         var hour = date.getHours();
12: 
13:         if (hour > 6 && hour < 16)
14:             //change to the background of day
15:             that.setData({
16:                 myclass: "day"
17:         })
18:         else if (hour > 16 && hour < 19)
19:             // change to the background of sunset
20:             that.setData({
21:                 myclass: "sunset"
22:         })
23:         else
24:            // change to the background of night
25:             that.setData({
26:                 myclass: "night"
27:         })
28:     }
29: 
30: })

Noted that the setData function is used to send data from the logical layer to the view layer while changing the value of the corresponding this.Data. (See more about the usage of var that = this in javascript).