How to implement the WeChat login function of Android app on uniapp (operation process summary)

How to implement the WeChat login function of Android app on uniapp? The following article will share with you the specific operating procedures for permission application and development of Android app WeChat login on uniapp. I hope it will be helpful to everyone!

WeChat Open Platform provides some open interfaces of WeChat, such as WeChat login, shared payment, etc., and provides support services for other platform applications. The online information is relatively loose, and some unfamiliar concepts are added, so the simple process is not connected in series. This article summarizes the specific operation process of implementing permission application and development of Android app WeChat login on uniapp. I hope it will be useful to you.

First, let’s take a look at the overall process of developing the WeChat login function. I have sorted out a general flow chart to help you understand the following content in a more organized manner:

It can be seen that developing a WeChat login is still a bit troublesome. Let me introduce it in detail step by step!

1. Register a WeChat Open Platform account

First register a WeChat Open Platform account, there are a total of WeChat platforms There are 4 of them. This open platform opens WeChat login, sharing, payment and other content to apps, web pages, mini programs, etc. I won’t go into details about the specific process. Just be careful not to conflict with the email account used elsewhere in WeChat.

2. Developer Qualification Certification

After successfully registering the account, log in. To develop WeChat login functions, developer qualification certification is required. Registration for the open platform is now open to individuals, but developer qualification certification is only open to enterprises and institutions, and certification costs 300 yuan. The enterprise certification I used requires the relevant enterprise qualification certificates during the application process. The process is very fast with complete information and can be completed in about two or three days. The invoice application is quite slow, taking about a month.

3. Apply for a mobile application on the open platform

After successful authentication, enter the management center, select mobile application, create a mobile application, and follow the steps Just come and go, the only thing that may make you stuck is the application signature. When I got to this step, I was completely confused and didn't know what application signature was.

4. Application signature generation

Look at the above description, application signature is mainly used to Identity verification, called secondary verification, is relative to the logged-in user. Normally, you can apply after logging into the open platform. Now that you have this signature, you have to go through some trouble to prove that you have the development permission for this application. Under normal circumstances, most Android apps released in small factories use public test certificates. Now, to generate application signatures, you have to use your own certificate. With your own certificate, you can generate the application signature required by WeChat Open Platform. So where does this self-owned certificate come from? Next, let’s see how to create this own certificate and application signature.

Generate your own certificate

1), install jre environment

jre is a java development environment. You can use the cmd command window to use the java command to determine whether the current environment has jre. If it prompts 'java' is not an internal or external command, nor is it an operable program or batch file, that means it is not installed; if the output is like this, it means it has been installed:

If it is not installed, download the jre installation package: www.oracle. com/java/techno…

After installation, reopen cmd and enter java again to see the normal output related content. Next, you need to add the jre installation path to the system environment variable:

d:  
set PATH=%PATH%;"C:\Program Files\Java\jre1.8.0_201\bin"

Use cmd to enter the above command. The first line means to switch to the d drive. This directory is arbitrary and is used to store what will happen next. For the generated signing certificate, you can create another folder and cd into it. After pressing Enter, the second line means to add the jre command to the temporary environment variable. The subsequent address is based on your actual installation address of jre. After this step, the files generated by subsequent operations will be generated in the current folder.

2) Generate a signature certificate

After the above steps are normal, you can enter the following keytool -genkey command to generate the certificate. It should be noted here that 'test' in testalias and test.keystore can be modified and replaced with the name in your own project.

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

回车后，输入密码，比如123456，密码看不见的，不要输错了，后面的按提示填就可以了，一般输入英文或拼音。最后提示是否正确时，不要回车了，输入y确认正确，否则要再重来一次。

确认后，又提示密钥口令，这个直接回车相同就行。

如果提示这个，就把这个指令复制了粘贴执行，输入前面设置的口令123456就可以了。

最后在当前执行命令的文件夹里就能看到应用证书了。

生成签名

前面是生成证书，这一步终于可以生成签名了。

3）、使用自有证书打包

这一步很简单，用hbuilderx进行app云打包，在弹出框中选择安卓的自有证书打包方式。这个自有证书就是我们刚才生成的证书，兴不兴奋，我们也是有证书的人了！？下面三栏，别名、密码都是前面的操作步骤中写过的，没忘记就写上吧，然后选择证书文件，剩下的都是常规操作，最后打包就可以了。

4）、用签名生成工具生成签名

先到微信开放平台下载签名生成工具，下载好之后，在手机端安装，输入安卓包名。

这里有坑，要注意下，uniapp的mainfest.json文件配置中，appid必须是'_UNI_'开头，所以你的配置文件中得是'_UNI_'开头的，但是打包时的包名跟那个配置又是两个体系，互不影响，你可以在这里把名字改下，把uni这个头去掉。因为这个包名后面要跟ios版本一起用，你得跟ios一样，相信打过包的人应该能明白我在说啥。

输入正确的包名(去掉了'UNI'开头)，点击下面的按钮就生成了一串id，这个就是——应用签名！真是费劲!

5、按开放平台流程申请应用

有了签名，你就可以按照微信开放平台的流程申请移动应用了，就是本文的第二张图，输入签名，一步步走就行。

最后就是下面这样子了，代表你提交成功，可以耐心的等了（三天了，没变化，最后过了七八天才通过，中间按要求修改了两次）：

等审核通过，就可以申请微信登录等功能了。

最后要说的一点就是，app或者你资料中提交的相关域名网站不要给登录界面，否则可能会审核不通过，因为他们进不去，看不了当然无法审核。

6、获取appid和appsecret

移动应用的审核通过后，微信登录功能就会自动开放了，同时开放的还有分享、发送朋友等功能。

同时，你也可以获取到获取appid和appsecret，这个我自己保存越来，后面开发会用到的。

7、微信登录业务流程梳理

uniapp提供了微信登录api，不过我们首先要清楚微信登录的流程，因为微信登录要配合我们系统自身的业务。我在这里梳理了一张流程图，这张图就是上面总流程图的一部分，你可以对照参考，辅助你开发相关功能。

8、微信登录服务api调用

如果你按照前面的步骤拿到AppId和AppSecret信息，接下来就是按照这个流程来开发微信登录功能。在uniapp上开发app版本的微信登录功能需要调用uni的api还有h5+的api。 这里就直接给一个示例代码：

onLoad() {
	plus.oauth.getServices((services) => {
			this.weixinAuthService = services.find((service) => {
					return service.id === 'weixin'
			})
		});
},
methods: {
	appWxLogin() {
		var self = this;
		this.weixinAuthService.authorize(function(res) {
			//支持微信、qq和微博等
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 微信用户信息存入本地，后期备用
					var auth = null;
					plus.oauth.getServices(function(services) {
						auth = services.find((service) => {
							return service.id === 'weixin'
						});
						try {
							uni.setStorageSync('auth_service', auth)
						} catch {
	
						}
					}, function(e) {
						console.log(e);
					});
					if (loginRes.authResult) {
						let access_token = loginRes.authResult.access_token;
						let openid = loginRes.authResult.openid;
						uni.request({
							method: 'POST',
							url: 'https://*********/wx-login/appwxlogin',
							data: {
								openid: openid
							},
							success: (res) => {
								console.log(res);
								//将openid存入本地缓存
								uni.setStorage({
									key: 'openid_key',
									data: res.data.openid
								});
								if (res.statusCode == 200 && res.data && res.data.username) {
									self.isFirstWXLogin = false;
									self.name = res.data.username;
									self.password = res.data.password;
									setTimeout(function() {
										self.tologin({
											username: res.data.username,
											password: res.data.password,
											encrypted: true
										})
									}, 0)
								} else {
									//首次登录，跳转到一个绑定账号的页面
									uni.navigateTo({
										url: 'wxlogin'
									});
								}
							},
							fail: (error) => {
								console.log(error);
							},
							complete: (e) => {
								console.log(e);
							}
						})
					} else {
	
					}
				},
				fail(e) {
					console.log(e);
				},
				complete(e) {
					console.log(e);
				}
			});
		}, function(error) {
			console.log(error)
		}, {
			scope: 'snsapi_userinfo'
		})
	}
}

注意几点： 

1、首先取到微信服务对象this.weixinAuthService。 

2、其次调用授权api——authorize，然后再调用uni.login这个api。

 3、uni.login成功后，如果想取得用户信息可以调用uni.getUserInfo，也可以调用plus.oauth.getServices，后者是h5+的api，前者也是基于后者的封装。 

4、代码中这个接口(/wx-login/appwxlogin)是一个本地服务，具体的业务就是把openid带到用户表中去查找，如果能找到，说明此用户绑定过微信，后端返回用户信息直接登录；如果没找到，就返回提示需要输入用户名密码登录，而且这个登录过程要带上openid，最终插入数据库。

这个api调用与业务开发流程应该比较好理解，我这里也不再画图了，应该都能看明白。 好了，uniapp开发安卓端的微信登录功能就介绍完了，如果对你有用就点个赞或者帮忙转发吧！谢谢鼓励！

推荐：《uniapp教程》

The above is the detailed content of How to implement the WeChat login function of Android app on uniapp (operation process summary). For more information, please follow other related articles on the PHP Chinese website!