微信小程序（第一集）
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)