先决条件
完成小程序账号入驻：https://docs.alipay.com/mini/introduce
**操作步骤
创建小程序**
1.访问小程序控制台：https://openhome.alipay.com/platform/miniIndex.htm#/ 。
2.使用手机支付宝 app，扫描二维码，授权成功后完成登录。
3.在小程序控制台中，点击右上角 创建。
4.输入小程序名称，并点击 创建。
5.
1.创建成功。
1.进入小程序配置 > 开发管理 > 功能列表 > 添加功能 > 选择 获取会员信息 > 确定。
创建项目
1.打开小程序开发者工具。
2.点击 新建项目。
a) 左侧选择 支付宝 > 小程序。
b) 右侧选择 空白模板。
c) 点击 下一步。
1.在新建项目 页面，输入以下信息：
a) 项目名称：输入小程序项目名称，如 demo001
b) 项目路径：默认路径即可（用户文件夹中的 MiniProjects 文件夹）
c) 后端服务：选择 不启用云服务
1.点击 完成 项目创建。
账号登录并关联小程序
进入小程序开发者工具后，点击右上角 登录。
使用手机支付宝 app，扫描二维码，授权成功后完成登录。
在 关联应用 中，选择一个小程序，点击 确定。
修改小程序显示名称
打开 app.json 文件。
修改 defaultTitle 值，如 Code Lab Demo。
保存文件。
添加欢迎语
先在 .axml 文件中，添加组件并配置属性，再在 .acss 文件中定义样式。
- 打开 pages/index/index.axml 文件（下同），添加以下代码：
<!--添加 helloworld -->
<view class="hello">
Hello World!
</view>
2.保存 index.axml 文件。
3.打开 pages/index/index.acss 文件（下同），添加以下代码：
/* 定义 helloworld 样式 */
.hello{
text-align: center;
padding: 30rpx;
font-size: 50rpx;
}
4.保存 index.acss 文件。
添加头像信息
1.打开 index.axml 文件，添加以下代码：
<!-- 添加头像信息 -->
<view class="userinfo"><image mode="scaleToFill" src="{{avatar}}" class="logosize"/><text style="display:block">{{nickname}}</text>
</view>
2.保存 index.axml 文件。
3.打开 index.acss 文件，添加以下代码：
/* 定义用户头像样式 */
.userinfo{
text-align: center;
padding: 200rpx;
}
/* 定义头像大小 */
.logosize{
width: 150rpx;
height: 150rpx;
}
4.保存 index.acss 文件。
添加获取头像按钮
1.打开 index.axml 文件，添加以下代码：
<!-- 添加获取头像按钮 -->
<view class="pressbutton"><button size="mini" type="primary">获取头像</button>
</view>
2.保存 index.axml 文件。
3.打开 index.acss 文件，添加以下代码：
/* 定义按钮样式 */
.pressbutton{
text-align: center;
position:fixed;
bottom: 20rpx;
width: 100%;
}
4.保存 index.acss 文件。
修改逻辑
1.在 index.axml 文件中，将以下代码：
<view class="userinfo">
替换为：
<view a:if="{{flag}}" class="userinfo">
2.在 index.axml 文件中，将以下代码：
<view class="pressbutton">
替换为：
<view a:if="{{!flag}}" class="pressbutton">
3.在 index.axml 文件中，将以下代码：
<button size="mini" type="primary">获取头像</button>
替换为：
<button size="mini" type="primary" onTap="getUserInfo">获取头像</button>4.保存 index.axml 文件。
5.打开 index.js 文件，替换为以下代码：
Page({
data: {
flag: false,
avatar: "",
nickname: ""
},
getUserInfo() {
my.showLoading({
content: "Loading..."
});
my.getAuthCode({
scopes: 'auth_user',
success: (res) => {
my.getAuthUserInfo({
success: (info) => {
console.log(info)
my.hideLoading();
// setData 函数用于将数据从逻辑层发送到视图层
this.setData({
avatar: info.avatar,
nickname: info.nickName,
flag: true
})
},
});
},
});
}
});
6.保存 index.js 文件。
完整代码示例
index.axml
<!--添加 helloworld -->
<view class="start"><view class="hello">
Hello World!
</view>
</view>
<!-- 添加头像信息 -->
<!-- 头像 avatar -->
<view a:if="{{flag}}" class="userinfo">
<!-- 显示图片 image，图片获取为动态值{{}}，定义头像样式 --><image mode="scaleToFill" src="{{avatar}}" class="logosize"/>
<!-- 显示用户昵称 --><text style="display:block">{{nickname}}</text>
</view>
<!-- 底部显示按钮 -->
<view class="pressbutton">
<!-- 用小尺寸mini，添加点击事件 --><button size="mini" type="primary" onTap="getUserInfo">获取头像</button>
</view>
index.acss
.start{
text-align: center;
}
.hello{
padding: 30rpx;
font-size: 50rpx;
}
.pressbutton{
text-align: center;
position:fixed;
bottom: 20rpx;
width: 100%;
}
.logosize{
width: 100rpx;
height: 100rpx;
}
.userinfo{
text-align: center;
padding: 200rpx;
}
index.js
Page({
data: {
flag: false,
avatar: "",
nickname: ""
},
getUserInfo() {
my.showLoading({
content: "Loading..."
});
my.getAuthCode({
scopes: 'auth_user',
success: (res) => {
my.getAuthUserInfo({
success: (info) => {
console.log(info)
my.hideLoading();
// setData 函数用于将数据从逻辑层发送到视图层
this.setData({
avatar: info.avatar,
nickname: info.nickName,
flag: true
})
},
});
},
});
}
});
