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与小程序登录数据通信案例 第一步 小程序登录的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---