微信小程序刷新页面让value值清空

### 实现微信小程序中自定义弹幕功能 在微信小程序中实现自定义弹幕效果能够显著增强用户的互动体验。为了达到这一目标，开发者可以通过组合`<canvas>`标签与JavaScript逻辑来创建动态显示的弹幕文字。 #### 创建页面结构 首先，在WXML文件里设置好用于展示视频以及承载弹幕的基础布局： ```xml <!-- index.wxml --> <view class="container"> <!-- 视频播放区域 --> <video id="myVideo" src="{{videoSrc}}" controls></video> <!-- 弹幕画布 --> <canvas type="2d" canvas-id="danmakuCanvas"></canvas> <!-- 输入框和发送按钮 --> <input bindinput="onInput" placeholder="输入弹幕..." /> <button bindtap="sendDanmaku">发送</button> </view> ``` #### 定义样式规则 接着为上述元素添加CSS样式以确保良好的视觉呈现效果： ```css /* index.wxss */ .container { position: relative; } #myVideo { width: 100%; height: auto; } #danmakuCanvas { position: absolute; top: 0; left: 0; pointer-events: none; /* 防止遮挡点击事件 */ } ``` #### 编写业务逻辑 最后，在JS文件内编写主要交互逻辑，包括初始化画布上下文、监听消息输入及绘制移动的文字对象等操作： ```javascript // index.js Page({ data: { videoSrc: 'https://example.com/video.mp4', // 替换成实际视频地址 danmakus: [], // 存储所有待渲染的弹幕数据 inputText: '' // 用户当前正在编辑的内容 }, onLoad() { this.ctx = wx.createCanvasContext('danmakuCanvas'); setInterval(() => {this.update();}, 30); // 每隔一定时间刷新一次画面 }, onInput(e){ const value = e.detail.value.trim(); if(value.length>0 && value!==this.data.inputText){ this.setData({inputText:value}); } }, sendDanmaku(){ let text=this.data.inputText; if(text==='')return; // 添加新的弹幕项至列表头部 this.danmakus.unshift({ content:text, x:wx.getSystemInfoSync().windowWidth, // 初始位置位于屏幕最右侧 y:(Math.random()*80)+20 // Y轴随机分布于顶部下方的一片区域内 }); this.setData({inputText:''}); // 清空输入框内容 }, update(){ this.ctx.clearRect(0, 0, ...); for(let i=0;i<this.danmakus.length;i++){ var item=this.danmakus[i]; // 更新坐标并向左平移一段距离 item.x-=2; if(item.x<-item.content.length*7){ // 当超出可视范围则删除该条目 this.danmakus.splice(i--,1); continue; } // 绘制单个字符 this.ctx.setFillStyle('#fff'); // 设置字体颜色 this.ctx.setFontSize(16); // 设定字号大小 this.ctx.fillText(item.content,item.x,item.y); } this.ctx.draw(true); } }) ``` 通过以上步骤即可完成一个简单的微信小程序内的自定义弹幕系统的搭建[^1]。

### 微信小程序实现评论区功能 #### 一、创建数据模型 为了支持评论区的功能，首先需要定义好存储评论的数据结构。通常情况下，每条评论应至少包含发布者的名称、头像链接、发布时间以及具体内容。 ```json { "comments": [ { "id": "001", "authorName": "张三", "avatarUrl": "/images/avatar.png", "content": "这是一条测试评论。", "time": "2023-10-09" }, ... ] } ``` 此部分的设计可以根据实际需求调整字段[^1]。 #### 二、页面布局设计 在WXML文件中构建评论列表的展示模板，利用`<view>`标签来包裹每一项评论，并通过循环渲染的方式动态加载多条评论： ```html <!-- comments.wxml --> <scroll-view scroll-y="true"> <block wx:for="{{comments}}" wx:key="id"> <view class='comment-item'> <!-- 用户头像 --> <image src='{{item.avatarUrl}}' /> <!-- 昵称与时间戳 --> <text>{{item.authorName}}</text> <text>{{item.time}}</text> <!-- 正文内容 --> <p>{{item.content}}</p> </view> </block> </scroll-view> ``` 上述代码片段展示了如何遍历并呈现服务器端返回的评论数组中的每一个对象。 #### 三、样式美化 为了让用户体验更佳，在WXSS文件里加入一些简单的CSS规则来进行视觉上的优化处理： ```css /* comments.wxss */ .comment-item { padding: 15px; border-bottom: 1px solid #ccc; } .comment-item image { width: 48rpx; height: 48rpx; margin-right: 10px; vertical-align: top; } .comment-item p, .comment-item text { font-size: 14px; line-height: 1.5em; } ``` 这些样式设置有助于提高界面友好度和可读性。 #### 四、交互逻辑编写 最后一步是在JS脚本内完成提交新评论的操作流程。这里假设已经有一个表单用于收集用户的输入信息；当点击“发表”按钮时触发事件处理器函数，该函数负责将新的评论追加到现有的评论集合当中，并更新视图层的内容显示出来。 ```javascript // comments.js Page({ data: { comments: [] // 初始化为空数组 }, onLoad() { this.loadComments(); }, loadComments() { const db = wx.cloud.database(); // 假设使用云开发数据库服务 db.collection('comments') .get() .then(res => { console.log('获取成功', res); this.setData({ comments: res.data }); }) .catch(err => {console.error('查询失败:', err)}); }, submitComment(e) { let commentText = e.detail.value.textarea; if (!commentText.trim()) return alert('请输入有效字符'); const newComment = { id: Date.now(), authorName: '匿名', avatarUrl: '/path/to/default-avatar.jpg', content: commentText, time: (new Date()).toLocaleString() }; this.addNewComment(newComment); // 清空输入框 this.selectComponent('#form').resetField('textarea'); }, addNewComment(comment){ this.setData((prevData)=>{ prevData.comments.unshift(comment); // 将最新的一条评论放在最前面 // 如果采用的是本地模拟，则直接修改data属性即可； // 若连接真实后台API，则需在此处发起POST请求保存至远程服务器。 return {...prevData}; }); // 同步新增记录到云端（仅限于启用了云开发的应用） /* wx.cloud.callFunction({ name: 'add_comment', data: comment }).then(console.log).catch(console.warn); */ } }); ``` 这段JavaScript实现了从接收用户输入直到最终刷新界面上所有可见评论的核心业务过程。