专栏首页Jerry的SAP技术分享微信小程序开发系列六:微信框架API的调用

微信小程序开发系列六:微信框架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的所有成员说明:

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等详细信息。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • springboot结合MyBatis中使用foreach

    在pom.xml中自行加入需要的依赖,application.properties的配置如下

    道可道非常道
  • 大数据之脚踏实地学18--Scala正则表达式的使用

    在《大数据之脚踏实地学17--Scala字符串的清洗》一文中我们介绍了Scala语言中常用的字符串处理方法,但这些方法并不是万能的,例如字符串子串的获取,如果目...

    1480
  • Spring/Spring Boot中使用@Async

    当我们在调用某些耗时的方法,比如发起第三方调用时而不关心他的返回值,可以采用@Async来实现异步调用。极大的提升程序的响应速度。

    我的小熊不见了丶
  • 你比个手势,AI就识别出Emoji,浏览器上跑:已开源,推特2.8万赞

    AI的爸爸,名字叫Nick Bourdakos (简称“尼克”) ,是来自IBM的程序猿。

    AI算法与图像处理
  • 聊聊我的第一篇10万+,同时反驳某些评论

    知乎后台显示我的回答《如何衡量一个人的 JavaScript 水平?》的阅读量已经超过了10万,具体截止2019年5月20号是115172。

    Fundebug
  • 滑动吸顶效果

    需求是先滑动里面的列表,滑动到一个位置时外面滑动,外面滑动一段距离后再里面滑动。最初想用 CoordinatorLayout 加 RecyclerView,但效...

    七适散人
  • 005从零开始学Python—字符串处理

    注:三引号是适用情况最多的字符串构造方法,而且三引号允许长字符串的换行,这是其他两种引号无法实现的,如变量string4所示。

    1480
  • Android 中心区域选中图表 WheelChart

    产品要做一个支持横向滚动、中心区域选中、惯性滚动、停止时回滚到中心位置、点击选中、处理嵌套滚动的图表需求

    Android技术干货分享
  • Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议...

    江南一点雨
  • GitHub 项目推荐:前端开发资料、Go 项目源码解读

    有位开发者在 GitHub 上整理了一批前端开发相关的优质网站、博客、教程、书籍等内容。

    GitHubDaily

扫码关注云+社区

领取腾讯云代金券