微信小程序授权登陆

微信小程序进来是需要扫码验证账号的既然有了账号就可以获取到

这里是app.json里哪个页面在前面就会加载哪个页面

{
  "pages": [
    "pages/list/list",
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#489B81",
    "navigationBarTitleText": "阿圆网络",
    "navigationBarTextStyle": "black"
  }
}

首先是一个主页面当点击授权按钮就会获取用户信息然后隐藏掉授权按钮展示出来 452

然后在index.wxml设置样式其他是从js里面获取

<!--pages/index/index.wxml-->
<!--wxml里面放文本内容 app.json配置全局文件 index或其他页面配置自己的页面-->
<!--view容器-->
<!--冒泡事件 组件上的事件被触发bind 向父节点传递  非冒泡事件 组件触发不会向父节点传递catch  -->
<view class=\'indexContext\'>
<image class=\'avatar\' src=\'{{userInfo.avatarUrl}}\'></image>
<!--一个验证开关 true就打开 false就隐藏-->
<button bindgetuserinfo=\'handgetuserinfo\' style=\'display:{{isShow?"block":"none"}}\' open-type=\'getUserInfo\'>获取登陆信息</button>
<text class=\'userName\'>hello {{userInfo.nickName}}</text>
<view catchtap=\'handleParent\' class=\'text\'>
<text >开启小程序之旅</text>
</view>
</view>

index.js写方法

/**
   * 组件的初始数据
   */
  data: {
  msg:\'安好\',
  //先定义空对象 初始化
  userInfo:{},
  isShow:true
  },

/**
 * 生命周期函数 监听页面加载
 * 做一些初始化工作 发送请求 开启定时器等
 */
  onLoad: function(options){
   this.getuserinfos();//直接加载这个方法
  },

  getuserinfos(){//这里
    //判断用户是否授权
    wx.getSetting({//得到设置
      success: (data) => {
        console.log(data);
        if (data.authSetting[\'scope.userInfo\']) {
          //用户已经授权 隐藏按钮
          this.setData({//设置data
            isShow: false
          })
        } else {
          //用户没授权 默认是true
          isShow: true
        }
      }
    })
    //获取用户登陆的信息
    wx.getUserInfo({
      success: (data) => {//当前对象 回调这样写
        console.log(data);
        this.setData({//设置data
          //上面定义的空对象拿到data里面的信息
          userInfo: data.userInfo
        })
      }

    })
  },

  //当点击按钮时获取用户信息自动刷新
  handgetuserinfo:function(data){
  if(data.detail.rawData){//如果点击允许代表获取到信息隐藏按钮刷新页面
    this.getuserinfos();
 }
  },

然后就可以获取到登陆的名字以及头像了

5463

后面开启小程序就是跳转页面操作给那个按钮一个方法在js里写需要跳转的路径就