flask与小程序登录数据通信案例 第一步 小程序登录

2024-03-20 12:44

本文主要是介绍flask与小程序登录数据通信案例 第一步 小程序登录,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

app.js 首先在app.js里设置全局变量globalData

并在其中配置域名信息【和pycharm上的flask  ip接口一致】

//app.js
App({onLaunch: function () {},// globalData是一个全局数据对象,包含了以下几个属性1. userInfo: 用户信息,初始值为null,可以用来存储用户的登录信息或其他个人信息。// 2. version: 版本号,当前为1.0,用于标识系统或应用程序的版本。// 3. shopName: 商店名称,当前为"山东绿清源饮品有限公司",用于标识商店的名称。// 4. domain: 域名,当前为"http://192.168.124.46:8000/api",用于指定接口请求的域名。globalData: {userInfo: null,version: "1.0",shopName: "山东绿清源饮品有限公司",domain:"http://192.168.124.46:8000/api"},tip:function( params ){var that = this;var title = params.hasOwnProperty('title')?params['title']:'提示信息';var content = params.hasOwnProperty('content')?params['content']:'';wx.showModal({title: title,content: content,success: function(res) {if ( res.confirm ) {//点击确定if( params.hasOwnProperty('cb_confirm') && typeof( params.cb_confirm ) == "function" ){params.cb_confirm();}}else{//点击否if( params.hasOwnProperty('cb_cancel') && typeof( params.cb_cancel ) == "function" ){params.cb_cancel();}}}})},alert:function( params ){var title = params.hasOwnProperty('title')?params['title']:'提示信息';var content = params.hasOwnProperty('content')?params['content']:'';wx.showModal({title: title,content: content,showCancel:false,success: function(res) {if (res.confirm) {//用户点击确定if( params.hasOwnProperty('cb_confirm') && typeof( params.cb_confirm ) == "function" ){params.cb_confirm();}}else{if( params.hasOwnProperty('cb_cancel') && typeof( params.cb_cancel ) == "function" ){params.cb_cancel();}}}})},console:function( msg ){console.log( msg);},getRequestHeader:function(){return {'content-type': 'application/x-www-form-urlencoded','Authorization': this.getCache("token")}},buildUrl:function (path,params) {var url = this.globalData.domain + path;var _paramUrl = "";if(params){_paramUrl = Object.keys(params).map(function(k){return [encodeURIComponent(k), encodeURIComponent(params[k])].join("=");}).join("&");_paramUrl ="?" + _paramUrl;}return url + _paramUrl;},getCache:function (key){var value = undefined;try {value = wx.getStorageSync(key);} catch (e) {}return value;},setCache:function (key,value) {wx.setStorage({key:key,data:value});}});

然后按照微信官方捣鼓的微信官方的微信账号的登陆系统登录进程进行一步一步的搭配。

微信小程序 用户信息·小程序登录_w3cschool

mina/pages/index/index.js

//login.js
//获取应用实例
var app = getApp();
Page({data: {remind: '加载中',angle: 0,userInfo: {},regFlag:true},goToIndex: function () {wx.switchTab({url: '/pages/food/index',});},onLoad: function () {wx.setNavigationBarTitle({title: app.globalData.shopName});this.checkLogin();},onShow: function () {},onReady: function () {var that = this;setTimeout(function () {that.setData({remind: ''});}, 1000);wx.onAccelerometerChange(function (res) {var angle = -(res.x * 30).toFixed(1);if (angle > 14) {angle = 14;}else if (angle < -14) {angle = -14;}if (that.data.angle !== angle) {that.setData({angle: angle});}});},checkLogin:function(){var that = this;// 使用小程序登录流程时序://wx.login()是微信小程序提供的一个登录接口,用于获取用户登录凭证(code)。该接口需要传入一个success回调函数,在登录成功时会返回一个包含登录凭证的res对象。// 1 首先调用wx.login()方法,当登录成功时,会执行success回调函数。在回调函数中,通过判断res.code是否存在来判断登录是否成功。// 如果res.code不存在,说明登录失败,会弹出一个提示框显示"登录失败,请再次点击~~"。wx.login({success:function( res ){if( !res.code ){app.alert( { 'content':'登录失败,请再次点击~~' } );return;}// 2  使用微信小程序的wx.request()方法发送一个POST请求wx.request({//  url: 请求的地址是通过app.buildUrl(‘/member/check-reg’)方法构建的。url:app.buildUrl( '/member/check-reg' ),//  header: 请求头部信息是通过app.getRequestHeader()方法获取的。header:app.getRequestHeader(),//  method: 请求方法是POST。method:'POST',//  data: 请求的数据是一个对象,包含一个code属性,值为res.code。data:{ code:res.code },//  success: 请求成功后的回调函数。success:function( res ){if( res.data.code != 200 ){that.setData({regFlag:false});return;}app.setCache( "token",res.data.data.token );//that.goToIndex();}});}});},login:function( e ){var that = this;if( !e.detail.userInfo ){app.alert( { 'content':'登录失败,请再次点击~~' } );return;}var data = e.detail.userInfo;wx.login({success:function( res ){if( !res.code ){app.alert( { 'content':'登录失败,请再次点击~~' } );return;}data['code'] = res.code;wx.request({url:app.buildUrl( '/member/login' ),header:app.getRequestHeader(),method:'POST',data:data,success:function( res ){if( res.data.code != 200 ){app.alert( { 'content':res.data.msg } );return;}app.setCache( "token",res.data.data.token );that.goToIndex();}});}});}
});



RequestTask | 微信开放文档  发起 HTTPS 网络请求。

request   美  /rɪˈkwest/    v.<正式>请求,要求

小程序和flask项目是怎么实现数据交互的?

小程序Flask项目都可以通过数据交互来实现 端的通信 

下面我将分别介绍它们的实现方式:

对于小程序,数据交互通常使用微信提供的小程序API进行实现。具体步骤如下:1 wxml前端 通过后端js发送wx.request()方法发送HTTP请求到flask后端服务器
2 js后端处理请求:后端服务器使用Flask框架接收到请求后,可以通过Flask提供的路由功能进行处理。


www.py
from app import app
'''
蓝图功能,对所有的url进行蓝图功能配置
'''
from web.controllers.api import route_api
app.register_blueprint( route_api,url_prefix = "/api" )
web/controllers/api/__init__.py
# -*- coding: utf-8 -*-
from flask import Blueprint
route_api = Blueprint( 'api_page',__name__ )
from web.controllers.api.Member import *
from web.controllers.api.Food import *
from web.controllers.api.Order import *from web.controllers.api.Cart import *@route_api.route("/")
def index():return "Mina Api V1.0~~"
问题:此处的__init__.py文件的作用是什么?为什么非要捣鼓这个__init__.py文件?这个__init__.py文件是不是一无是处?可不可以置之不理?
web/controllers/api/Member.py
# -*- coding: utf-8 -*-
from web.controllers.api import route_api
from  flask import request,jsonify,g
from app import  app,db
import requests,json
from common.models.member.Member import Member
from common.models.member.OauthMemberBind import OauthMemberBind
from common.models.food.WxShareHistory import WxShareHistory
from common.libs.Helper import getCurrentDate
from common.libs.member.MemberService import MemberService@route_api.route("/member/login",methods = [ "GET","POST" ])
def login():resp = { 'code':200 ,'msg':'操作成功~','data':{} }req = request.valuescode = req['code'] if 'code' in req else ''if not code or len( code ) < 1:resp['code'] = -1resp['msg'] = "需要code"return jsonify(resp)openid = MemberService.getWeChatOpenId( code )if openid is None:resp['code'] = -1resp['msg'] = "调用微信出错"return jsonify(resp)nickname = req['nickName'] if 'nickName' in req else ''sex = req['gender'] if 'gender' in req else 0avatar = req['avatarUrl'] if 'avatarUrl' in req else '''''判断是否已经测试过,注册了直接返回一些信息'''bind_info = OauthMemberBind.query.filter_by( openid = openid,type = 1 ).first()if not bind_info:model_member = Member()model_member.nickname = nicknamemodel_member.sex = sexmodel_member.avatar = avatarmodel_member.salt = MemberService.geneSalt()model_member.updated_time = model_member.created_time = getCurrentDate()db.session.add(model_member)db.session.commit()model_bind = OauthMemberBind()model_bind.member_id = model_member.idmodel_bind.type = 1model_bind.openid = openidmodel_bind.extra = ''model_bind.updated_time = model_bind.created_time = getCurrentDate()db.session.add(model_bind)db.session.commit()bind_info = model_bindmember_info = Member.query.filter_by(id = bind_info.member_id).first()token = "%s#%s" % (MemberService.geneAuthCode(member_info), member_info.id)resp['data'] = {'token': token}return jsonify( resp )@route_api.route("/member/check-reg",methods = [ "GET","POST" ])
def checkReg():resp = {'code': 200, 'msg': '操作成功~', 'data': {}}req = request.valuescode = req['code'] if 'code' in req else ''if not code or len(code) < 1:resp['code'] = -1resp['msg'] = "需要code"return jsonify(resp)openid = MemberService.getWeChatOpenId(code)if openid is None:resp['code'] = -1resp['msg'] = "调用微信出错"return jsonify(resp)bind_info = OauthMemberBind.query.filter_by(openid=openid, type=1).first()if not bind_info:resp['code'] = -1resp['msg'] = "未绑定"return jsonify(resp)member_info = Member.query.filter_by( id = bind_info.member_id).first()if not member_info:resp['code'] = -1resp['msg'] = "未查询到绑定信息"return jsonify(resp)token = "%s#%s"%( MemberService.geneAuthCode( member_info ),member_info.id )resp['data'] = { 'token':token }return jsonify(resp)@route_api.route("/member/share",methods = [ "POST" ])
def memberShare():resp = {'code': 200, 'msg': '操作成功~', 'data': {}}req = request.valuesurl = req['url'] if 'url' in req else ''member_info = g.member_infomodel_share = WxShareHistory()     #初始化数据模型if member_info:model_share.member_id = member_info.idmodel_share.share_url = urlmodel_share.created_time = getCurrentDate()db.session.add(model_share)db.session.commit()return jsonify(resp)@route_api.route("/member/info")
def memberInfo():resp = {'code': 200, 'msg': '操作成功~', 'data': {}}member_info = g.member_inforesp['data']['info'] = {"nickname":member_info.nickname,"avatar_url":member_info.avatar}return jsonify(resp)
commonlibs/member/MemberServices.py
# -*- coding: utf-8 -*-
import hashlib,requests,random,string,json
from app import  app
class MemberService():@staticmethoddef geneAuthCode( member_info = None ):m = hashlib.md5()str = "%s-%s-%s" % ( member_info.id, member_info.salt,member_info.status)m.update(str.encode("utf-8"))return m.hexdigest()@staticmethoddef geneSalt( length = 16 ):keylist = [ random.choice( ( string.ascii_letters + string.digits ) ) for i in range( length ) ]return ( "".join( keylist ) )@staticmethoddef getWeChatOpenId( code ):url = "https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code" \.format(app.config['MINA_APP']['appid'], app.config['MINA_APP']['appkey'], code)r = requests.get(url)res = json.loads(r.text)openid = Noneif 'openid' in res:openid = res['openid']return openid
getweChatOpenId (code)

@staticmethod是Python中的一个装饰器,用于定义静态方法。静态方法是属于类的方法,不需要实例化对象就可以调用。在静态方法中,无法访问类的属性和实例属性,只能访问类的静态属性。

在上面的代码中,@staticmethod装饰器用于定义getWeChatOpenId方法为静态方法。这个方法用于获取微信的OpenID,通过传入一个code参数,发送请求到微信API获取OpenID,并返回OpenID。

数据预拉取 | 微信开放文档 按官网文档明述,code也是需要自己去拉取的。

小程序登录 | 微信开放文档

code2Session

登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。更多使用方法详见小程序登录。

  1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
  2. 临时登录凭证 code 只能使用一次
code 返回数据示例{
"openid":"xxxxxx",
"session_key":"xxxxx",
"unionid":"xxxxx",
"errcode":0,
"errmsg":"xxxxx"
}

调用方式

HTTPS 调用

3 数据处理与返回后端服务器根据请求的内容进行相应的数据处理,

可以从SQL数据库中获取数据,或者进行其他业务逻辑处理。处理完成后,将结果封装成JSON格式 返回给小程序前端
前端接收数据小程序前端wxml 通过回调函数success 接收到后端js 返回的数据,并进行相应的展示或处理。

问题:小程序的回调函数是什么?

RequestTask | 微信开放文档
赘述嘟喃绕口令:对于Flask项目,数据交互通常使用HTTP协议进行实现。

具体步骤如下:

1 前端发送请求:前端通过浏览器或其他客户端发送HTTP请求到Flask后端服务器。
2 后端处理请求:Flask后端服务器使用路由功能接收到请求后,根据请求的URL和HTTP方法进行相应的处理。
3 数据处理与返回:后端服务器根据请求的内容进行相应的数据处理,可以从数据库中获取数据,或者进行其他业务逻辑处理。处理完成后,将结果封装成JSON格式返回给前端。
前端接收数据:前端通过回调函数接收到后端返回的数据,并进行相应的展示或处理。

到这,Flask和微信小程序的数据交互用以微信登录就完成啦!  之后就是更多功能不同数据的来回通信啦!

Thanks for the time

Best Wishs

这篇关于flask与小程序登录数据通信案例 第一步 小程序登录的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/829500

相关文章

Ubuntu 24.04启用root图形登录的操作流程

《Ubuntu24.04启用root图形登录的操作流程》Ubuntu默认禁用root账户的图形与SSH登录,这是为了安全,但在某些场景你可能需要直接用root登录GNOME桌面,本文以Ubuntu2... 目录一、前言二、准备工作三、设置 root 密码四、启用图形界面 root 登录1. 修改 GDM 配

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一:源码安装:1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2