打开一个数据库客户端 .. 连接到我们的后端应用数据库 .. 选择数据库 ..

打开 wp_usermeta 这个数据表 . 搜索一下 meta_key .. 操作选择 contains .. 搜索的是 wx_ ..

因为之前网站上的用户绑定过微信帐号，所以这里会有一个 wx_openid .. 还有一个 wx_session_key ..

选中这两条数据 .. 把它删除掉 ..

再回到微信开发者工具 .. 先退出登录 ..

然后再按一下微信登录 ..

这次因为服务端那里用微信用户的 openid 没找到对应的网站用户，所以会返回一个 404 的状态码 ..

这种情况下，我们可以把用户带到一个能够绑定微信帐号的页面 .. 用户可以输入他在网站上申请的用户名还有密码 .. 匹配的话，在服务端那里可以绑定用户的微信帐号 .. 就是存储一下用户的 openid ..

在个人档案页面请求微信登录的成功回调里，添加一个新的情况 .. 如果返回的状态码是 404 ..

用一下 wx.navigateTo .. 可以把用户带到 /pages/users/login 这个页面 .. 带上一个 bind 参数 .. 对应的值设置成 true ..

这样在登录页面上，我们可以用这个 bind 参数的值做一下判断 .. 如果它的值是 true ，就可以去绑定微信 ..

再添加一个 break ..

login.js

打开 login.js .. 先在页面上添加一个 bind ，把它设置成 false ..

然后在页面上添加一个 onLoad 方法 .. 方法有个 options 参数 ..

里面可以先添加一个 bind .. 它的值可以判断 options.bind .. 如果是 true ，就让 bind 的值等于 true，不然就让 bind 的值等于 false ..

下面再用一下 this 的 setData .. 设置一下页面上的 bind 数据的值 ..

登录成功获取到服务端签发的 token 以后，我们可以再判断一下 .. 看看页面上的 bind 这个数据是不是 true ，如果是，可以先用一下 wx.getUserInfo .. 成功以后，调用 success 方法 .. 得到的响应可以叫 userInfo .. 如果有 userInfo ..

weixinBind

再用一下 weixinBind 这个方法去绑定微信帐号 .. 在用户的个人档案页面上，我们定义了这个方法 .. 先找到它 .. 可以把它放在之前定义的 weixin 这个模块里面 ..

简单再修改一下 ..

下面再导出这个 weixinBind ..

这个方法里面还用了一个 API_ROUTE_WEIXIN_BIND .. 在文件的一开始，定义一下它 .. 对应的值是 weixin/v1/bind ..

回到个人档案页面 ... 在文件的一开始 .. 导入 weixin 模块的时候，把它里面的 weixinBind 也拿出来 ..

现在使用这个方法的时候可以不用再加 this ..

再回到 login.js ..

在文件的一开始， import .. weixinBind .. from ../../libs/weixin ..

然后找到使用了这个方法的地方 ..

设置一下它的参数 .. 一个 userInfo .. 对应的值就是用 getUserInfo 得到的响应，我们给这个响应起的名字就叫 userInfo ..

再添加一个 userId .. 对应的值是 response.data.user_id ..

还需要一个 token .. 对应的值是 response.data.token ..

视图

登录页面的视图可以再去改进一下 .. 打开页面的视图文件 .. 这个提交用的按钮上的文字，现在我们可以判断一下页面数据里的 bind 的值 .. 如果是 true ，就让文字是 绑定微信帐号.. 不然的话，就让按钮上的文字是 登录 ..

测试

现在我们可以再到开发者工具上去试一下 ..

按一下 微信登录 .. 当前微信用户还没有绑定用户 .. 所以会打开这个登录页面 ... 让用户输入用户名，还有密码 ..

页面上的按钮上的文字是 绑定微信帐号 ..

如果登录成功 ，小程序会再发起一个绑定微信帐号的请求 ..

退出登录 ..

这次直接按一下 微信登录 ..

服务端的微信登录接口会根据微信用户的 openid 找到对应的网站用户，然后给用户签发 token，让用户登录 ..

然后再回到数据库客户端检查一下 .. 刷新 ..

这里又会找到两条 wx 前缀的记录 .. 因为刚才有一位用户绑定了他的微信帐号 ..