微信小程序开发系列六:微信框架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.userInfothis.setData({userInfo: e.detail.userInfo});}
在小程序能够访问的上下文里,有一个全局变量wx,里面包含了所有微信框架暴露出来的API:
在微信小程序官网上有关于这个wx的所有成员说明:
https://developers.weixin.qq.com/miniprogram/dev/api/
我们再试试另外一个API:getSystemInfo
首先在小程序视图里定义一个按钮,绑定一个JavaScript函数jerry_systeminfo, 用于触发getSystemInfo:
获取系统信息
然后定义七个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等详细信息。
要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:
微信小程序开发系列六:微信框架API的调用相关推荐
- Jerry Wang的微信小程序开发系列文章
微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列教程三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之控制器的初始化逻辑 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
- 微信小程序开发系列教程三:微信小程序的调试方法
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
- 【微信小程序开发•系列文章一】入门
本系统文章主要有以下几篇: <[微信小程序开发•系列文章一]入门> <[微信小程序开发•系列文章二]视图层> <[微信小程序开发•系列文章三]数据层> <[微 ...
- 微信小程序开发系列 (四) :微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
- 微信小程序开发【六】-- wxss详解
系列文章目录 微信小程序开发[一]-- 初识小程序 传送门 微信小程序开发[二]-- 小程序入门 传送门 微信小程序开发[三]-- 项目结构概述 传送门 微信小程序开发[四]-- 配置详解 传送门 微 ...
- 微信小程序开发系列二:微信小程序的视图设计
大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
最新文章
- H.265的NALU
- 费曼学习法与孔子温故知新学习法为两大重要学习法,前者外向表现,后者内省提升
- iOS UI-IOS开发中Xcode的一些使用技巧
- IDOC 创建,增强,管理,配置
- uniapp中实现每次点击左侧菜单右边区域都从顶部开始
- 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- hujingwei oracle_Oracle收缩表空间
- java线程轮询_基于springboot实现轮询线程自动执行任务
- 风控分析秘籍R-I-S-K
- C# Learning—Step By Step(9)
- JS获取短信验证码60秒
- [转载]VC6中的文件后缀
- BZOJ 2761: [JLOI2011]不重复数字( )
- c语言实现按键的抖动与消除,7.3 按键消抖
- 中国协同工作空间管理软件行业市场供需与战略研究报告
- mars3d的config.json 配置文件说明
- python培训班出来能找到工作吗-Python培训班出来好找工作吗?
- EPICS modbus模块驱动程序示例2(模拟量)
- java book打印机_java如何调用本地打印机进行图片打印
- JavaScript权威指南读书笔记——JavaScript的扩展
热门文章
- 文献学习(part65)--稳健主成分聚类方法的构建及其比较研究
- 文献学习(part16)--Oracle Based Active Set Algorithm for Scalable Elastic Net Subspace Clustering
- 你写的Python代码规范吗?
- 一个典型的使用 SAP Cloud Application Programming 模型开发的 Fiori 应用
- 一些关于 SAP Spartacus 组件和模块延迟加载的问题和解答
- SAP Spartacus localStorage 里存储的 auth Token 过期时间
- Angular Component 的 renderer 创建机制以及 Angular 版本号的确定方式
- SAP Spartacus organization unit list的实现Component
- 关于fixture.debugElement.query(By.css)这个方法的一个疑问
- SAP Spartacus 页面标题的更改机制 - 谁动了我的页面标题?