支付宝小程序开发练习-显示自己的支付宝头像(一)

上图是默认建立的项目文件,下面做一个简单的功能,读取支付宝用户信息,显示到头像到界面上

<!-- 视图层 -->
<view> 
    <image style="background-color: #eeeeee; width: 200px; height:200px;" mode="{{item.mode}}" src="{{src}}" onError="imageError" onLoad="imageLoad" />
</view>
Page({
  data: {
    src: ''
  },
  imageError: function (e) {
    console.log('image 发生错误', e.detail.errMsg)
  },
  imageLoad: function (e) {
    console.log('image 加载成功', e);
  },
  onLoad(query) {
    // 页面加载
  },
  onReady() {
    // 页面加载完成
    my.getAuthCode({
    scopes: 'auth_user',
    success: (res) => {
      my.getAuthUserInfo({
        success: (userInfo) => {
          //my.alert({content: userInfo.avatar});
          this.setData({src: userInfo.avatar});
          }
        });
      },
    });
  },
  onShow() {
    // 页面显示
  },
  onHide() {
    // 页面隐藏
  },
  onUnload() {
    // 页面被关闭
  },
  onTitleClick() {
    // 标题被点击
  },
  onPullDownRefresh() {
    // 页面被下拉
  },
  onReachBottom() {
    // 页面被拉到底部
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    return {
      title: '校园码',
      desc: '校园二维码',
      path: 'pages/index/index',
    };
  },
});

以上my.getAuthCode这个方法可以获得授权码,换句话说可以得到用户信息,最终效果如下


猜你喜欢

转载自blog.csdn.net/lee576/article/details/80776870