15、微信小程序登录详解

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，则需要跳转到登陆页面获取

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、微信小程序登录详解相关推荐

微信小程序点击按钮弹出弹窗_转载 | 广东大学生就业创业微信小程序操作流程详解（一）...
广东大学生就业创业微信小程序操作流程详解(一) 转眼来到10月,炎炎夏日也阻挡不了青春的忙碌,同学萌走出校园,迈向社会. 在这段时间,同学们不仅要准备毕业论文,应对毕业答辩,还需要兼顾各种毕业手续的 ...
微信小程序python flask_Python Flask 搭建微信小程序后台详解
前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个 ...
微信小程序版本管理详解
本来觉得没必要写版本管理的文章. 奈何微信的官方文档真的是太不友好了!!! 一顿操作猛如虎.(请原谅我知识轻薄). 本文只是我这几天操作过的,一些个人理解总结,如果,有什么不对的,欢迎大家纠正我的错误 ...
flask ajax小程序,Python Flask 搭建微信小程序后台详解
后台程序返回了数据后,第三步就是小程序该怎么接收返回数据并进行相关业务逻辑处理. 小程序接收返回数据.Python-Flask向小程序返回了JSON格式的数据后,小程序的wx.requset()函数里 ...
Python Flask 搭建微信小程序后台详解
前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个 ...
企业级微信小程序实战详解
项目地址:github.com/wudiufo/WeC- 完成效果展示:www.bilibili.com/video/av488- 小爱心是否点赞组件 components/like 思路: like ...
微信小程序（详解及简单使用）
目录 1.结构分布 1.框架全局文件 1.1.pages( 页面路径列表 ) 1.2.window( 全局的默认窗口表现 ) 1.3.tabBar( 底部 tab 栏的表现 ) 2.使用view进行页 ...
一、微信小程序开发详解
目录 1.什么是小程序? 2.小程序可以干什么? 3.相关资料第一个小程序一.申请帐号二.测试号申请三.安装开发工具四.你的第一个小程序五.编译预览六.目录结构七.JSON 配置八. ...
collapse 微信小程序_详解优化你的微信小程序
这篇文章主要给大家介绍了关于微信小程序瘦身的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 前言众所周知,微信小程序在发布的时候,对提交的代码有1M大小的 ...

15、微信小程序登录详解

1、登录流程

15、微信小程序登录详解相关推荐

最新文章

热门文章