微信登录:视图与逻辑

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

自由学三年,把想法变成现实。33 折优惠(最后 6 天), 现在订阅 →

打开小程序的 pages .. users .. show.wxml ,这个文件是小程序的个人档案页面的视图 .. 复制一个按钮 .. 按钮上的文字是 微信登录 .. 点按的处理方法可以设置成 onTapWeixinLoginButton ..

然后打开这个页面的逻辑文件 .. users 里面的 show.js ..

添加一个事件处理方法,名字是 onTapWeixinLoginButton .. 里面用一下 weixinLogin 这个方法 .. 这个方法做的事就是去请求用微信登录 ..

我们可以把这个方法单独放在一个模块里 .. 新建一个文件,放在 libs 目录的下面,文件的名字可以是 weixin.js ..

在这个文件里,先添加一个 weixinLogin .. 它是一个函数 .. 函数里面先用 wx.login 获取到一个登录凭证 .. 成功以后会调用 success ,添加一个这样的方法 .. 得到的响应可以起个名字叫它 login ..

接着再用一下 wx.request 去向后端接口发送一个登录的请求 .. 请求的地址是 API_BASE .. 斜线 .. 再加上一个 API_ROUTE_WEIXIN_LOGIN ..

然后在文件的一开始再添加一个 API_BASE .. 它的值就是网站的基本的地址 .. 后面加上一个 wp-json ..

再添加一个 API_ROUTE_WEIXIN_LOGIN .. 对应的值可以是 weixin/v1/login .. 这个地址是我们自己定义的微信登录用的后端服务接口的地址 ..

回来再继续配置请求 .. 请求的 method ,也就是请求的方法设置成 POST .. 请求里要包含一个请求的主体数据 .. 一个 data .. 添加一个 code,对应的值可能是 login 里面的 code 属性的值 .. 就是调用 wx.login 得到的登录凭证 ..

成功以后调用 success 方法 .. 得到的响应是 response .. 把响应输出到控制台上检查一下 ..

在文件的底部,用一个 export .. 导出 weixinLogin ..

再回到用户的个人档案页面的逻辑文件 .. 文件的一开始先导入刚才定义的模块 .. import .. 把 weixinLogin .. 从 libs 里面的 weixin 这个模块里面拿出来用一下 ..

测试

回到小程序的开发者工具 .. 可以试一下 .. 当前登录的这个用户跟用户的微信已经绑定在一起了 ..

先退出一下登录 ..

现在,个人档案页面上会多了一个微信登录按钮 .. 按一下它 .. 小程序会请求使用微信登录.. 后端服务接口用微信用户的 openid 在网站上找到了对应的用户 ..

服务端就会给用户签发一个 Token .. 现在控制台输出的东西就是从服务端那里响应回来的 Token 数据 ..

微信登录:视图与逻辑《 微信小程序:微信登录 #7 》

统计

10670
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点