微信小程序04:获取微信头像和昵称

断断续续的学习,有不对之处,望各位大神指点。
前面的基本属于基础,属于面子工程,就是给你的小程序披上一层美丽的外衣,是静态的。后续会慢慢的了解微信晓城的API,努力去使用。(据说vue和小程序的有点类似,学过vue的对小程序容易上手)

1.运用组件获取

微信小程序组件开放能力:open-data

open-data的type值.png

案例:
<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
微信小程序中,可以直接使用<open-data type=" "></open-data> 来获取微信的相关信息。在没有点击授权的情况下,直接获取,不要写js。
效果图.png

wxml.png

2.点击按钮获取相关信息(版本更新后的授权)

根据微信小程序范例 button组件介绍

button组件.png

button组件.png

button组件的open-data.png

授权.png

效果图.png

wxml.png

根据button组件中open-data属性,点击button,获取用户相关信息。通过判断(wx:if,wx:else)是否存在hasUserInfo和canIUse,来进行页面上表现形式。

js

1.判断button中的open-data是否被支持

image.png

2.设置一些默认值
image.png

用hasUserInfo来作为if的判断
3.点击按钮事件bindgetuserinfo="getUserInfo"
image.png

bindgetuserinfo:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,694评论 9 295
  • 此刻我躺在床上 望着灯的影子直到出现幻象 蚊子死命的咬了我一口 直咬到我的神经末梢 蚊子死于我的掌下 我化成蚊子...
    李小歪阅读 222评论 2 5
  • 最近,自己仿佛生活进了一个怪圈,一个怪的只有别人没有自己的圈子。 因为宿舍太暗,我想买壁纸装修自己的床铺,舍友说...
    杨树下的糖阅读 249评论 4 2
  • 远处穿出来一束光,整个房间害羞得失去了黑暗 一丝清风送来清新的空气,像是要洗刷这世界的污浊 一簇簇碧绿的叶子在林间...
    探路人阅读 225评论 0 0