完整的微信小程序代码示例，包含前端和后端的实现，可以用于查询历史数据。该示例使用了Node.js作为后端，并提供了一个简单的查询接口。你可以根据需要进行进一步的扩展。
1. 前端：微信小程序代码
1.1 小程序页面结构（WXML）
pages/index/index.wxml
<view class="container"> <view class="search-bar"> <input type="text" placeholder="请输入查询条件" bindinput="onInputChange"/> <button bindtap="onSearch">查询</button> </view> <view class="results"> <block wx:for="{{dataList}}" wx:key="id"> <view class="data-item"> <text>{{item.title}}</text> <text>{{item.date}}</text> </view> </block> </view> </view> 1.2 小程序页面样式（WXSS）
pages/index/index.wxss
.container { padding: 20px; } .search-bar { display: flex; margin-bottom: 20px; } input { flex: 1; margin-right: 10px; padding: 10px; border: 1px solid #ddd; } button { padding: 10px 20px; background-color: #1aad19; color: white; border: none; border-radius: 5px; } .results { margin-top: 20px; } .data-item { padding: 10px; border-bottom: 1px solid #ddd; } 1.3 小程序页面逻辑（JavaScript）
pages/index/index.js
Page({ data: { query: '', dataList: [] }, onInputChange: function(e) { this.setData({ query: e.detail.value }); }, onSearch: function() { const that = this; wx.request({ url: 'http://localhost:3000/api/search', // 后端接口地址 method: 'POST', data: { query: this.data.query }, success(res) { that.setData({ dataList: res.data }); }, fail() { wx.showToast({ title: '查询失败', icon: 'none' }); } }); } }); 1.4 小程序页面配置（JSON）
pages/index/index.json
{ "navigationBarTitleText": "查询历史数据" } 1.5 小程序全局配置（app.json）
app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } } 2. 后端：Node.js 服务器代码
2.1 后端代码
server.js
const express = require('express'); const app = express(); app.use(express.json()); const mockData = [ { id: 1, title: '历史记录1', date: '2024-08-20' }, { id: 2, title: '历史记录2', date: '2024-08-19' }, { id: 3, title: '历史记录3', date: '2024-08-18' }, { id: 4, title: '历史记录4', date: '2024-08-17' } ]; app.post('/api/search', (req, res) => { const query = req.body.query.toLowerCase(); const result = mockData.filter(item => item.title.toLowerCase().includes(query)); res.json(result); }); app.listen(3000, () => { console.log('Server running on http://localhost:3000'); }); 2.2 安装依赖并运行服务器
确保你安装了Node.js环境，可以通过以下命令安装Express框架：
npm install express将上述代码保存为
server.js文件。在命令行中运行以下命令启动服务器：
node server.js服务器将运行在
http://localhost:3000，可以处理来自小程序的查询请求。
3. 调试与运行
配置小程序开发者工具：在微信开发者工具中，将请求的域名设置为
http://localhost:3000，以便调试时能够访问本地后端服务。测试查询功能：在微信开发者工具中运行小程序，输入查询条件，例如“历史记录1”，并点击“查询”按钮，应该能看到查询结果显示在页面上。
部署后端：如果需要将项目部署到生产环境，可以将后端代码部署到云服务器，确保能够对外提供服务。
4. 扩展与优化
- 数据存储：当前示例中使用了模拟数据，你可以将数据存储到数据库中（如MySQL、MongoDB），并根据实际需求编写更多的后端逻辑。
- 分页查询：对于大量数据，可以实现分页功能，确保用户能够方便地浏览数据。
- 安全性：在生产环境中，需考虑数据的安全性和用户权限的管理。