微信小程序授权登陆

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

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

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

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

 然后在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();
 }
  },

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

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

 //点击当前页面跳转页面
handleParent(){//同名属性可省略 可以不写function
//redirectTo直接跳转到另外一个页面
wx.navigateTo({//保留当前页面跳转另外页面
  url: '/pages/list/list',
})

  },

效果图：跳转后的页面 也可返回。