1、登录流程

1、获取临时登陆凭证 code (code —— 限频接口),wx.login()

2、前端向服务器发送 ajax 请求( wx.request() ),该请求需要携带三个参数:code、appid、appsecret,目的是获取唯一标识符 token,在api 文件夹下新建 login.js

3、前后端交互

        3.1  对于一个新用户,程序内部没有可提供的 appsecret,用户需先注册才能获得appsecret

        3.2  用户登录,此时程序内部将只需传入 code appid两个参数,同时服务器发送内部请求,将根据用户传入的 appid 来找相应的appsecret

        3.3  用户根据 code appid appsecret 实现登录

4、前端将用户唯一标识符 token 保存在本地,此后所有个人相关的业务都需要用到 token,若没有token,则需要跳转到 登陆页面获取

15、微信小程序登录详解-编程之家

 15、微信小程序登录详解-编程之家 

 api——request.js


import baseUrl from './baseUrl'
function request(config) {return new Promise((resolve, reject) => {wx.request({url: baseUrl + config.url,timeout: 5000,method: config.method,//   在微信小程序中,get、post、delete、put 传参都是 datadata: config.data, //如果需要传参success(res) {resolve(res)},fail(error) {console.log('error=>', error);reject(error)}})})}export default request

api——login.js

//  写接口
import request from './request'function doLogin(data) {return request({url: '',  //登录接口method: 'get',data})
}export const register=(data)=>{return request({url:'',     //注册接口method:"get",data})
}
export {doLogin
}

api——baseUrl.js

export default 'http://www……'  //导出域名

wxLogin——index.wxml

<button type="primary" bindtap="login">登录</button>
<button type="default" class="register" bindtap="register">注册</button>

wxLogin——index.js

import { doLogin, register as registerApi } from '../../api/login'Page({data: {},/*    登录流程:1、获取临时登陆凭证(code码 ) —— 限频接口2、 发送 ajax 请求,该请求需要携带 APPID APPsecret code,目的是获取用户唯一标识符在 api 文件夹下新建 login.js3、前后端交互3.1 对于一个新用户,程序内部没有提供现成可用的 APPsecret ,用户需要先注册(appid、appsecret)才能拿到 APPsecret3.2 用户登录,此时程序内部将只需传入 code appid两个参数,同时服务器发送内部请求,将根据用户传入的 appid 来找相应的appsecret3.3  然后根据 code appid appsecret 实现用户登录效果4、将用户唯一标识符 token 保存在本地此后所有与个人相关的业务都需要携带 token,若没有token,则需要跳转到登录页面,使之携带token5、前端通过 wx.request() 发起业务请求*/// 登录login() {wx.login({success: res => {console.log(res);let code = res.code// 获取用户唯一标识符doLogin({// 接口对应的文档中要求传递的参数 code、appid,但实际需要参数有三个 code, //临时登陆凭证appid: ''//在小程序后台的“开发管理——开发设置——APPID(小程序ID)”拿}).then(res2 => {console.log(res2);// 将用户唯一标识符 token 保存在本地wx.setStorageSync('token', res2.data.id)})}})},// 注册register() {registerApi({appId: '',//在小程序后台的“开发管理——开发设置——APPID(小程序ID)”拿appSecret: '',  //小程序密钥}).then(res3 => {console.log(res3);})},})

15、微信小程序登录详解-编程之家

 15、微信小程序登录详解-编程之家