uni.request提交留言需用POST方法、完整URL、data传参、显式设置JSON头，成功后showToast并刷新列表；拉取列表应在onLoad中调用，渲染用v-for，注意响应式赋值与域名/HTTPS配置。
uni-app里怎么用uni.request提交留言
直接调用uni.request发POST请求，不是用fetch或axios（除非你手动引入并适配），因为uni-app默认环境不支持原生fetch，而axios在App端可能触发跨域或SSL证书问题。
关键点：后端接口必须支持跨域（H5）、允许自定义Header（如token），且返回格式统一为JSON。
- 确保
url是完整路径（含协议），比如https://api.example.com/leave-message，不能写相对路径/api/...（H5会404，小程序需配置request合法域名） - 提交数据用
data字段，不是body；若后端要求application/json，需显式设header: {'Content-Type': 'application/json'}，否则默认application/x-www-form-urlencoded - 别忘了
success里调用uni.showToast反馈，失败时检查err.statusCode——400大概率是参数错，500是后端崩了，-1是网络不通或域名未配置
uni.request({
url: 'https://api.example.com/leave-message',
method: 'POST',
header: { 'Content-Type': 'application/json' },
data: { content: this.message, nickname: this.nickname },
success: (res) => {
if (res.data.code === 0) {
uni.showToast({ title: '已提交', icon: 'success' });
this.message = '';
this.loadMessages(); // 提交后刷新列表
}
},
fail: (err) => {
uni.showToast({ title: '提交失败', icon: 'none' });
}
});
留言列表怎么用uni.request拉取并渲染
列表渲染靠v-for，但数据得先从接口拿到。注意uni-app的data响应式限制：直接赋值this.list = res.data.data没问题，但不要用push或splice改原始数组后不通知更新（极少数情况会失效）。
常见坑：H5页面首次加载可能触发两次请求（Vue Devtools热重载干扰），小程序真机调试时onLoad里调用uni.request没问题，但别在created里——生命周期顺序不同，部分平台created时uni对象还没就绪。
立即学习“前端免费学习笔记（深入）”；
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 推荐在
onLoad或onShow里拉列表，后者适合需要实时刷新的场景（比如用户发完留言再切回来） - 后端返回结构建议固定为
{ code: 0, data: [...] }，前端只处理data字段，避免每次都要写res.data.list || res.data.items - 加个
loading状态变量，uni.showLoading和uni.hideLoading配对使用，不然用户点提交后没反馈容易连点
表单输入与清空怎么绑定v-model才不出错
uni-app支持v-model，但仅限于<input>、<textarea></textarea>等原生组件（不能用在自定义组件上）。如果用了uni-app官方uni-easyinput这类封装组件，得用:value + @input手动同步，否则双向绑定失效。
-
<textarea v-model="message" placeholder="说点什么..."></textarea>可以，但记得在data里初始化message: ''，否则iOS下首次聚焦可能光标错位 - 清空操作别写
this.message = null，要写this.message = ''，否则v-model绑定断裂（Vue 2响应式系统对null追踪不稳） - 防重复提交：提交按钮加
:disabled="submitting"，并在uni.request前后开关这个flag
为什么真机调试看不到留言，但本地console有数据
八成是域名或HTTPS问题。小程序要求所有request域名必须在「小程序后台 → 开发管理 → 开发者工具 → request合法域名」里备案；H5则看浏览器是否拦截了非HTTPS接口（Chrome 90+强制要求HTTPS才能用某些API）。
另一个高频原因是后端返回头缺失Access-Control-Allow-Origin: *（H5跨域），或者没返回Content-Type: application/json导致uni-app解析失败（res.data变成字符串而非对象）。
- 用
uni.getNetworkType确认当前网络类型，弱网下请求超时默认是60s，可设timeout: 10000提前报错 - 真机调试时打开「HBuilderX → 运行 → 运行到手机或模拟器 → 控制台」，看实际发出的请求URL和响应体，比猜快得多
- 如果后端是本地
http://localhost:3000，安卓真机根本访问不到——得换成本机局域网IP（如http://192.168.1.100:3000），并关掉防火墙
最麻烦的情况是后端用了JWT鉴权但前端漏传token，错误信息可能是401 Unauthorized或err: {"errno": -1, "errMsg": "request:fail ..."}——这时候得抓包确认Header有没有Authorization字段。
