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" })
}
})