微信小程序（第一集）

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; // 获取点击图标的 urlwx.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 后端 URLmethod: '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, jsonifyapp = 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.connectorapp = 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=哪个种类})。