微信小程序开发系列（三）：微信小程序如何响应用户点击事件及微信平台API使用介绍开始学习微信小程序的开发知识。在这里我通过一系列的文章分享我所学到的，希望对相关的学习者有所帮助。本教程前两篇：微信小程序开发系列（一）：微信小程序开发环境搭建与视图设计与开发微信小程序开发系列（二）：微信单步调试及Controller实现步骤总览小程序通过本教程前两篇的介绍，大家对微信小程序的视图和控制器，以及微信调试器的使用有了基本的了解。在此基础上，让我们进一步研究微信小程序控制器，掌握小程序控制器中响应用户输入的方法。这个例子非常简单。在微信小程序的视图index.wxml中，我定义了一个按钮和一个文本元素。点我加1{{counter}}text元素绑定小程序数据模型的counter字段，是的一个柜台。该按钮绑定到事件处理程序函数jerry_increase。每点击一次按钮，微信小程序UI上的计数器就会加一。为此，您首先需要在控制器index.js的数据模型中添加一个计数器字段。然后实现绑定到按钮的bindtap的函数jerry_increase。可以看到这个事件处理函数有一个入参e：当事件处理函数被调用时，这个入参e是微信框架自动传递给事件处理函数的。通过微信开发者工具的调试器，可以看到这个参数e的详细信息：tap事件的X、Y坐标，事件类型tap。如果我们从当前controller的事件处理函数执行栈中往外看，会发现它的上一层，也就是微信框架层的处理逻辑中，在调用事件处理函数前后分别取了两个当前时间戳。如果时间戳差异大于1000毫秒，将执行第30365行的Reporter.slowReport。由此可见，微信希望开发者实现的事件处理函数尽可能高效，执行时间不超过1秒。在手机使用场景下，1秒的等待时间对于终端用户来说并不算短。另外一个值得一提的知识点是，如果直接用JavaScript修改数据模型的值，UI是不会有任何变化的。下面是错误的方式：jerry_increase:function(e){this.data.counter=this.data.counter+1;}，下面是正确的方式：jerry_increase:function(e){this.setData({counter:this.data.counter+1});}，通过一步一步的调试，我们就能明白其中的奥妙了：可以看到this.setData会调用微信框架的c.default.emit函数，并通过最新数据通过emit函数发送出去。继续看emit的实现，可以发现emit调用了微信工具类wx的方法：invokeWebviewMethod。从WAService.js的内部实现我们可以发现，手机端微信小程序的执行其实是运行在WebView中的。执行完WeixinJSBridge.publish.apply(WeixinJSBridge,e)这行代码，UI上的计数器就会刷新。本文介绍如何在微信小程序中编写JavaScript响应按钮点击事件。本系列下一篇文章将介绍微信小程序按钮组件提供的一些微信原生功能，例如获取当前用户信息等强大功能的使用。调用微信框架API通过到目前为止的介绍，你已经对微信小程序的视图和控制器，微信调试器，以及如何在微信控制器中编写JavaScript函数来响应微信小程序的用户事件有了最好的了解。微信小程序。我有一个基本的了解。下面我们来开发一个微信小程序的实际例子，进一步巩固之前所学的知识。本例效果如下：微信小程序上显示一个按钮：获取头像昵称。点击后，微信小程序会通过微信框架提供的API，自动获取点击该按钮的微信用户的详细信息，如昵称、头像、省份、城市等，并显示在小程序页面，如下图所示。视图设计：获取头像昵称{{userInfo.nickName}}{{userInfo.city}}{{userInfo.country}}{{userInfo.province}}这个view中有6个UI元素，包括1个button元素，1个image元素，4个text元素。button元素负责响应用户点击事件，调用微信框架的API读取用户详情。一个图片元素负责显示点击按钮的微信用户的头像，其余四个文本元素显示微信用户的详细信息。最后五个UI元素的绑定路径都是userInfo，点击按钮后调用微信API读取userInfo的数据。这个userInfo就是我们在控制器index.js中定义的数据模型：Page({data:{userInfo:{}}});回过头来看看本文这个小程序最重要的按钮元素，它有两个属性：open-type="getUserInfo"：表示点击按钮后，自动调用微信框架的APIgetUserInfo；bindgetuserinfo="jerry_getUserInfo":指定回调函数的名称，它在我们的控制器index.js中实现。当微信框架的API调用成功获取微信用户详情后，会以微信用户详情为入参调用我们编写的回调函数。jerry_getUserInfo:function(e){app.globalData.userInfo=e.detail.userInfothis.setData({userInfo:e.detail.userInfo});}在小程序可以访问的上下文中，有一个全局变量wx，whichcontains包含微信框架暴露的所有API：在微信小程序官网上，有对这个wx的所有成员的描述：试试另外一个API：getSystemInfo。首先在小程序视图中定义一个按钮，绑定一个JavaScript函数jerry_systeminfo，用于触发getSystemInfo：获取系统信息，然后定义七个UI元素用于显示getSystemInfo的返回结果。{{systeminfo.model}}{{systeminfo.pixelRatio}}{{systeminfo.windowWidth}}{{systeminfo.windowHeight}}{{systeminfo.language}}{{systeminfo.version}}{{systeminfo.platform}}wx.getSystemInfo返回的结果作为入参，自动传入我们定义的成功回调函数，然后用setData设置到视图的数据结构中。jerry_systeminfo:function(){varthat=this;wx.getSystemInfo({success:function(res){varsysteminfo={};systeminfo.model=res.model;systeminfo.pixelRatio=res.pixelRatio;systeminfo.windowWidth=res.windowWidth;systeminfo.windowHeight=res.windowHeight;systeminfo.language=res.language；systeminfo.version=res.version；systeminfo.platform=res.platform；try{that.setData({systeminfo:systeminfo});}catch(e){console.log(e);}}})}最后，我在我的安卓三星手机上点击“获取系统信息”后，显示了我的三星手机型号SM-C7010等详细信息。总结本教程首先介绍了如何在微信小程序控制器中响应用户点击事件，然后通过一个获取当前用户微信昵称和手机信号的实例，介绍了微信小程序是如何消费微信平台接口的。本教程前两篇：微信小程序开发系列（一）：微信小程序开发环境搭建与视图设计与开发微信小程序开发系列（二）：微信单步调试及Controller实现步骤总览小程序
