微信小程序新手教程上手开发与使用总结，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧
一、模板
WXML提供模板组件给我们使用，可以在模板定义公用的代码片段，然后在需要引用的地方进行调用。
定义模板
定义模板使用name属性作为模板的名字，然后在template标签中定义代码片段：
123456789101112<template name="mytemplate1"><view><text>firstName:{{firstName}}</text><text>lastName: {{lastName}}</text></view></template><template name="mytemplate2"><view wx:for="{{persons}}"><text>firstName:{{item.firstName}}</text><text>lastName: {{item.lastName}}</text></view></template>
使用模板
使用模板我们用is属性引用定义好的模板，然后把模板所需要的值通过data属性传给模板。比如需要遍历persons数组，我们可以将整个persons作为对象传给模板，也可以遍历persons后将每个对象传给模板，具体取决于所应用的场景。
1234<view wx:for="{{persons}}"><template is="mytemplate1" data="{{…item}}"></template></view><template is="mytemplate2" data="{{persons}}"></template>
需要的数据结构如下
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的区别就体现出来了。
123456<view class="A" bindtap="handle1">outer<view class="B" bindtap="handle2">inner</view></view>
点击组件B，当触发handle2事件时，收到target和currentTarget对象是一样，都指向组件B；而当点击组件B触发handle1事件时，target对象指向了组件B，currentTarget对象则组件A。总结一下：
target对象指向了所触发事件的对象
currentTarget对象指向了绑定事件所在的对象
向detail中添加内容
在组件中定义数据，当触发事件时，这些数据通过事件对象传给逻辑层。书写规则：以“data-”开头，多个字符用“-”连接，不能含有大写，可以绑定多个data值。例如data-element-name，最终会在event.currentTarget.dataset中转为elementName属性，属性的值就是定义的数据。
三、异步数据
小程序还提供发送异步的方法request(object)，发起的是https请求。一个小程序，同时只有有5个网络请求链接。object的参数如下：
参数命类型说明urlSring服务器接口地址dataObject请求的参数headerObject设置请求头header，header不能设置ReferermethodString请求方式，默认GETsuccessFunction请求成功的回调方法failFunction请求失败的回调方法completeFunction请求完成的回调方法(请求成功、失败都会调用)
跟jQuery不同的是，小程序请求的数据不是直接在success方法的res中(res是一个对象，还包括请求成功的状态码等)，而是在res.data中。示例代码如下：
12345678910111213wx.request({url: '/url',data: {x: '',y: ''},header: {'Content-Type': 'application/json'},success: function(res) {console.log(res.data) //接收到的数据}})
转载请注明：范的资源库 » 微信小程序新手教程上手开发与使用总结
