零基础搞定微信小程序登录页面，完整开发指南

说实话，很多人一听到“小程序开发”四个字，脑子里立马浮现出一堆看不懂的代码、复杂的逻辑、以及各种报错的红屏。但你要是真的动手试一次，就会发现，搞一个登录页面，其实就像搭积木。你不需要懂什么高深算法，也不用背什么编程圣经，只需要跟着流程走一遍，就能看到一个能跑起来的页面出现在你眼前。这篇文章，就是专门写给那些“零基础”的朋友看的，咱们不聊虚的，直接上手，把登录页面干出来。

登录页面这东西，说大不大，说小不小。它是用户进入你小程序的第一道门，也是你收集用户信息、建立用户体系的关键入口。微信官方提供了两种主流的登录方式：一种是传统的账号密码登录，另一种是微信授权一键登录。对于零基础的新手来说，我强烈建议你从微信授权登录开始做，原因很简单——用户不需要输入任何东西，点一下“允许”，你的小程序就能拿到他的微信昵称和头像，这体验感直接拉满。而账号密码登录，你得自己搭后端数据库、处理密码加密，那工作量蹭蹭就上去了。

咱们先来捋一捋微信授权登录的整体流程，你心里有个底。用户打开小程序，你前端页面展示一个“微信登录”按钮，用户一点，就触发微信的`wx.login`接口，拿到一个临时的`code`。这个`code`就像一张一次性门票，有效期只有五分钟。然后你把这张门票传到你自己服务器，服务器拿着`code`加上你的小程序`appid`和`appsecret`，去微信的接口换一个`openid`。这个`openid`就是用户在你小程序里的唯一身份证。拿到`openid`之后，你就可以去数据库里查一查，这个用户是不是老熟人，如果是，直接拉取他的资料，如果不是，就新建一个账号。这么一套流程下来，登录就算完成了。

听起来有点绕？别怕，咱们把步骤拆开来看。第一步，你需要在微信公众平台注册一个小程序账号，拿到`appid`和`appsecret`。这两个东西，一个相当于你的身份证号，一个相当于你的密码，千万不能泄露。第二步，打开微信开发者工具，新建一个项目，把`appid`填进去。这时候你会看到默认的代码模板，别慌，咱们先把它清空，自己写一个干净的页面。在`index.wxml`文件里，写一个按钮，就写“微信一键登录”，样式你可以自己调，圆角、颜色、背景图，随便整。然后对应的`index.js`文件里，写一个监听点击事件的函数，在这个函数里调用`wx.login`。

这里有个小细节，很多新手容易踩坑。`wx.login`拿到的`code`只是一个临时凭证，它本身不包含任何用户信息。你不能直接把`code`当作用户身份存起来，而是必须拿它去换`openid`。怎么换？你得用`wx.request`这个API，把你自己的服务器地址带上，把`code`作为参数传过去。服务器那边收到请求后，再向微信的`https://api.weixin.sns/jscode2session`这个地址发一个请求，把`appid`、`appsecret`、`code`三个参数提交过去。微信会返回一个JSON数据，里面就有`openid`和`session_key`。`session_key`是你用来解密用户手机号之类敏感信息的密钥，平时别乱动，存放在服务器端就行。

说到这儿，可能有人会问：“那我不会写服务器代码怎么办？”这个问题问得好。对于纯前端练手，你其实可以不用真服务器。你可以在本地用一些现成的工具，比如微信云开发。这是微信官方提供的一个服务，你不需要自己买服务器、配数据库，直接在开发者工具里开通云开发，写几个云函数就能搞定。云函数的作用，就是帮你完成刚才说的“拿code换openid”这个操作。具体来说，你写一个云函数，命名为`login`，里面调用微信的`cloud.getWXContext()`方法，这个方法能直接帮你拿到`openid`，连`appsecret`都不用你自己管了，微信帮你全托管了。这么一来，整个登录流程就简化为：前端拿到`code`，传给云函数，云函数返回`openid`，你再把`openid`存到你云数据库里。

你可能会觉得，这已经够简单了，但是还有更偷懒的办法。如果你只是想快速看到效果，连云函数都可以不用。直接在前端`wx.login`里，用`wx.getUserProfile`这个接口，这个接口能直接弹出授权框，让用户确认后，直接返回用户的昵称和头像。不过要注意，微信这两年调整了规则，`wx.getUserProfile`只能在用户点击按钮的触发事件里调用，不能一进页面就弹窗，否则会被拦截。而且从2022年10月之后，`wx.getUserProfile`返回的昵称会默认变成“微信用户”，头像也会变成灰色头像，这是为了隐私保护。所以如果你想拿到真实的头像昵称，得用`open-data`组件，或者引导用户去手动填写头像昵称。

说到页面设计，登录页虽然不是越花哨越好，但也不能太寒酸。你想想，用户第一次打开你的小程序，第一眼看到的就是登录页，这决定了他对你产品的第一印象。你可以在页面上方放一个Logo，下面是欢迎语，比如“欢迎来到XX社区”，中间放一个大大的登录按钮，背景色用暖色调或者渐变，按钮做成圆角，加一点阴影效果，这样看起来比较有质感。如果你担心用户不信任，可以在登录按钮下面放一行小字：“登录即代表同意《用户协议》和《隐私政策》”，这行字是合规要求，必须得有。

代码实现上，我给你一个最简单的骨架。`index.wxml`里，就一个``标签，绑定一个`bindtap="handleLogin"`事件。`index.js`里，`handleLogin`函数里面，先调用`wx.login`，拿到`code`，然后把`code`传给云函数。云函数的代码也很简单，就几行。如果你用的是云开发，你甚至不需要写`wx.request`，直接用`.callFunction`调用云函数就行。云函数返回`openid`后，你再存到本地缓存里，方便下次启动时直接读取，不用每次都登录。

这里插一句，微信登录其实还涉及一个“静默登录”和“显式登录”的区别。静默登录，就是小程序一启动，微信就偷偷帮你换了`openid`，用户完全没感觉，但你后台已经识别出他是谁了。显式登录，就是刚才说的，需要用户点一下按钮，授权头像昵称。一般做法是：小程序启动时先静默登录，拿到`openid`，然后看看数据库里有没有这个用户，如果有，直接进主页；如果没有，再弹出一个页面，引导用户去授权头像昵称，补全资料。这样既保证了用户体验，又不会丢失用户信息。

我再提醒一个常见问题，很多新手在调试的时候，会遇到“code无效”或者“appid not found”之类的报错。这种问题九成是`appid`填错了，或者`appsecret`和`appid`不匹配。还有一个坑，就是你在微信公众平台设置的“服务器域名”必须是HTTPS的，不能是HTTP，否则请求会被拦截。如果你用的是云开发，就没有这个限制，因为云开发自带HTTPS。所以对于零基础的朋友，我强调，云开发是你最容易上手的一条路。

等你把登录页面跑通了，整个小程序的开发之路就算是开了一个好头。你会发现，所谓“登录”，本质上就是一次身份确认，一次数据交换，一次前后端的握手。你理解了这套流程，以后再去做其他功能，比如支付、分享、消息推送，都会觉得顺手很多。所以别被那些专业的术语吓倒，也别指望一次就能写出完美无缺的代码。你先照着这篇文章的步骤，把登录页面搭出来，跑起来，哪怕报错了，也把报错信息复制下来去搜索一下，慢慢调试。搞定了登录页，你的小程序，就已经成功了一半。

原文来自：小程序开发

下一篇：微信门店小程序申请全攻略，轻松搞定开店必备 上一篇：微信小程序定位失效，一文讲透position的坑与解法