Flask 与微信小程序对接

原创

已于 2024-03-11 13:30:41 修改 · 5.4k 阅读

87 ·

CC 4.0 BY-SA版权

文章标签：

#flask #python #后端

于 2023-12-27 12:32:08 首次发布

本文围绕Flask与微信小程序的对接展开，介绍了在web/controllers/api中增建py文件供小程序使用。详细探讨了小程序wxml和js文件中的诸多问题，如wx:if、open-type等属性的作用，还涉及小程序登录逻辑、路由部署、数据存储等内容，以及数据库相关知识。

Flask 与微信小程序的对接

在 web/controllers/api中增建py文件，主要是给微信小程序使用的。

web/controllers/init.py

# -*- coding: utf-8 -*-
from flask import Blueprint
route_api = Blueprint( 'api_page',__name__ )


@route_api.route("/")
def index():
    return "Mina Api V1.0~~"

www.py

from web.controllers.api import route_api

如图所示api已经做好了

微信小程序mina

小程序简介 | 微信开放文档

mina/pages/index

mina/pages/index /index.wxml

wxml中屏蔽注释用 <!-- --!>

<!--start.wxml-->
<view class="container">
  <view class="remind-box" wx:if="{
  
  {remind}}">
    <image class="remind-img" src="/images/more/loading.gif"></image>
  </view>
  <block wx:else>
    <image class="title" src="/images/more/title8.png"></image>
    <view class="content">
      <view class="hd" style="transform:rotateZ({
  
  {angle}}deg);">
        <image class="logo" src="/images/more/logo.png"></image>
        <image class="wave" src="/images/more/wave.png" mode="aspectFill"></image>
        <image class="wave wave-bg" src="/images/more/wave.png" mode="aspectFill"></image>
      </view>
      <view class="bd">
         <image class="smalltitle" src="/images/more/confirm-word1.png"></image>
        <view class="confirm-btn" bindtap='goToIndex'>
          <text >走吧，订餐去</text>
        </view>
        <text class="copyright">@编程浪子 54php.cn</text>
      </view>
    </view>
  </block>
</view>

第一步：设置小程序用户信息

wx.getUserInfo(Object object) | 微信开放文档用户信息

avatar

n.化身（印度教中化作人形或兽形的神）；（人或思想的）化身，体现；（在电脑游戏或网络中代表使用者的）图标，头像；<正式>代表人物

这段代码中，使用了条件语句wx:if="{ {canIUse}}"来判断是否支持该API。

如果支持则显示一个按钮用于授权登录，点击按钮会触发bindgetuserinfo事件，可以在事件处理函数bindGetUserInfo中获取用户信息。

如果不支持该API，则显示一条提示信息，请用户升级微信版本。

我们这里使用class="confirm-btn"，并去掉wx:if"{ {canIUse}}"

<!--start.wxml-->
<view class="container">
  <view class="remind-box" wx:if="{
  
  {remind}}">
    <image class="remind-img" src="/images/more/loading.gif"></image>
  </view>


  <block wx:else>
    <image class="title" src="/images/more/title8.png"></image>
    <view class="content">
      <view class="hd" style="transform:rotateZ({
  
  {angle}}deg);">
        <image class="logo" src="/images/more/logo.png"></image>
        <image class="wave" src="/images/more/wave.png" mode="aspectFill"></image>
        <image class="wave wave-bg" src="/images/more/wave.png" mode="aspectFill"></image>
      </view>
      <view class="bd">
         <image class="smalltitle" src="/images/more/confirm-word1.png"></image>
<!--        <view class="confirm-btn" bindtap='goToIndex'>-->
<!--          <text >走吧，订餐去</text>-->
<!--        </view>-->
        <button class="confirm-btn" open-type="getUserInfo" bindgetuserinfo="login">授权登录</button>
        <text class="copyright">@编程浪子 54php.cn</text>
      </view>
    </view>
  </block>

</view>

问题1：为什么wx:if 可以去掉？ wx:if的作用是什么呢？

没有使用<wx:if="{ {canIUse}}">的原因是因为在data中没有定义canIUse这个属性。在data中定义了remind属性，用于控制是否显示加载中的提示框。因此，在wxml中使用了wx:if="{ {remind}}"来判断是否显示加载中的提示框。

代码中，确实没有使用<wx:if="{ {canIUse}}">。

wx:if是一个条件渲染的指令，用于根据条件来决定是否渲染某个组件或元素。

canIUse是一个变量，用于存储一个布尔值，根据这个布尔值来决定是否渲染<wx:if>所在的组件或元素。

wx:if的作用是根据条件来动态渲染页面的不同部分。

当条件为真时，渲染该组件或元素；

当条件为假时，不渲染该组件或元素。

这样可以根据不同的条件来显示不同的内容，提高页面的灵活性和交互性。

在给出的代码中，没有使用<wx:if="{ {canIUse}}">，可能是因为canIUse变量的值在该代码段中没有被定义或赋值。所以，该代码段中没有使用<wx:if="{ {canIUse}}">。

其实上面代码已经使用wx:if="{ {remind}}"做了相关判断。

按钮更改后展示图

问题2： open-type 有什么作用？

微信小程序中的open-type是一个属性，用于定义按钮的点击行为。根据提供的引用内容，有两种常见的open-type值可以使用。

contact：该值用于直接打开客服对话功能。要使用此功能，需要在微信小程序的后台进行配置，并且只能通过真机调试来打开。具体的配置和使用方法可以参考微信小程序开发文档。
launchApp：该值用于在小程序中直接打开其他应用程序。通过设置launchApp的open-type，可以实现在小程序中点击按钮后直接打开指定的应用程序。更多详细信息可以参考微信小程序开发文档中的相关章节。

请注意，open-type属性的具体使用方式和效果可能会因微信小程序的版本和配置而有所不同。建议在开发过程中参考官方文档并进行测试

这里使用了open-type="getUserInfo" 来定义这样一个属性，来获取用户信息

问题3： bindgetuserinfo="" 也是一个属性吗?这个属性起到什么作用？

在微信小程序中，bindgetuserinfo是一个用于获取用户信息的事件绑定属性。

当用户点击授权按钮并允许小程序获取用户信息时，该事件会被触发，并将用户信息作为参数传递给绑定的事件处理函数。

下面是一个示例代码，演示了如何在微信小程序中使用bindgetuserinfo属性：

<!-- index.wxml -->
<view class="container">
  <button bindgetuserinfo="getUserInfo">获取用户信息</button>
</view>

// index.js
Page({
  getUserInfo: function(e) {
    console.log(e.detail.userInfo);
    // 在这里可以对用户信息进行处理
  }
})

在上述示例中，当用户点击"获取用户信息"按钮时，会触发getUserInfo函数，并将用户信息传递给该函数的参数e。你可以在该函数中对用户信息进行处理，比如打印到控制台或者发送到服务器。

这里使用bindgetuserinfo="login"，当用户点击这个授权登录按钮时，绑定login()方法

问题4： open-data 是什么？

open-data | 微信开放文档用于展示微信开放的数据。

问题5： <block wx:else> </block> 中block是什么？

在给出的代码中，<block>是一个条件渲染的标签。它的作用是根据条件来决定是否渲染其中的内容。在这段代码中，<block>标签的wx:else属性表示如果remind为假，则渲染<block>标签内的内容。如果remind为真，则不渲染<block>标签内的内容。

条件渲染 | 微信开放文档

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

问题6： <view></view>是什么？

view | 微信开放文档视图容器

在给出的代码中，<view>是小程序中的一个组件，用于显示一个视图容器。它类似于HTML中的<div>标签，用于包裹其他元素或者作为一个独立的容器。在这段代码中，<view>标签被用来创建一个容器，其中包含了其他的视图元素，例如<image>和<text>。

<view>标签有一些常用的属性，例如class用于指定样式类名，style用于指定内联样式，wx:if用于条件渲染，wx:else用于条件渲染的反向情况。

在这段代码中，<view>标签被用来创建一个容器，其中包含了一个条件渲染的逻辑。当remind为真时，显示一个带有loading图片的提醒框；否则显示一个包含图片、按钮和文本的内容框。

mina/pages/index /index.js

登录思路逻辑：

onLoad完毕运行this.checkLogin(), 首先通过checkLogin(){}调取wx.login方法获取code，然后将code传到后方去，后方通过code获取openid，如果通过openid可以查到用户信息，则该用户已经登陆了，通过regFlag来切换需要显示的登录按钮

//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({
      tit