May 22, 2021 Mini Program Cloud Development Study Guide
3. Rendering of component properties
4. Renders a single sheet of data in the array
Let's take a look at data binding today. is to separate some of the dynamic data in WXML and put it into the Page data of the corresponding js file.
The concept of data binding is actually confusing to many friends who have studied web development. I nstead of clinging to this esoterable concept, you can do it first to understand what effect it is. In the subtle, you will get to the front end of a very important technical knowledge Oh
We can write such a piece of code in the page file wxml of the small program, for example, we can write in home.wxml,
<view>张明，您已登录，欢迎</view>
Such a scenario we often encounter, different people use an app or H5, the page will be different user information according to different logins.
We can modify the wxml code like this:
<view>{{username}}，您已登录，欢迎</view>
Then write .js in the data of the home page, and the result is:
data: { username:"张明"` },
In the emulator we see the rendering results as before, we can data inside the "Zhang Ming" modified to any one person's name, the front-end page will change accordingly, if through the function according to different users to modify the value of the username, so that different login people will log in to display the corresponding user name.
Let's go back and review the jason syntax, where the username is the field name, which is the variable, the colon: followed by the value. In the wxml file, you only need to wrap up the variable names with double braces to render the variables inside the data.
From the previous case, we learned that the dynamic data in WXML comes from the data corresponding to Page. D ata is the initial data used for the first rendering of a page of a small program. When the page of the small program loads, the data is passed from the logical layer to the rendering layer as a JSON string, so the data in the data must be the type that can be converted to JSON: string String, number Number, Boolean, object Object, array Array.
Array Array, combined with what we learned before, let's review again: the array is split by parentheses, which is a bit like a list;
Data types are a very important concept in programming languages, you can just know what it is, you don't have to force it to understand. Just as we divide different people into different types, such as men, women, Shenzheners, programmers, etc., data types are a classification of different types of data, just to distinguish them from different format specifications.
With data binding, we can also separate the style, class, id and other properties to control the style of components and other information.
Use the developer tool to enter the following in home.wxml:
<navigator id="item-{{id}}" class="{{itemclass}}" url="{{itemurl}}" > <image style="width: {{imagewidth}}" mode="{{imagemode}}" src="{{imagesrc}}"></image></navigator>
You need to follow Jason's syntax and add the data from the following data to .js data in the home:
data: { id: 233, itemurl:"/pages/home/imgshow/imgshow", itemclass:"event-item", imagesrc: "https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg", imagemode:"widthFix", imagewidth:"100%", },
Then look at the effect of the display in the emulator and find that there is no difference between the results displayed and the data binding we didn't use before, but the benefits of using data binding are that it lays the groundwork for us to add a lot of data and program updates later. Strings and numbers
As we said earlier, the number Number and string String are different in Excel and different in small programs (that is, JavaScript). Let's take a look at the real world and enter the following code in home.wxml:
<view>两个数字Number相加：{{love1+forever1}}</view><view>两个字符串String相加：{{love2+forever2}}</view>
Then add the data from the following data to .js home:
data: { love1:520, love2:"520", forever1:1314, forever2:"1314", }
Here we can see that the "double quotes" are wrapped in a string format, while those that are not double quotes are in a numeric format.
You can see that the numeric addition of numbers in the number format and the addition of four operations are consistent, while the addition of strings to strings is stitched. Plus signs can act as four operators in JavaScript, or they can be stitched, depending on the format of the data.
Small tasks: the number format of 520 and string format of 520, although they are the same on the page display, but the string format can be stitched, and the number format of the number, it is convenient for us to compare the size of the number in the future. C ould you tell me whether the year of origin should be in numeric format or string format? Where's the ID number?
We've already been exposed to arrays before, such as the pages configuration item, which is a list of all the pages in a small program. A rray Array is an ordered collection of values, each value called an element, and each element has a position in the array, expressed in numbers, called an index. This index is a non-negative integer from 0, i.e. 0, 1, 2, 3, 4, 5....
Enter the following code in home.wxml:
<view>互联网快讯</view><view>{{newstitle[0]}}</view>
Then add the data from the following data to .js home:
data: { newstitle:[ "瑞幸咖啡：有望在三季度达到门店运营的盈亏平衡点", "腾讯：广告高库存量还是会持续到下一年", "上汽集团云计算数据中心落户郑州，总投资20亿元", "京东：月收入超2万元快递小哥数量同比增长163%", "腾讯：《和平精英》日活跃用户已超五千万", ], }
We find that the first data of the array is displayed, that is, the first item of the array array is the first item of the array, and 0 is the first position of the index, that is, we can use the position of the array name, the parenthesis, the position of the index, to access one of the data of the array.
Small task: We already know that newstitle is showing the title of the first news, so how do you show the title of the fifth news? Remember when the first item in the pages configuration item was the initial page of the small program, and now you know how it does it?
Object is the core concept of the JavaScript language and the most important data type. An object is a collection of related data and methods (usually composed of variables and functions, which we call properties and methods inside an object).
There are times when an object has multiple attributes, take a movie, there are movie names, countries, distribution time, ticket prices, reviews and countless other attributes, how do we present these on the page?
Enter the following code in the home.wxml file:
<image mode="widthFix" src="{{movie.img}}" style="width:300rpx"></image><view>电影名：{{movie.name}}</view><view>英文名：{{movie.englishname}}</view><view>国家：{{movie.country}}</view><view>发行年份：{{movie.year}}</view><view>简述：{{movie.desc}}</view>
In the data that corresponds .js home, add the following data:
data: { movie: { name: "肖申克的救赎", englishname:"The Shawshank Redemption", country:"美国", year:1994, img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp", desc: "有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！" }, },
In this way, the object Object type of data is rendered. That is, in double braces, you can enter the variable movie plus dot and property name, which is the point notation of the object.
Objects can be nested, that is, an object can be used as the value of another object, in addition to the object set objects, arrays can also be set objects, objects can also be set arrays. Transforming real-life things into intricate data is very important data thinking.
For example, above we only list the top five films, that top 5 movies, it is a list; each film staff has directors, screenwriters, actors, and each movie's list of actors is a list, each actor has complex attributes, such as name, origin, award (list) ... I t's really endless children and grandchildren. Of course simple data can be written in data, and such complex data is going to be used in the database.
For example, let's add the data from the following data .js home:
movies:[ { name: "肖申克的救赎", englishname: "The Shawshank Redemption", country: "美国", year: 1994, img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp", desc: "有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！", actor:[ { name:"蒂姆·罗宾斯", role:"安迪·杜佛兰" }, { name:"摩根·弗里曼", role:"艾利斯·波伊德·瑞德" }, ] }, { name: "霸王别姬", englishname: "Farewell My Concubine", country: "中国", year: 1993, img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.webp", desc: "风华绝代", actor: [ { name: "张国荣", role: "程蝶衣" }, { name: "张丰毅", role: "段小楼" }, ] }, ],
So how do we render the name of Zhang Guorong, one of the stars of Becky the 2nd-ranked Podesta movie? The second movie in the movie list is represented by the second movie in the movie list, the number one starring actor in the second movie is represented by the number one starring actor in the second film, and the name of the starring actor is represented by the name of the star.
Enter the following code test in home.wxml to see if it shows Zhang Guorong?
<view>豆瓣电影排名第2、最重要的主演演员名：</view><view>{{movies[1].actor[0].name}}</view>
So how do you render all the data from the second movie?
<image mode="widthFix" src="{{movies[1].img}}" style="width:300rpx"></image><view>电影名：{{movies[1].name}}</view><view>英文名：{{movies[1].englishname}}</view><view>发行地：{{movies[1].country}}</view><view>发行年份：{{movies[1].year}}</view><view>简述：{{movies[1].desc}}</view>
Small task: What would be the result of entering the following code at home.wxml? Why can't you do that?
<view&{{movies}}</view&<view&{{movies[1]}}</view&<view&{{movies[1].actor}}</view&
Above we just output a single piece of data in an array, or a single piece of data in an object nested data, if it is a list of goods, movie lists, news lists, how should we render to the page? We'll cover list rendering and conditional rendering in the next section.