zoukankan      html  css  js  c++  java
  • 微信小程序

    1. 老接口(上线使用-测试用button先获取用户信息)

     1   // 登录
     2     wx.login({
     3       success: res => {
     4         // 发送 res.code 到后台换取 openId, sessionKey, unionId
     5         // 也就是发送到后端,后端通过接口发送到前端,前端接收用户信息等....
     6         wx.setStorageSync('code', res.code);
     7         console.log(wx.getStorageSync('code'))
     8         
     9         // 获取用户信息
    10         wx.getSetting({
    11           success: res => {
    12             if (res.authSetting['scope.userInfo']) {
    13               // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
    14               wx.getUserInfo({
    15                 success: res => {
    16                   // 可以将 res 发送给后台解码出 unionId
    17                   this.globalData.userInfo = res.userInfo
    18 
    19                   // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
    20                   // 所以此处加入 callback 以防止这种情况
    21                   if (this.userInfoReadyCallback) {
    22                     this.userInfoReadyCallback(res)
    23                   }
    24                 }
    25               })
    26             }
    27           }
    28         })
    29       }
    30     })

     

    2. button - 官方示例

     

    wxml

     1 <!--index.wxml-->
     2 <view class="container">
     3   <view class="userinfo">
     4     <block wx:if="{{!hasUserInfo && canIUse}}" class='show-author'>
     5       <button open-type="getUserInfo" class='show-author' bindgetuserinfo="getUserInfo">
     6 
     7       <!--随意定制 -->
     8         <view class='get-userinfo'>获取用户信息</view>
     9       </button>
    10     </block>
    11     <block wx:else>
    12       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
    13       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    14     </block>
    15   </view>
    16 </view>

     

    wxss

     1 .show-author {
     2   position: absolute;
     3   top: 0;
     4   bottom: 0;
     5   left: 0;
     6   right: 0;
     7   z-index: 99;
     8   background: #000;
     9   opacity: 0.8;
    10 }
    11 
    12 .show-author>.get-userinfo {
    13   color: #fff;
    14   background-color: #f00;
    15   border-radius: 10rpx;
    16   top: 50%;
    17   margin-top: 70%;
    18 }

     

    后面的app.js和index.js均是官方示例(或者直接点击拉取Github示例,哈哈)

     

     

    3. 当然是发送code到后端,我们接收用户信息就OK了

  • 相关阅读:
    神不在的星期天
    炸弹问题——一种会引发死锁的情景模式
    JavaScript的类和继承
    没有功劳也有苦劳
    使用http代理服务器解决本地客户端页面的跨域AJAX问题
    04数组 字符数组
    01 数据类型 、常量变量、运算符、表达式、格式化输入输出
    03循环结构
    .NET编译、WOW64注册表访问、同时在X86和X64平台上部署应用程序
    Vistual Studio 2008中的智能感应功能
  • 原文地址:https://www.cnblogs.com/cisum/p/9458692.html
Copyright © 2011-2022 走看看