1. 老接口 (上线使用 - 测试用 button 先获取用户信息)
- // 登录
- wx.login({
- success: res => {
- // 发送 res.code 到后台换取 openId, sessionKey, unionId
- // 也就是发送到后端, 后端通过接口发送到前端, 前端接收用户信息等....
- wx.setStorageSync('code', res.code);
- console.log(wx.getStorageSync('code'))
- // 获取用户信息
- wx.getSetting({
- success: res => {
- if (res.authSetting['scope.userInfo']) {
- // 已经授权, 可以直接调用 getUserInfo 获取头像昵称, 不会弹框
- wx.getUserInfo({
- success: res => {
- // 可以将 res 发送给后台解码出 unionId
- this.globalData.userInfo = res.userInfo
- // 由于 getUserInfo 是网络请求, 可能会在 Page.onLoad 之后才返回
- // 所以此处加入 callback 以防止这种情况
- if (this.userInfoReadyCallback) {
- this.userInfoReadyCallback(res)
- }
- }
- })
- }
- }
- })
- }
- })
2. button - 官方示例
- wxml
- <!--index.wxml-->
- <view class="container">
- <view class="userinfo">
- <block wx:if="{{!hasUserInfo && canIUse}}" class='show-author'>
- <button open-type="getUserInfo" class='show-author' bindgetuserinfo="getUserInfo">
- <!-- 随意定制 -->
- <view class='get-userinfo'> 获取用户信息 </view>
- </button>
- </block>
- <block wx:else>
- <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
- <text class="userinfo-nickname">{{userInfo.nickName}}</text>
- </block>
- </view>
- </view>
- wxss
- .show-author {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 99;
- background: #000;
- opacity: 0.8;
- }
- .show-author>.get-userinfo {
- color: #fff;
- background-color: #f00;
- border-radius: 10rpx;
- top: 50%;
- margin-top: 70%;
- }
后面的 app.js 和 index.js 均是官方示例 (或者直接点击拉取 Github 示例 https://github.com/Sunnshino/wechat-example/archive/Sunnshino-Wechat-getUserinfo.zip , 哈哈)
3. 当然是发送 code 到后端, 我们接收用户信息就 OK 了
来源: http://www.bubuko.com/infodetail-2723179.html