Flask 与微信小程序对接

发布时间：2023年12月28日

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) | 微信开放文档? ? 用户信息

这段代码中，使用了条件语句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()方法

mina/pages/index? ? /index.js

//login.js
//获取应用实例
var app = getApp();
Page({
  data: {
    remind: '加载中',
    angle: 0,
    userInfo: {}
  },
  goToIndex:function(){
    wx.switchTab({
      url: '/pages/food/index',
    });
  },
  onLoad:function(){
    wx.setNavigationBarTitle({
      title: app.globalData.shopName
    })
  },
  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
        });
      }
    });
  },
  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:qpp.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();
            
          }
          
        });
        
        
      }
      
    });
    
  }
  
  
});
});

问题1： getApp() 是什么意思？

var app = getApp();：定义一个变量app，并将其赋值为getApp()，即获取小程序的实例。

AppObject getApp(Object object) | 微信开放文档

var app = getApp(); 是小程序中获取全局app对象的一种常见方式。通过这行代码，我们可以在页面中使用app对象中定义的全局数据和方法。

在小程序中，每个页面都有自己的js文件，而app.js是小程序的入口文件，它是全局的，可以在整个小程序中共享数据和方法。通过在页面中使用var app = getApp();我们可以获取到app.js中定义的全局app对象。

这个全局app对象中通常包含了一些全局的数据和方法，比如全局的用户信息、全局的网络请求方法等。通过获取app对象，我们可以在页面中直接使用这些全局数据和方法，而不需要重复定义或传递数据。

下面是一个示例，展示了如何使用var app = getApp();获取app对象并使用其中的全局数据和方法：

// app.js
App({
  globalData: {
    userInfo: null,
    apiUrl: 'https://api.example.com'
  },
  getUserInfo: function() {
    // 获取用户信息的方法
  }
})

// page.js
var app = getApp();
console.log(app.globalData.userInfo); // 输出全局的用户信息
app.getUserInfo(); // 调用全局的获取用户信息的方法

通过上述代码，我们可以看到，在page.js中使用var app = getApp();获取到了app对象，并可以通过app.globalData访问全局的数据，通过app.getUserInfo()调用全局的方法。

该段代码是一个小程序的登录页面的代码。下面是各部分的作用：

//获取应用实例：注释，说明下面的代码是获取小程序的实例。
Page({ ... })：定义一个页面对象，包含了页面的? 数据、事件处理函数和生命周期函数等。
data: { ... }：定义页面的数据，包括remind、angle和userInfo等。
goToIndex: function() { ... }：定义了一个名为goToIndex的事件处理函数，用于跳转到首页。
onLoad: function() { ... }：定义了一个名为onLoad的生命周期函数，在页面加载时执行，设置导航栏标题为全局变量app.globalData.shopName的值。

问题2: wx.switchTab({})函数起到了什么作用？

wx.switchTab(Object object) | 微信开放文档? ?跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

在小程序中，可以使用wx.switchTab()函数来实现页面跳转到指定的tab页。

这段代码将会跳转到名为index的tab页，该tab页的路径为/pages/food/index。

问题3： wx.setNavigationBarTitle({title: app.globalData.shopName})是什么函数？

这段代码是用于设置小程序页面的导航栏标题。?

wx.setNavigationBarTitle(Object object) | 微信开放文档??动态设置当前页面的标题

具体来说，它使用了wx.setNavigationBarTitle()函数，并传入一个对象作为参数。该对象包含一个title属性，其值为app.globalData.shopName。

app.globalData.shopName是一个全局变量，用于存储商店的名称。通过将该变量的值赋给title属性，wx.setNavigationBarTitle()函数就可以将商店名称作为页面的导航栏标题进行显示。

需要注意的是，该代码需要在小程序的页面中使用，并且前提是在全局中定义了app对象，并且该对象中包含了globalData属性和shopName属性。

这里是调动了mina/app.js文件里的app里的globalData里的shopName? 即“python3 + Flask 订餐全站系统”? ?作为动态设置当前页面的标题的值。

问题3.1： shopName 是什么？

小程序商品推广 | 微信开放文档??

获取小程序商品推广素材

接口说明

通过该接口获取商品的推广素材，包括店铺appID、商品详情页Path、推广文案及推广短链、商品图片等

这里用的是已经封装好的js方法

该段代码是一个登录函数，用于处理用户登录的逻辑。具体介绍如下：

首先，函数接收一个事件对象e作为参数。
在函数内部，通过判断事件对象e中的用户信息是否存在来确定用户是否登录成功。如果用户信息不存在，则会弹出一个提示框提示登录失败，并返回。
如果用户信息存在，将用户信息赋值给变量data。
接着，调用wx.login()函数进行微信登录，获取登录凭证code。
如果登录凭证code不存在，则会弹出一个提示框提示登录失败，并返回。
如果登录凭证code存在，将code添加到data中。
然后，通过wx.request()函数向服务器发送登录请求，请求的URL为’/member/login’，请求头部包含app.getRequestHeader()返回的请求头信息，请求方法为POST，请求数据为data。
如果服务器返回的状态码不等于200，则会弹出一个提示框显示返回的错误信息，并返回。
如果服务器返回的状态码等于200，则将返回的token存储到缓存中，键名为"token"，键值为res.data.data.token。
最后，调用goToIndex()函数进行页面跳转。

问题4：概述一下setTimeout({})起到的功能？

number setTimeout(function callback, number delay, any rest) | 微信开放文档?设定一个定时器。在定时到期以后执行注册的回调函数

这段代码的作用是在1000毫秒（即1秒）后执行一个函数，将remind属性设置为空字符串。这通常用于在一定时间后执行某个操作，例如延迟显示或隐藏某个元素。

问题5： wx.onAccelerometerChange()代码有什么作用？?

根据提供的引用内容，这段代码是用于监听微信小程序的加速度计变化，并根据变化的角度来更新页面的数据。具体来说，代码中使用了wx.onAccelerometerChange函数来监听加速度计的变化，当加速度计的x轴变化时，会计算出对应的角度，并将角度更新到页面的angle数据中。

这段代码中，res.x表示加速度计在x轴上的变化值，乘以30后取负数，得到的就是角度值。然后通过判断角度是否超过了限制范围（-14到14之间），如果超过了，则将角度限制在这个范围内。最后，通过setData函数将更新后的角度值存储到页面的angle数据中，从而实现页面的更新。

toFixed(1)是一个用于保留小数位数的方法。它可以将一个数字四舍五入到指定的小数位数，并返回一个字符串表示该数字。

问题6：e.detail.userInfo的值是什么？

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

e.detail.userInfo是一个对象，包含用户的详细信息，例如用户的昵称、头像、性别等。在这个例子中，e.detail.userInfo是通过微信小程序的getUserInfo接口获取的用户信息。

mina/app.js

//app.js
App({
    onLaunch: function () {
    },
    globalData: {
        userInfo: null,
        version: "1.0",
        shopName: "Python3 + Flask 订餐全栈系统",
        domain:"http://192.168.0.119:8999/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'
        }
    }
});

App(Object object) | 微信开放文档? ??

注册小程序。接受一个?Object?参数，其指定小程序的生命周期回调等。

App() 必须在?app.js?中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

onShow: function() { ... }：定义了一个名为onShow的生命周期函数，在页面显示时执行。
onReady: function() { ... }：定义了一个名为onReady的生命周期函数，在页面初次渲染完成时执行。
setTimeout(function() { ... }, 1000);：使用setTimeout函数设置一个定时器，延迟1秒后执行回调函数，将remind的值设为空字符串，即隐藏加载中的提示。
wx.onAccelerometerChange(function(res) { ... })：监听加速度计数据变化的事件，当加速度计数据变化时执行回调函数。

问题@1： var title = params.hasOwnProperty('title')?params['title']:'提示信息'; 该段代码是什么意思？各部分元素的作用是什么？ @代表对app.js文件内的提问

这段代码是一个条件表达式，用于? 判断对象params中是否存在属性’title’。

?如果存在，则将该属性的值赋给变量title；

?如果不存在，则将字符串’提示信息’赋给变量title。

var title = params.hasOwnProperty('title') ? params['title'] : '提示信息';

params.hasOwnProperty('title')：这是一个判断对象params是否有属性’title’的方法。如果params对象中存在名为’title’的属性，则返回true；否则返回false。
?：这是一个条件运算符，也称为三元运算符。它的作用是根据条件的真假来选择不同的值。
params['title']：如果params对象中存在名为’title’的属性，则返回该属性的值。
:：这是条件运算符的分隔符，用于分隔条件为真和条件为假时的两个值。
'提示信息'：如果params对象中不存在名为’title’的属性，则返回字符串’提示信息’。

因此，这段代码的作用是判断对象params中是否存在属性’title’，如果存在则将其值赋给变量title，如果不存在则将字符串’提示信息’赋给变量title。

问题@2： wx.showModal（{}）是什么方法？

   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();
                    }
                }
            }
        })
    },

该段代码是一个使用? 小程序框架? 中的? wx.showModal方法? 创建模态弹窗?的示例。

wx.showModal(Object object) | 微信开放文档? ?显示模态对话框

模态弹窗?是一种可以??阻止??用户继续操作的弹窗，需要用户进行? 确认或取消? ?操作后才能关闭。

代码中的wx.showModal方法接受一个? 对象? 作为参数，该对象包含以下属性：

title：弹窗的标题。
content：弹窗的内容。
success：弹窗操作成功后的回调函数。

在回调函数中，可以根据用户的操作结果进行相应的处理。

如果用户点击了确定按钮，会执行success函数中的逻辑，

如果用户点击了? 取消按钮，会执行else语句中的逻辑。

在该示例中，代码通过判断res.confirm的值来确定用户点击的是确定按钮还是取消按钮。

如果res.confirm为true，表示用户点击了确定按钮，会执行cb_confirm函数；

如果res.confirm为false，表示用户点击了取消按钮，会执行cb_cancel函数。

该段代码的作用是创建一个模态弹窗，并根据用户的操作结果执行相应的回调函数。

问题@3: &&是什么？它的作用是什么？

在给定的代码中，&&是逻辑与运算符。它用于判断两个条件是否同时为真。如果两个条件都为真，则整个表达式的结果为真；否则，结果为假。

在给定的代码中，&&用于判断两个条件：

params.hasOwnProperty('cb_confirm')：判断params对象是否具有名为cb_confirm的属性。
typeof( params.cb_confirm ) == "function"：判断params.cb_confirm的类型是否为函数。

只有当这两个条件都为真时，才会执行params.cb_confirm()函数。

文章来源:https://blog.csdn.net/xinzhengLUCK/article/details/135241649
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！