如何实现小程序的微信登录功能？ 下面文章就给大家分享一下小程序微信登录功能的具体操作流程。 希望对您有所帮助！

之前写过一篇开发微信登录功能的文章，是 app版本。 今天给大家介绍一下如何在小程序上实现微信登录。 那篇文章没有提到微信登录服务器接口。 这篇文章会提到。 具体的界面设计和表结构设计思路。 与App相比，微信小程序实现微信登录更加方便，因为不需要生成应用ID。 不过，前提是有微信开放平台。 如果没有app开发微信小程序的简要流程，您需要在官网注册一个账户。

接下来我就讲一下步骤。 过程比较简单。 需要注意的是，每个小程序都注册了一个邮箱，而一个邮箱只能绑定一个小程序，所以一个人拥有的邮箱数量直接限制为1个。 一个人拥有的小程序数量。

1、开放平台注册

这一步和之前app的微信登录功能一样。 网上有教程。 注册过程有点麻烦。 它需要公司信息。 这里我只想提一下，注册一个开放平台就足够了，可以满足应用程序和小型企业的需求。 程序、公众号、网站等的共享，我只是为了这篇文章而再次提到。 毕竟文章虽小，但五脏六腑一定要全面。

2、开发者资质认证

这和以前是一样的，因为当你通过开放平台的开发者资格认证后，你将获得在应用、小程序、公众号、网站等各个平台上使用微信开放功能的权限，并且每个平台都可以使用微信开放功能。还要加倍数，像小程序，可以加50个。这样算来，这300元还是有些值钱的。

3.开放平台添加小程序

在这里填写小程序的相关信息即可。 下一步是扫描微信二维码。 我不太明白这个扫描是什么意思，因为这个邮件和微信关系不大。 扫描二维码后，小程序将成功绑定开放平台。

点击查看看了一下，发现内容很少。

这与将应用程序绑定到开放平台完全不同。 其实很容易理解，因为这毕竟是一个微信小程序。 微信小程序是基于微信的基本权限挂载在微信上的，所以意味着微信小程序你可以直接使用微信的几乎所有功能。 只要你能开发，给我看代码就可以了。

4. 获取

您可以在开发管理和开发设置中获取小程序密钥。 一旦获得，请自行保存。 系统不会为您以纯文本形式保存它。 如果以后丢失了，可以重置生成。 该密钥在一般小程序业务中不使用，仅在做微信开放功能（登录、分享等）时使用。

5.微信登录业务设计

微信登录业务具有一般互联网产品中的注册和登录功能。 但在非互联网产品中，普通微信用户一般不允许注册。 所有用户均在此应用程序上注册。 因此，本次登录需要将普通用户绑定微信账号。

业务流程依然是微信登录功能中这张图的业务：

那么问题来了，如何实现登录呢？ 本文的重点是厘清上图中登录的具体内容。

这是官方微信登录业务设计图。 你可以理解，这个图对于那些刚刚开始的人来说有点复杂。 没关系。 根据我下面的分析你就可以大概明白这个思路了。

以下是我根据项目实际情况进行的具体业务分析。 具体内容分为前端和后端两部分：

前端业务

比如小明在手机上使用微信登录，如果是第一次登录，就必须绑定系统账号，比如账号。 他必须完成两个步骤：1、授权微信并获取微信账号信息； 2、绑定微信账号系统账号；

第一步，获取微信账号信息。 简单总结就是先获取用户授权，然后利用开发者，调用具体的登录接口来获取用户信息等信息。

第二步，获取到这些信息后，要返回到前端界面，并给出登录界面。 此步骤用于输入系统用户名和密码。

后端业务

第二步是新用户访问此应用程序时必须执行的步骤。 经过这一步，系统用户账号信息和当前用户的微信信息（）就可以同时传输到后台了。 除了常规的登录验证之外，登录界面也必须匹配，这必须正确完成才能成功登录。系统帐户是一对多的关系，很容易理解。 是一个允许多个微信用户登录的账号。当然，如果当前微信用户是第一次登录，登录时必须插入一条当前微信用户与系统账号的绑定信息。

对于前端业务来说，微信登录部分其实可以封装成服务来调用。 因为这些信息比较敏感，所以最好存储在后端。

登录业务实施

1.登录授权并获取临时登录凭证代码

下面贴出代码，我来详细分析一下思路。 使用微信登录，会弹出授权页面。 视图层代码有特殊的格式。 你必须这样写“”。 然后当按钮事件方法被触发时就会弹出授权页面。 授权后，致电uni。 这个API，这一步是获取code，code相当于一个凭证，它是临时的，每次调用都不同。 前端拿到这个证书，去后端调用服务器接口''

... xcxWxLogin() { var self = this; uni.login({ provider: 'weixin', success: function(res) { if (res.code) { //发起网络请求 uni.request({ method: 'POST', url: 'http://************/wxlogin', data: { code: res.code }, success(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' }); } }) } else { console.log('登录失败！' + res.errMsg) } }, fail(e) { console.log(e); }, complete(e) { console.log(e); } }); }

登录后复制

2、微信登录并获取用户唯一标识

这一步是放在服务器端的。 我用的是node写的接口供大家参考：

router.post("/wxlogin", (req, res, next) => { //将请求地址的url后面的参数拼接起来 var data = { 'appid': config.appId, 'secret': config.appSecret, 'js_code': req.body.code, 'grant_type': 'authorization_code' }; console.log(data); // querystring的stringify用于拼接查询 var content = querystring.stringify(data); // 根据微信开发者文档给的API var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content; // 对url发出一个get请求 request({ 'url': url }, (error, response, body) => { // 将body的内容解析出来 let abody = JSON.parse(body); // body里面包括openid和session_key console.log(abody) //根据openid查找用户，如果查到则返回用户名密码登录，否则直接提示登录 getAllUsers(abody, res) }) })

登录后复制

以上代码仅供参考。 这个想法是调用接口'/sns/...

3、前端将用户信息存入本地缓存。

授权后可以调用此步骤。 此步骤根据您的实际需要可选。 我用这个来保存头像、微信昵称等，如果对uni相关的API不熟悉，可以先阅读API文档。

uni.getUserInfo({ provider: 'weixin', success: function(infoRes) { uni.setStorageSync('auth_service', infoRes.userInfo) } });

登录后复制

好了，小程序登录的基本步骤就到这里了。 我希望它对你有帮助。 如果有用，请点个赞，谢谢！

推荐：《教程》