微信小程序入门到实战(四)

调试方法

单步调试是F10 跳到下一个断点是F8
小程序的调试和一般的网页调试差不多,但是注意几点:

  • 调试文件的选择
    打开调试器,选中Sources页签,然后使用快捷键:ctrl+p打开搜索框,选择后缀为sm的文件进行调试。

    微信小程序入门到实战(四)_第1张图片
    选择sm后缀的文件调试

  • 数据绑定的展示
    打开调试器,选中AppData页签,可以查看到页面数据绑定的详细信息,是否正确绑定。记载着所有页面的数据绑定内容。

    微信小程序入门到实战(四)_第2张图片
    数据绑定展示

    通过上面这个图片,我们就可以知道,只有在datesArry对象里面有需要绑定在页面上面的数据。

Template模版

wxml / wxss / js模块的复用,更好的封装ui和业务逻辑 增加复用性

当一块区域需要在多个地方使用的时候,可以把这个区域做成一个模版,在使用的时候调用这个模版即可,这样即减少重复代码的编写,又易于维护,让代码整洁。

  • 模版代码的编写

为了方便管理我们的模版文件,可以在pages文件夹下面,新建一个模版文件,里面存放编写的模版;我们要使用标签template来包裹代码,并且要给其加一个name属性,当然也要编写对应的样式,和正常写样式的方法没有区别。

新建的模版文件里面只能存放模版的wxmlwxss文件,目前小程序的模版文件里面放入其他的文件类型不起作用,不能进行复用,虽然不报错,比如js文件。

template标签只是一种占位符,告诉编译器这个地方是加载模版代码的,当页面编译完成,这个标签就消失,所以要对与模版文件响应事件,我们就需要在加载模版文件的区域,使用一个可以添加事件的标签把其模版文件包裹起来,比如:view / block

template模版代码

  • 使用模版代码

编写好了模版代码,怎么样在需要加载模版代码的地方使用呢?

首先,模版代码是在其他文件夹中,使用它,就必然要引入该模版文件,
一般在对应要引入模版文件的文件开头部分引入:

// 在对应的wxml文件中开头引入


// 在对应的wxss文件中开头引入,注意末尾的分号
@import '模版wxss文件路径' ;

然后在引入模版文件的wxml文件,适当位置使用