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

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:

"employees":[
  {"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>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

-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:

    JSON.parse()

    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.

    {
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
    ],
    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
    },
    "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.

WXML

It takes a html-like role in web development.



  
    
    
      
      {{userInfo.nickName}}
    
  
  
    {{motto}}
  

WXSS

It takes a css-like role in web development.

/**index.wxss**/
.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;
}

JS

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:

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

Leave a Reply