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

2024-03-20 12:44
文章标签 程序 登录 案例 flask 第一步 数据通信

本文主要是介绍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。

相关文章

Security OAuth2 单点登录流程

Security OAuth2 单点登录流程

单点登录（英语：Single sign-on，缩写为 SSO），又译为单一签入，一种对于许多相互关连，但是又是各自独立的软件系统，提供访问控制的属性。当拥有这项属性时，当用户登录时，就可以获取所有系统的访问权限，不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议（LDAP）来实现，在服务器上会将用户信息存储到LDAP数据库中。相同的，单一注销（single sign-off）就是指
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题： 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定，导致点击后无法触发登录操作。 页面可能存在
阅读更多...
【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善，其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性， 将与教育相关的数据要素在区块链上进行存证确权，在确保数据可信的前提下，促进教育的公平、透明、开放，为教育教学质量提升赋能，实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护，支撑教育资源共享、教学质量评估、
阅读更多...
客户案例：安全海外中继助力知名家电企业化解海外通邮困境

客户案例：安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司（以下简称“格兰仕”），成立于1978年，是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地，格兰仕拥有多项国际领先的家电制造技术，连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展，更重视业务流程的高效与顺畅，以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施，其海外业务快速增长，电子邮件成为了关键的沟通工具。
阅读更多...
【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展，越来越多的企业开始将其应用于实际业务中。然而，区块链技术的专业性使得其集成开发成为一项挑战。针对此，广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术，提供一套全面的区块链开发工具和开发环境，支持开发者快速开发和部署区块链应用。此外，该平台还可以提供一套全面的区块链开发教程和文档，帮助开发者快速上手区块链开发。
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2