小程序模板和组件的区别（点击 *** 作事件）

小程序在使用时，经常会在不同的页面用到相同的页面结构，这个时候我们如果一个个写的话没有必要，这个时候可以使用模板（template）或者组件（component）。

二者区别 在于：

1、需要定义模板：一个template.wxml文件中能写多个模板，用name区分，

下面定义两个模板

2、使耐迅庆用这两个模板，在对应的wxml文件引入：

3、上面在模板content里定义了点击事件subtractNum方法，因为template中没有js文件，因此template中的点击事件，在使用页面中的js里定义。

建议将有子列表昌握 *** 作交互的写成component。

示例：

对应组件的wxml跟page里的wxml一样：

2、使用自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值昌裤。

下一节将进入如何 组件向父级传值（组件通信）

本文中的方法并不能用于实际小程序项目，仅供学习交流！！

众所周知，微信小程序的js中不能使用 window对象 以及 document对象 。

难道他们真的不存在吗？事实并非如此。

熟悉this的同学都知道，在浏览器环境下，触发一个立即执行函数时，其中this的指向往往都是window对象。

这段js在小程序中是同样有效的，祥姿所以window对象确实存在。

window对象中包含了很多对象，如wx、Page、Component、Behavior等变量，你可以试试看。

不过在严格模式下，this就指向了undefined。而且es6转es5时也默亮局认开启了严格模式。

如果你想尝试，首先你需要在微信开发工具中选择右上角的 详情-项目设置 取消选中ES6转ES5即可

获取到了window对象，我们就可以获取其他全局变量

当我们js报错时，其路由前面部分是一样的。

在控制台中，我们可以看到微信小程序的html部分的源码。

在实际开发中我们可以利用这个方法，把一些全局方法给转移或清除掉，比如alert。

1、非严格模式下，可以获取window对象。

2、可以在window中扩展自己的全局变量，当然并不推荐这样做。

3、各种你能想到的敬宴让 *** 作...

此文仅供交流，如有不当，请指正。

本文为实际工禅基哪作简记，粗陋小笔记一篇，仅供参考。

小程序填写表单的过程中，手机键盘调起，默认情况，键盘顶部会紧贴着表单项。

如图所示：

当遇到这样的场景：

表单项输入的内容，作为关键字，向后台请求匹配数据列表。拿到数据后，在表单项下方展示列表数据，供用户点选。

就会出现问题：

展示在 input 下面的列表，会被键盘完全挡住贺码。

1、获取焦点时，使用 input 组件的 cursor-spacing 属性，设置键盘和 input 组件的间距。

2、失去焦点时，计算页面已经向上滚动的距离，加上列表项的锋冲高度，手动将整个页面向上推，防止处于页面底部的 input  失去焦点时、又掉回页面底部。影响用户体验。

手动将整个页面向上推的方式：

【注意】

wx.pageScrollTo 仅在 page 组件中有效，component 中无效！

1、在当前 input 获取焦点的时候，手动将页面向上、滚动 列表高度 那么大的距离。

2、如何滚动？