由于工作需要,笔者曾经参与过一个微信小程序与SAP系统集成的项目,所以从零开始学习微信小程序的开发知识。在这里我通过一系列文章分享我所学到的知识,希望对相关的学习者有所帮助。
本教程的前两篇:
通过本教程前两篇的介绍,你已经对微信小程序的视图和控制器以及微信调试器的使用有了基本的了解。在此基础上,我们进一步研究微信小程序控制器,掌握小程序控制器响应用户输入的方法。
这个例子很简单。在微信小程序的视图中index.wxml,我定义了一个按钮和一个文本元素。
<button bindtap="jerry_increase"> 点我加1 </button>
<text class="user-motto">{{counter}}</text>
文本元素与小程序数据模型的counter字段绑定,是一个计数器。该按钮绑定到一个事件处理程序jerry_increase。
每点击一次按钮,微信小程序UI上的计数器加一。
为此,首先在控制器的数据模型中添加一个index.js的字段。
然后实现按钮bindtap绑定函数jerry_increase。
可以看到这个事件处理程序有一个输入参数e:
调用事件处理器时,微信框架会自动将入参e传递给事件处理器。通过微信开发者工具的调试器可以看到这个参数e的详细信息:tap事件的X和Y坐标微信小程序蓝牙开发 支付宝小程序开发 ,以及事件类型tap。
如果从当前控制器事件处理函数执行栈观察,我们发现在其上一层,即微信框架层的处理逻辑中,在事件处理函数调用前后取了两个当前时间戳. 30365行的Reporter.slowReport如果时间戳之间的差异大于1000毫秒,则执行。
由此可见,微信希望开发者实现的事件处理功能尽可能的高效,执行时间不要超过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,自动检索当前点击按钮的微信用户的详细信息,如昵称、头像、省份、城市等,并显示在程序页面上的小程序 app软件开发 ,如下图。
查看设计:
<view class="userinfo">
<button open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<text class="userinfo-nickname">{{userInfo.city}}</text>
<text class="userinfo-nickname">{{userInfo.country}}</text>
<text class="userinfo-nickname">{{userInfo.province}}</text>
</view>
此视图中有 6 个 UI 元素,包括 1 个按钮元素、1 个图像元素和 4 个文本元素。
button元素负责响应用户点击事件,调用微信框架的API读取用户详情。
1个图片元素负责显示点击按钮的微信用户头像,其余4个文本元素显示微信用户的详细信息。最后五个UI元素的绑定路径都是userInfo,点击按钮后调用微信API读取userInfo的数据。
这个userInfo就是我们在controller index.js中定义的数据模型:
Page({
data: {
userInfo: {}
}
});
我们回过头来看看这个小程序最重要的button元素,它有两个属性:
当微信框架的API调用成功获取到微信用户详情后,我们编写的回调函数就会以微信用户详情为入参调用。
jerry_getUserInfo: function(e) {
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo
});
}
在小程序可以访问的上下文中,有一个全局变量wx,里面包含了微信框架暴露的所有API:
这个wx的所有成员都在微信小程序官网解释:
让我们尝试另一个 API:getSystemInfo。
首先在小程序视图中定义一个按钮,并绑定一个JavaScript函数jerry_systeminfo来触发getSystemInfo:
<button bindtap = "jerry_systeminfo"> 获取系统信息 </button>
然后定义七个UI元素来显示getSystemInfo返回的结果。
<text class="userinfo-nickname">{{systeminfo.model}}</text>
<text class="userinfo-nickname">{{systeminfo.pixelRatio}}</text>
<text class="userinfo-nickname">{{systeminfo.windowWidth}}</text>
<text class="userinfo-nickname">{{systeminfo.windowHeight}}</text>
<text class="userinfo-nickname">{{systeminfo.language}}</text>
<text class="userinfo-nickname">{{systeminfo.version}}</text>
<text class="userinfo-nickname">{{systeminfo.platform}}</text>
wx.getSystemInfo将返回的结果作为入参自动传入我们定义的成功回调函数,然后使用setData来设置数据结构查看内部。
jerry_systeminfo: function(){
var that = this;
wx.getSystemInfo({
success: function (res) {
var systeminfo = {};
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等详细信息。
总结
本教程先介绍微信小程序控制器如何响应用户点击事件,然后通过一个如何获取当前用户微信昵称和手机信号的实例来介绍微信小程序如何消费微信平台API的方法.
本教程的前两篇:
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网