Home>Article>WeChat Applet> Sharing practical examples from getting started with WeChat mini programs (4)
Debugging of small programs is similar to general web debugging, but pay attention to a few points:
Selection of debugging files
Open the debugger, select theSourcestab, and then use the shortcut key:ctrl+pto open the search box and select the file with the suffixsmPerform debugging.
Display of data binding
Open the debugger and selectAppDatatab, you can check the detailed information of page data binding and whether it is bound correctly. Records the data binding content of all pages.
Through the above picture, we can know that only thedatesArryobject contains data that needs to be bound to the page.
TemplateTemplate
wxml / wxss / jsModule reuse, better encapsulation of UI and business logic to increase reusability
When an area needs to be used in multiple places, you can make this area into a template and call this template when using it. This will reduce the writing of repeated code, is easy to maintain, and makes the code tidy. .
Writing template code
{{item.title}} {{item.date}} {{item.content}}
In order to facilitate the management of our template files, you can place them under thepagesfolder, Create a new template file, which stores the written template; we need to use the tagtemplateto wrap the code, and add anameattribute to it. Of course, we must also write the corresponding style, and There is no difference in the normal way of writing styles.
The newly created template file can only store thewxmlandwxssfiles of the template. Currently, putting other file types in the template file of the mini program does not work. It cannot be reused, although no error is reported, such asjsfiles. The
templatetag is just a placeholder, telling the compiler that this is where the template code is loaded. When the page is compiled, the tag disappears, so it is necessary to respond to events with the template file. , we need to wrap the template file with a tag that can add events in the area where the template file is loaded, such as:view / block
##
Generally introduce it at the beginning of the file corresponding to the template file to be imported:
// 在对应的wxml文件中开头引入Then in the// 在对应的wxss文件中开头引入，注意末尾的分号 @import '模版wxss文件路径' ；
wxmlfile that introduces the template file, use
at the appropriate location. At this point, the simple template introduction and template data binding are completed. When we want to cycle the template, Just add a layer of tags outside as follows:
// bolck标签的作用是作用事件到template模版上面
Template cycle
The previous article talked about the data cycle, borrowing the attribute
wx:for=' ', you can know the corresponding sub-object data and its index value through theitem / indexobtained by default; but we found thatitem must be used in front of each template-bound data item. Attribute value(attribute value of sub-object) is used to bind data.itemis redundant. Is there any way to simplify it? Of course!
// 在对应的item的前面加上 ... 三个点 // {{idx}}
Just add
...three dots in front of the loop's sub-objectitem. A simple line of code implements the page below.
The effect of adding three small dots in front: it is equivalent to tile the sub-object and directly expand the attribute values in it. You can directly bind these attribute values in the template without specifying them in the template. Its data source (this is the role of
...)
Custom attributes
Generally speaking, custom attributes It always starts with
data-, binds some information we need to store, and passes it to other places, such as the clicked page article index.
- Set custom attributes
Setting custom attributes is very simple, but one thing to note is that when operating the template, you must Wrap it with a layer of
viewbefore you can operate it; the reason is that thetemplatetag is just a placeholder and disappears after compilation.
item.postIdis obtained from the server and is an attribute in the data source.
- Get custom attributes
Get custom attributes, of course, through events
onPostTap:function(event){ var postId=event.currentTarget.dataset.postid; var postIdData = event.currentTarget.dataset; console.log(postId); // 1 console.log(postIdData); }
event .currentTarget.dataset.postid: Obtained custom attribute value
eventEvent object
event.currentTarget：当前点击的目标元素
event.currentTarget.dataset：目标元素上面的自定义属性集合
通过获取到的自定义属性，可以作为一个参数绑定一个链接上面，达到不同栏位的点击跳转到不同的页面：
onPostTap:function(event){ var postId=event.currentTarget.dataset.postid; wx.navigateTo({ url: 'xxxx?id='+postId, }) }
上面只是说明了在同一个页面之间获取自定义属性，要是在不同页面之间怎么获取自定义属性，达到传递值的作用呢？
wx.navigateTo({ url: 'xxxx?id='+postId, })
通过上面的方法把参数postId，传递出去，然后在要接收的页面中使用options.id来获取
onLoad: function (options) { var postId = options.id; console.log(options); }
options.id就是通过wx.navigateTo传递过去的postId
相关推荐：
The above is the detailed content of Sharing practical examples from getting started with WeChat mini programs (4). For more information, please follow other related articles on the PHP Chinese website!
