Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge about how WeChat Mini Programs realizes template rendering. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

WeChat Mini Programs's interface program supports html syntax and adds some tags, such as view, block, templete and so on.

Template rendering

Index.wxml

{{helloWord}}

You can understand the content contained in {{}} as a variable, how to make the program parse the {{helloWord}} variable.

Register this variable in index.js

Var json = {data: {"helloWord": "hello world"}}; page (json)

Then when we run Mini Program, we can find that what is displayed is hello world, that is, all variables need to be included in the data of the registration interface.

Some people may ask, how to add these variables dynamically?

Var json = {data: {"helloWorld": ""}, / / load onLoad:function () {var that = this; that.setData ({"helloWorld": "hello world"})}}; page (json)

Even we can.

Var json = {data: {}, / / load onLoad:function () {var that = this; that.setData ({"helloWorld": "hello world"})}}; page (json)

Can achieve the same effect, each time the setData () function is enough to re-render the page.

Index1.wxml

{{key}} = > {{val}}

Name: {{users [0] .name}}

I'm the test button.

Index1.js

Var json= {data: {}, / / the listening page shows onShow:function () {vat that = this; that.setData ({users: [{"name": "name1", "age": 100}, {"name": "name2", "age": 101}]});}; page (json)

The function of the variable that is an extension of the scope of this.

Wx:for loop a variable

Wx:for-index represents the key name of the loop

Wx:for-item represents the key value of the loop

Users is dynamically added to the data scope when the page is displayed.

Now let's look at a new problem, such as the value {{users [0] .name}} in id= "nameDemo" view above. How do we dynamically change the problem?

Some may say that directly re-generate a json and render directly into it?

This scheme is OK, but to take into account the performance of rendering, if you re-render each call, you will be stuck.

The solution is js's tip.

Change only the value of {{users [0] .name}}

Var json = {data: {}, / / the listening page shows onShow:function () {vat that = this; that.setData ({users: [{"name": "name1", "age": 100}, {"name": "name2", "age": 101}]});}, clickFunc:function (event) {vat that = this; var dataJson = {} DataJson ["users [0] .name"] = "who am I"; that.setData (dataJson);}}

Bindtap adds a click event to the button object, and the function corresponding to the click event is the clickFunc parameter event data structure is as follows

{"type": "tap", "timeStamp": 1252, "target": {"id": "tapTest", "offsetLeft": 0, "offsetTop": 0}, "currentTarget": {"id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": {"hi": "MINA"}} "touches": [{"pageX": 30, "pageY": 12, "clientX": 30, "clientY": 12, "screenX": 112, "screenY": 151}], "detail": {"x": 30, "y": 12}} above are all the contents of the article "how to realize template rendering by WeChat Mini Programs" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.