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

最新推荐文章于 2023-05-25 20:32:38 发布

lee576

最新推荐文章于 2023-05-25 20:32:38 发布

阅读量3.5k

点赞数

分类专栏：支付宝小程序

本文链接：https://blog.csdn.net/lee576/article/details/80776870

版权

支付宝小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<!-- 视图层 -->
<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这个方法可以获得授权码，换句话说可以得到用户信息，最终效果如下