微信小程序（第一集）

app.json

---

{
  // 定义小程序的所有页面路径，数组中的第一个页面是首页
  "pages": [
    "pages/index/index", // 首页
    "pages/logs/logs"    // 日志页面
  ],

  // 设置小程序的全局窗口外观（比如导航栏和背景颜色）
  "window": {
    "navigationBarBackgroundColor": "#ffffff", // 顶部导航栏的背景颜色（白色）
    "navigationBarTextStyle": "black",         // 顶部导航栏的文字颜色（黑色）
    "navigationBarTitleText": "微信小程序",    // 顶部导航栏的标题
    "backgroundColor": "#eeeeee",              // 小程序的整体背景颜色（浅灰色）
    "backgroundTextStyle": "light"             // 下拉刷新时，背景文字的颜色（浅色）
  },

  // 配置底部导航栏（tabBar）
  "tabBar": {
    "color": "#666666",              // 未选中时的图标和文字颜色（灰色）
    "selectedColor": "#ff0000",      // 选中时的图标和文字颜色（红色）
    "borderStyle": "black",          // 底部导航栏的边框颜色（黑色）
    "backgroundColor": "#ffffff",    // 底部导航栏的背景颜色（白色）

    // 定义底部导航栏的按钮（最多5个）
    "list": [
      {
        "pagePath": "pages/index/index",         // 这个按钮点击后跳转到首页
        "text": "首页",                          // 按钮的文字
        "iconPath": "assets/home.png",           // 默认图标（未选中状态）
        "selectedIconPath": "assets/home_selected.png" // 选中后的图标
      },
      {
        "pagePath": "pages/logs/logs",           // 这个按钮点击后跳转到日志页面
        "text": "日志",                          // 按钮的文字
        "iconPath": "assets/logs.png",           // 默认图标（未选中状态）
        "selectedIconPath": "assets/logs_selected.png" // 选中后的图标
      }
    ]
  },

  // 配置网络请求的超时时间（单位：毫秒）
  "networkTimeout": {
    "request": 10000,        // HTTP 请求的超时时间（10秒）
    "connectSocket": 10000,  // WebSocket 连接的超时时间（10秒）
    "uploadFile": 10000,     // 文件上传的超时时间（10秒）
    "downloadFile": 10000    // 文件下载的超时时间（10秒）
  },

  // 是否开启调试模式（true 开启，false 关闭）
  // 开启后，在开发者工具的 Console 可以看到更多日志信息，方便调试
  "debug": true
}

点击图标跳转界面

---

使用 tap 事件 + wx.navigateTo()

如果点击图片后，还需要执行一些逻辑再跳转，可以使用 bindtap 事件：

（1）在 wxml 里绑定 bindtap 事件

<image src="/assets/icon.png" style="width: 100px; height: 100px;" bindtap="goToLogsPage" />

（2）在 js 里实现 goToLogsPage() 方法

Page({
  goToLogsPage: function () {
    wx.navigateTo({
      url: '/pages/logs/logs' // 目标页面路径
    });
  }
});

---

1. 在 js 中定义 navItems 数组

Page({
  data: {
    navItems: [
      { icon: '/assets/icon1.png', url: '/pages/page1/page1' },
      { icon: '/assets/icon2.png', url: '/pages/page2/page2' },
      { icon: '/assets/icon3.png', url: '/pages/page3/page3' }
    ]
  },

  // 点击图标跳转到相应页面
  goToPage: function (event) {
    const url = event.currentTarget.dataset.url; // 获取点击图标的 url
    wx.navigateTo({
      url: url
    });
  }
});

2. 在 wxml 中使用 wx:for 循环渲染图标和链接

<view class="nav-container">
  <!-- wx:for 用来循环渲染 navItems 数组 -->
  <view class="nav-item" wx:for="{{navItems}}" wx:key="index" bindtap="goToPage" data-url="{{item.url}}">
    <image class="nav-icon" src="{{item.icon}}" mode="aspectFit" />
  </view>
</view>

小程序发送数据给flask后端

---

1. 小程序页面设计（WXML）

首先，在小程序的 WXML 文件中创建两个输入框和一个按钮。输入框用来接收用户输入的数据。

WXML 代码：

<view>
  <!-- 输入框1 -->
  <input type="text" placeholder="请输入名字" bindinput="onNameInput" />
  
  <!-- 输入框2 -->
  <input type="number" placeholder="请输入年龄" bindinput="onAgeInput" />
  
  <!-- 发送按钮 -->
  <button bindtap="sendData">发送数据</button>
</view>

2. 小程序的 JavaScript 逻辑（JS）

然后，在小程序的 JS 文件中，定义两个输入框的 data 和输入事件处理函数。发送按钮的点击事件会将这两个数据发送到 Flask 后端。

JS 代码：

Page({
  data: {
    name: '',
    age: ''
  },

  // 处理输入框1的输入
  onNameInput: function (e) {
    this.setData({
      name: e.detail.value
    });
  },

  // 处理输入框2的输入
  onAgeInput: function (e) {
    this.setData({
      age: e.detail.value
    });
  },

  // 发送数据到 Flask 后端
  sendData: function () {
    const data = {
      name: this.data.name,
      age: this.data.age
    };

    wx.request({
      url: 'http://127.0.0.1:5000/data',  // Flask 后端 URL
      method: 'POST',
      data: data,  // 发送的数据
      header: {
        'content-type': 'application/json'  // 设置发送类型为 JSON
      },
      success: function (res) {
        console.log('数据发送成功', res);
      },
      fail: function (err) {
        console.log('数据发送失败', err);
      }
    });
  }
});

3. Flask 后端接收数据

在 Flask 后端，我们需要定义一个接收 POST 请求的路由，用来接收小程序发送的数据。我们可以通过 request.get_json() 获取前端发送的 JSON 数据。

Flask 后端代码：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/data', methods=['POST'])
def receive_data():
    # 获取前端发送的 JSON 数据
    data = request.get_json()

    # 获取数据中的字段
    name = data.get('name')
    age = data.get('age')

    # 处理数据（例如存储、计算等）
    print(f"Received data: Name - {name}, Age - {age}")

    # 返回响应给小程序
    return jsonify({
        'status': 'success',
        'message': 'Data received successfully'
    })

if __name__ == '__main__':
    app.run(debug=True)

总结：

wxml先弄出输入框（和js的一个方法绑定的，动态）还有按钮（和js的一个方法绑定的）。

两个输入框输入后，会总结在data里面。

按钮的方法写了提交data数据和post的请求。

微信小程序从mysql得到数据然后显示在前端

---

WXML 文件：

<view>
  <!-- 获取数据的按钮 -->
  <button bindtap="fetchData">获取用户数据</button>

  <!-- 显示用户数据 -->
  <view>
    <!-- wx:for 是一个循环指令，循环遍历 users 数组 -->
    <block wx:for="{{users}}" wx:key="index">
      <view>
        <!-- 显示每个用户的 name 和 age -->
        <text>{{item.name}} - {{item.age}}岁</text>
      </view>
    </block>
  </view>
</view>

index.js：

Page({
  data: {
    users: []
  },

  // 发送GET请求获取MySQL数据
  fetchData: function () {
    wx.request({
      url: 'http://127.0.0.1:5000/get_users',  // Flask 后端接口
      method: 'GET',
      success: (res) => {
        if (res.statusCode === 200) {
          this.setData({
            users: res.data  // 将获取的用户数据存入 data
          });
        } else {
          wx.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        console.log(err);
        wx.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      }
    });
  }
});

Flask 后端代码（获取 MySQL 数据）：

from flask import Flask, jsonify
import mysql.connector

app = Flask(__name__)

# 连接数据库的配置
def get_db_connection():
    conn = mysql.connector.connect(
        host='localhost',  # 数据库地址
        user='your_username',  # 数据库用户名
        password='your_password',  # 数据库密码
        database='your_database'  # 数据库名称
    )
    return conn

# 定义一个GET请求接口来获取数据
@app.route('/get_users', methods=['GET'])
def get_users():
    conn = get_db_connection()
    cursor = conn.cursor(dictionary=True)
    
    # 执行SQL查询
    cursor.execute('SELECT id, name, age FROM users')
    
    # 获取查询结果
    users = cursor.fetchall()
    
    # 关闭数据库连接
    cursor.close()
    conn.close()

    # 返回JSON格式的查询结果
    return jsonify(users)

if __name__ == '__main__':
    app.run(debug=True)

当前切换按钮

(先设置默认的种类id=1，然后设置有四个种类{id=1,id=2,id=3,id=4}，每个种类都包含两东西{{id=1,id=2},id=哪个种类})------->for循环把这四个种类显示在前端（每个种类都绑定按钮方法（设置在js里面））---->这个js方法是让当前默认的种类id=1变为现在点击的种类id------>for循环显示在前端，再用id过滤一下{{id=1,id=2},id=哪个种类})。