共计 4074 个字符,预计需要花费 11 分钟才能阅读完成。
笔者因为工作须要,已经加入过一个微信小程序同 SAP 系统集成的我的项目,因而从零开始学习了微信小程序的开发常识。这里通过系列文章把本人所学分享进去,心愿对相干学习者有所帮忙。
本教程后面两篇文章:
- 微信小程序开发系列 (一):开发环境搭建和微信小程序的视图设计与开发
- 微信小程序开发系列 (二):微信小程序的单步调试和控制器实现步骤概述
通过本教程后面两篇文章的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法曾经有了一个最根本的意识了。在这个根底上,让咱们进一步学习微信小程序控制器,把握在小程序控制器中响应用户输出的办法。
这个例子很简略,在微信小程序的视图 index.wxml
里,我定义了一个按钮,和一个文本元素。
<button bindtap="jerry_increase"> 点我加 1 </button>
<text class="user-motto">{{counter}}</text>
文本元素绑定到小程序数据模型的 counter
字段上,是一个计数器。按钮绑定了一个事件处理函数 jerry_increase
.
每点击一次按钮,微信小程序 UI 上的计数器加一。
为此,首先须要在控制器 index.js
的 data 数据模型里削减一个 counter
字段。
而后实现 button
的 bindtap
绑定的函数 jerry_increase
.
能够看到这个事件处理函数有一个输出参数 e:
当事件处理函数被调用时,这个输出参数 e 是微信框架主动传入到事件处理函数的。通过微信开发者工具的调试器能够看到这个参数 e 的明细:tap
事件产生的 X 和 Y 坐标,以及事件类型 tap.
咱们如果从以后控制器事件处理函数执行栈向外察看,发现它的前一层,即微信框架层的解决逻辑里,在调用事件处理函数前后别离取两个以后的工夫戳。如果工夫戳之差大于 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 来响应 button 的点击事件。
本系列的下一篇文章会介绍微信小程序的 button 组件提供的一些微信原生性能,比方获取以后用户信息等弱小性能的用法。
微信框架 API 的调用
通过迄今为止的介绍,大家对微信小程序的视图和控制器,微信调试器,以及如何在微信控制器里编写 JavaScript 函数来响应微信小程序的用户事件,曾经有了一个最根本的意识了。
咱们当初来开发一个微信小程序的理论例子,进一步坚固以前学到的常识。
这个例子的成果如下:在微信小程序上显示一个按钮: 获取头像昵称
。
点击之后,微信小程序会主动通过微信框架提供的 API
把以后点击这个按钮的微信用户的明细,比方昵称,头像,所在省份,城市等信息取回来,并且显示在小程序页面上, 如下图所示。
视图设计:
<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 个 button 元素,1 个 image 元素和 4 个 text 元素。
button 元素负责响应用户点击事件,调用微信框架的 API 读取用户明细。
1 个 image 元素负责显示点击该按钮的微信用户头像,剩下的 4 个 text 元素显示微信用户的明细。后 5 个 UI 元素的绑定门路均为 userInfo
,而 userInfo
的数据是点了 button 后通过调用微信 API 读取的。
这个 userInfo 是咱们在控制器 index.js 里定义的数据模型:
Page({
data: {userInfo: {}
}
});
咱们回过头来看本文这个小程序最重要的 button
元素,它有两个属性:
- open-type=”getUserInfo”:阐明该 button 点击之后,主动调用微信框架的 API
getUserInfo
; - bindgetuserinfo=”jerry_getUserInfo”:指定了一个回调函数的名称,该回调函数在咱们的控制器
index.js
里实现。
当微信框架的 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
返回的后果作为一个输出参数,主动传入到咱们定义的 success
回调函数里,而后再用 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);
}
}
})
},
最初我在我的 Android 三星手机上点击“获取零碎信息”之后,就显示出了我三星手机的型号 SM-C7010
等详细信息。
总结
本教程首先介绍了微信小程序控制器里如何响应用户点击事件,而后通过一个理论的如何获取以后用户微信昵称和手机信号的例子,介绍了微信小程序如何生产微信平台 API 的办法。
本教程后面两篇文章:
- 微信小程序开发系列 (一):开发环境搭建和微信小程序的视图设计与开发
- 微信小程序开发系列 (二):微信小程序的单步调试和控制器实现步骤概述