最近在开发过程中积累了一些踩坑经验，希望能对类似的开发者提供一些参考方法。

网上有太多的文章都写到了相关教程，我的并不是最全面的，但直接上干货，合适的直接提走就行。

相信开发到这一步的攻城狮们Vue页面也基本写得差不多了，想要接着开发整个需求第一步就是实现用户的登录功能，上半篇先写微信小程序官方的登录样式，下半篇使用第三方服务来管理小程序用户的文章（我写使用Authing组件的登录），这一篇就相当于基础知识了。

官方文档的登录方法其实就是一个调用微信小程序官方接口的功能，一句话概括就是：

引导用户点击授权获取用户信息，实现一进入微信小程序就弹出授权窗口

 以下是实现的功能截图：

PS：查阅官方文档是很有必要的。微信小程序官方文档链接如下：

用户信息 / 手机号 / 手机号快速验证

看完官方文档还不理解的接着往下看

微信小程序登录流程时序图是这样的：

 大白话解释就是：

（1）、准备工作得有

1、你，在开发人员名单内

2、在HBuilder X开发工具里，项目的manifest.json中先配置好APPID

配置APPID步骤：点击项目目录里的manifest.json→微信小程序配置→微信小程序APPID

（2）、使用流程

（背后不可见的原理，也可以用来解释console.log出来的code）：

1、概述：

使用 button 组件，并将 open-type 指定为 getPhoneNumber 类型，以获取用户手机号码。

注意：不管是getUserInfo还是getPhoneNumber都只能通过 button 去触发！！！

2、先跑以下代码

跑一下代码是为了让你更好理解上边我画的图，以便你最终能完全理解最后的代码

1、authing的使用

先打开

开始集成 | Authing 文档

2、完成authing的下载后，正确配置（全网首个教程）

项目根目录下创建一个common文件夹，里边创建一个authing.js文件

authing.js代码为：

以上是截图 ，完成后到下一步

3、代码里import authing：

4、完整代码

在实际开发过程中，认真查阅文档是第一步，要是遇到文档不详细或者教程不理解的情况，则需要我们综合自身需要进行选择性的参考。

以上方式在每次做开发都会给客户说明并让其选择，目前主流方式就是通过微信的手机号直接一键注册到小程序的用户管理信息中，authing会帮我们创建好用户，通过wx手机号的话不仅能够识别出用户注册方式（wx or 其他）、自动填充用户手机号码。