【九月打卡】第21天 Java支付全家桶 企业级各类支付手段一站式解决方案（7-5）

课程名称：Java支付全家桶 企业级各类支付手段一站式解决方案

课程章节：7-5 完成支付宝小程序登陆功能

主讲老师：神思者

课程内容：

今天课程学习的主要知识点内容包括：
1、如何将当前的 uniapp 项目，修改成也同时支撑支付宝小程序的版本；
2、通过 uniapp，实现支付宝小程序登陆功能的开发步骤；

课程收获：

1、为了将原先的 uniapp 项目，修改成同时支持 微信小程序 和 支付宝小程序 的版本，进行了如下改造：
（1）接口定义的改造，修改 main.js 文件，改成同时支持 微信小程序 和 支付宝小程序 版本的接口，其主要代码如下：

Vue.prototype.url = {
	"wx":{
		"login": baseUrl + "/app/wx/login",
		......
	},
	"zfb":{
		......
	},
	......
}

（2）需要注意的是，接口定义修改后，需要将原先 uniapp 项目中 js 模块里面的接口请求地址变量，对其中微信相关的，全部按照重新定义后的接口变量进行修改（其实就只有接口请求的变量路径名有点区别，其他的是没啥区别的）。

2、通过 uniapp，实现支付宝小程序登陆功能的开发步骤如下：
（1）修改 main.js 文件，将后端写好的支付宝登录的接口地址，配置在 “zfb” 节点下，比如：

Vue.prototype.url = {
	......
	"zfb":{
		"login": baseUrl + "/app/zfb/login"
	},
	......
}

（2）对原先的 login.vue 页面进行开发改造，需要新增小程序运行环境识别的逻辑，并将原先 微信的登录的逻辑，放置在 微信小程序 环境下调用，额外再为 支付宝小程序 环境下，新增支付宝小程序登陆的逻辑实现。其主要核心代码如下：

main.js 下进行环境变量的配置：

Vue.prototype.appEnv="支付宝小程序"

教学视频里面，还有通过调用 uni.getProvider() 动态获取的方式。

login.vue 页面登录逻辑改造：

login: function() {
	let that = this
	if (that.appEnv == '微信小程序') {
		......
	} 
	else if (that.appEnv == '支付宝小程序') {
		my.getAuthCode({
			scopes: "auth_user",
			success: function(resp) {
				// console.log(resp)
				let authCode = resp.authCode
				my.getAuthUserInfo({
					success: function(resp) {
						// console.log(resp)
						let nickName = resp.nickName
						let avatar = resp.avatar
						uni.request({
							url: that.url.zfb.login,
							method: "POST",
							data: {
								"authCode": authCode,
								"nickname": nickName,
								"photo": avatar
							},
							success: function(resp) {
								console.log(resp)
								let token = resp.data.token
								let expire = resp.data.expire
								console.log(token)
								uni.setStorageSync("token", token)
								uni.setStorageSync("expire", expire)
								uni.switchTab({
									url: "../index/index"
								})
							}
						})
					}
				})
			}
		})
	}
}