调试方法
小程序的调试和一般的网页调试差不多，但是注意几点：
调试文件的选择
打开调试器，选中Sources页签，然后使用快捷键：ctrl+p打开搜索框，选择后缀为sm的文件进行调试。
数据绑定的展示
打开调试器，选中AppData页签，可以查看到页面数据绑定的详细信息，是否正确绑定。记载着所有页面的数据绑定内容。
通过上面这个图片，我们就可以知道，只有在datesArry对象里面有需要绑定在页面上面的数据。
Template模版
wxml / wxss / js模块的复用，更好的封装ui和业务逻辑 增加复用性
当一块区域需要在多个地方使用的时候，可以把这个区域做成一个模版，在使用的时候调用这个模版即可，这样即减少重复代码的编写，又易于维护，让代码整洁。
模版代码的编写
登录后复制{{item.title}} {{item.date}} {{item.content}}
为了方便管理我们的模版文件，可以在pages文件夹下面，新建一个模版文件，里面存放编写的模版；我们要使用标签template来包裹代码，并且要给其加一个name属性，当然也要编写对应的样式，和正常写样式的方法没有区别。
新建的模版文件里面只能存放模版的wxml和wxss文件，目前小程序的模版文件里面放入其他的文件类型不起作用，不能进行复用，虽然不报错，比如js文件。
template标签只是一种占位符，告诉编译器这个地方是加载模版代码的，当页面编译完成，这个标签就消失，所以要对与模版文件响应事件，我们就需要在加载模版文件的区域，使用一个可以添加事件的标签把其模版文件包裹起来，比如：view / block
template模版代码
使用模版代码
编写好了模版代码，怎么样在需要加载模版代码的地方使用呢？
首先，模版代码是在其他文件夹中，使用它，就必然要引入该模版文件，
一般在对应要引入模版文件的文件开头部分引入：
// 在对应的wxml文件中开头引入登录后复制// 在对应的wxss文件中开头引入，注意末尾的分号 @import '模版wxss文件路径' ；
然后在引入模版文件的wxml文件，适当位置使用
登录后复制到此，简单的模版引入和模版数据的绑定就完成，当我们要循环模版的时候，只需要如下，在外面加一层标签即可：
// bolck标签的作用是作用事件到template模版上面登录后复制模版循环
前一篇文章说了一下数据的循环，借用属性wx:for=' '，通过默认得到的item / index可以知道对应的子对象数据和其索引值；但是我们发现，每一个模版绑定的数据项前面都要使用item.属性值(子对象的属性值)来绑定数据，item是多余的，有没有办法去简化？当然有！
登录后复制// 在对应的item的前面加上 ... 三个点 // {{idx}} 在循环的子对象item前面加上...三个点，就行。简单的一行代码就实现了下图的页面。
前面加三个小点的作用：相当于把子对象给平铺，直接展开了里面的属性值，就可以直接在模版里面绑定这些属性值，不需要在模版里面指定其数据源（这就是...的作用）
自定义属性
自定义属性一般说来都是使用data-开头，绑定一些我们需要存储的信息，传递到其他地方，比如点击的页面文章索引。
设置自定义属性
设置自定义属性很简单，但是要注意一点的是，在操作模版的时候，一定要在其外面包裹一层view，才能进行操作；原因是template标签只是一个占位符，编译后就消失。
登录后复制item.postId是从服务器上面获取的，是数据源中的一个属性。
获取自定义属性
获取自定义属性，当然是通过事件去获取
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：获取的自定义属性值
event事件对象
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
相关推荐：
微信小程序template模板引用实例分享
微信小程序页面跳转事件绑定实例详解
微信小程序授权获取用户详细信息实例
以上就是微信小程序入门到实战实例分享（四）的详细内容，更多请关注慧达安全导航其它相关文章！
免责 声明
1、本网站名称：慧达安全导航
2、本站永久网址：https//www.huida178.com/
3、本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务!
4、本站所有资源的属示图片和信息不代表本站的立场!本站只是储蓄平台及搬运
5、下载者禁止在服务器和虚拟机下进行搭建运营，本站所有资源不支持联网运行!只允许调试，参考和研究!!!!
6、未经原版权作者许可禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担!
7、为尊重作者版权，请在下载24小时内删除!请购买原版授权作品，支持你喜欢的作者，谢谢!
8.若资源侵犯了您的合法权益，请持 您的版权证书和相关原作品信息来信通知我们！QQ：1247526623我们会及时删除，给您带来的不便，我们深表歉意!
9、如下载链接失效、广告或者压缩包问题请联系站长处理
10、如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入!
11、本站资源售价只是赞助，收取费用仅维持本站的日常运营所需
12、因源码具有可复制性，一经赞助，不得以任何形式退款。
13、本文内容由网友自发贡献和站长收集，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系1247526623@qq.com
转载请注明出处： 慧达安全导航 » 微信小程序入门到实战实例分享（四）
发表评论 取消回复