The composition of Wechat mini program

This is my very first time touching Wechat mini program, I have created my first demo program on official develop tool program and open it with my editor, let's have a look at the structure of its files.

The structure of my program demo:

So far, we can notice that here are four types of files, .js, .json, ,.wxml and .wxss.


JSON stands for JavaScript Object Notation.
JSON is a format for storing and transporting data.
JSON is often used when data is sent from a server to a web page.
JSON is a lightweight data interchange format.
JSON is not a kind of programming language, it takes static configuration role in Wechat mini programs.

- JSON syntax rule:
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays

- JSON Objects:
JSON objects are written inside curly braces.
Just like in JavaScript, objects can contain multiple name/value pairs:

{"firstName":"John", "lastName":"Doe"}

-JSON Arrays:
JSON arrays are written inside square brackets.
Just like in JavaScript, an array can contain objects:

  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}

-Converting a JSON Text to a JavaScript Object:
A common use of JSON is to read data from a web server, and display the data in a web page.
For simplicity, this can be demonstrated using a string as input.
First, create a JavaScript string containing JSON syntax:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Then, use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object:

var obj = JSON.parse(text);

Finally, use the new JavaScript object in your page:

<p id="demo"></p>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;

-What is JSON:

  • JSON stands for JavaScript Object Notation
  • JSON is a lightweight data-interchange format
  • JSON is "self-describing" and easy to understand
  • JSON is language independent *

    -Why JSON:
    Since the JSON format is text only, it can easily be sent to and from a server, and used as a data format by any programming language.
    JavaScript has a built in function to convert a string, written in JSON format, into native JavaScript objects:


    So, if you receive data from a server, in JSON format, you can use it like any other JavaScript object.

Specially, let's talk about .json files within our folder.

  • app.json:
    Macro configuration, it includes the path, the appearance, etc.

    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "style": "v2",
    "sitemapLocation": "sitemap.json"
  • project.config.json
    The configuration file for develop tool, when we switch the machine we could use the our personal configuration.

  • page.json & log.json
    The configuration file for related page of mini program.


It takes a html-like role in web development.



It takes a css-like role in web development.

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;

.userinfo-nickname {
  color: #aaa;

.usermotto {
  margin-top: 200px;


The logic/reaction file.
For example,

{{ msg }}

What if we want to change the text content when user click the button? We can add code into .js file:

  clickMe: function() {
    this.setData({ msg: "Hello World" })

Leave a Reply