锐客网

  1. 首页 > 睿知 > >

微信小程序新手教程上手开发与使用总结

睿知

微信小程序新手教程上手开发与使用总结 ， 本篇默认已经成功安装微信小程序工具 ， 来和小编一起看看吧

微信小程序新手教程上手开发与使用总结

文章插图

微信小程序新手教程上手开发与使用总结

文章插图
一、模板WXML提供模板组件给我们使用 ， 可以在模板定义公用的代码片段 ， 然后在需要引用的地方进行调用 。
定义模板定义模板使用name属性作为模板的名字 ， 然后在template标签中定义代码片段：


123456789101112firstName:{{firstName}}lastName: {{lastName}}firstName:{{item.firstName}}lastName: {{item.lastName}}

使用模板使用模板我们用is属性引用定义好的模板 ， 然后把模板所需要的值通过data属性传给模板 。比如需要遍历persons数组 ， 我们可以将整个persons作为对象传给模板 ， 也可以遍历persons后将每个对象传给模板 ， 具体取决于所应用的场景 。


1234

需要的数据结构如下



123456789Page({data:{persons:[{firstName: 'Hulk', lastName: 'Hu'},{firstName: 'Shang', lastName: 'You'},{firstName: 'Gideon', lastName: 'Lin'}]}})

注意：
is属性也可以使用Mustache语法进行动态渲染 ， 决定使用哪个模板
data如果传的是对象类型的数据 ， 需要用“…”进行“解构” ， 在模板中可以直接调用对象的属性；如果是其他数据类型则不需要用“…”
二、事件什么是事件呢 ， 简单来说 ， 事件就是逻辑层到逻辑层的通讯方式 。就是在页面上通过触发某个操作（就是我们说的事件） ， 在逻辑层进行一系列的操作 ， 最终来改变数据 。
比如在一个输入框中用户输入了一段文字 ， 但是data中的数据并没有随之改变 ， 因此我们需要在输入框上绑定对应的输入事件来更改数据 。
事件分类事件也有分类 ， 可以分为冒泡事件和非冒泡事件 。“冒泡”这个词很形象的表现了事件向上传递的过程 ， 这两种事件的区别也在于是否会向父节点进行传递 。
一些常用的冒泡事件 ， 除以下的事件外都是非冒泡事件：
名称触发touchstart手指开始触摸touchmove手指触摸后移动touchend手指触摸动作结束touchcancel触摸被打断 ， 比如来点 ， 弹框等tap触摸后离开 ， 有点像点击clicklongtap长按 ， 超过350ms才离开事件对象当事件函数被调用时 ， 从逻辑层有一个默认的事件对象传到函数中 ， 不同的事件所包含的事件对象的属性有所区别 ， 一些常用的事件对象的属性如下：
属性类型说明typeString事件类型timeStampInt从页面加载到事件触发的时间戳targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的属性值集合touchesArray触摸点信息的数组detailObject额外的信息target和currentTarget区别当不存在嵌套时 ， target和currentTarget没有区别 。但是当嵌套触发事件是 ， current和currentTarget的区别就体现出来了 。


123456outerinner

点击组件B ， 当触发handle2事件时 ， 收到target和currentTarget对象是一样 ， 都指向组件B；而当点击组件B触发handle1事件时 ， target对象指向了组件B ， currentTarget对象则组件A 。总结一下：
target对象指向了所触发事件的对象
currentTarget对象指向了绑定事件所在的对象
向detail中添加内容在组件中定义数据 ， 当触发事件时 ， 这些数据通过事件对象传给逻辑层 。书写规则：以“data-”开头 ， 多个字符用“-”连接 ， 不能含有大写 ， 可以绑定多个data值 。例如data-element-name ， 最终会在event.currentTarget.dataset中转为elementName属性 ， 属性的值就是定义的数据 。

推荐阅读


上一篇：为什么现在KTV娱乐城都是老男人光顾,小年轻都不去了？

下一篇：伊拉克,现在富起来了吗？