按照惯例,先上官网链接 传送门
很多入门小伙伴可能看不懂官网给的图解,这里简单解释下
1. 从小程序端,用户授权wx.login(),得到 code
2. 在小程序端,拿着 code,给到自己的后台服务器
3. 在自己后台, 拿着前台传来的code,和自己的AppId,Secret,去请求微信服务接口
4. 微信服务接口,把用户的openId 和 session_key返回给你的后台服务器
5. 拿着返回的 openId 去开发后续的用户登录程序.
6. 如何获取 appId和Secret,请看文末
获取流程如下:
- 前端(小程序端)
- - user.wxml
- - user.js
- - app.js
- 后端(开发者服务器端)
- - 在pom.xml中导入jar包
- - 准备参数(AppId & secret)
- - Ctrl+C+V 工具包
- - 执行主要功能-获取openId
- - 将获取到的openId做登录业务处理
查看自己的 AppId和Secret 传送门
小程序前端
在app.js页面中,增加自己的后台地址
globalData: {
userInfo: null,
base_url: "http://localhost:8080"
}
在user.wxml中,写上简陋的用户信息
<!--pages/user/user.wxml-->
<view class="container">
<view class="userinfo">
<!-- 如果可以使用用户信息,则显示用户信息 -->
<block wx:if="{
{canIUseOpenData}}">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl" ></open-data>
</view>
<view class="userinfo-nickname">
<open-data type="userNickName"></open-data>
</view>
</block>
<!-- 反之, 显示按钮, 按钮用于授权登录用户信息 -->
<block wx:else="{
{!hasUserInfo}}">
<button bindtap="login" >授权登录</button>
</block>
</view>
</view>
user.js
// pages/user/user.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: false// wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (op