当前位置: 首页 > web >正文

uniapp+vue2+uView项目学习知识点记录

持续更新中...

1、发送给朋友,分享到朋友圈功能开启

     

利用onShareAppMessage和onShareTimeline生命周期函数,在script中与data同级去写

// 发送给朋友  
onShareAppMessage() {return {title: '清清前端', // 分享标题path: `/pages/index/index`, // 分享路径,可携带参数imageUrl: ''// 分享图片,可选};},
  // 分享到朋友圈onShareTimeline() {return {title: '同心家伴', // 分享标题query: `/pages/userInfo/mineDetil` // 分享参数,注意这里使用query而不是path};},

2、关于小程序中表单校验时,出生年月校验点了确定之后校验文字还是存在的问题

      

表单中的出生年月input

<u-form-item label="出生年月" borderBottom @click="showDate" prop="birthDate"><u-input disabled v-model="formData.birthDate" disabledColor="#ffffff" placeholder="请选择出生年月"></u-input>
</u-form-item>

点击弹出选择年月日控件

<u-datetime-picker :show="dateShow" v-model="birthDate" mode="date" @confirm="confirmDate" @cancel="cancelDate" :minDate="new Date(1949, 0, 1).getTime()" :maxDate="new Date().getTime()">
</u-datetime-picker>

点击日期空间的确定按钮

confirmDate(e) {const date = new Date(e.value);// 提取年、月、日(月份+1 因为 JS 月份从 0 开始)const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, "0"); // 补零处理(如 1 → "01")const day = String(date.getDate()).padStart(2, "0");// 格式化为 YYYY-MM-DD 并赋值给 formData.birthDatethis.formData.birthDate = `${year}-${month}-${day}`;this.$refs.uForm.validateField('birthDate');this.dateShow = false; // 关闭日期选择器
},

关键语句:this.$refs.uForm.validateField('birthDate'); (单独校验表单其中一个元素时)

onReady() {// 确保表单规则正确设置(小程序兼容)if (this.$refs.uForm?.setRules) {this.$refs.uForm.setRules(this.rules)}
},

3、扫码进入注册页并携带邀请码功能

在微信公众平台 > 开发管理  > 扫普通链接二维码打开小程序,添加对应链接,配置跳转路径。

在扫码跳转小程序成功后,在onLoad函数中可以接收到二维码中的内容

例如,二维码中内容为:https://ceshi.com?inviteCode=123
则在小程序中的query.q的值为:https%3A%2F%2Fceshi.com%2Fa%2F%3Fid%3D123
使用decodeURIComponent解码后可以得到原来的数据,如下所示:

onLoad(options) {// console.log(options);if (options.q) {const optionsUrl = decodeURIComponent(options.q);// console.log(optionsUrl);const inviteCode = this.getQueryString(optionsUrl, 'inviteCode');this.formData.invite = inviteCode; //表单赋值}
},

http://www.xdnf.cn/news/10872.html

相关文章:

  • 实现对deepseek流式返回的json数据,进行逐字解析并实时渲染
  • 优化 Spring Boot API 性能:利用 GZIP 压缩处理大型有效载荷
  • Golang 依赖注入:构建松耦合架构的关键技术
  • Silky-CTF: 0x02靶场
  • 信创时代下的信息化项目验收:企业如何应对国产化挑战?
  • 期货反向跟单运营逻辑推导思路
  • 持续领跑中国异地组网路由器市场,贝锐蒲公英再次登顶销量榜首
  • JSON to Excel 3.0.0 版本发布 - 从Excel插件到Web应用的转变
  • 数据驱动在线教育平台优化:用数据帮你变成“教书匠+数据控”
  • 口碑对比:杭州白塔岭画室和燕壹画室哪个好?
  • 汇编语言基础: 搭建实验环境
  • DMC-E 系列总线控制卡----雷赛板卡介绍(一)
  • 数据安全合规体系构建的“三道防线“
  • P1438 无聊的数列/P1253 扶苏的问题
  • 深度学习与特征交叉:揭秘FNN与SNN在点击率预测中的应用
  • 多线程编程的黄金三角模型
  • [yolov11改进系列]基于yolov11使用图像去雾网络UnfogNet替换backbone的python源码+训练源码
  • pytorch基本运算-导数和f-string
  • Easyui悬停组件
  • nav2笔记-250603
  • 国产高性能pSRAM选型指南:CSS6404LS-LI 64Mb QSPI伪静态存储器
  • 【网络安全 | 信息收集】灯塔(资产收集工具)安装教程
  • 【QT】`QTextCursor::insertText()`中插入彩色文本
  • Windows清理之后,资源管理器卡顿-解决方法
  • 【开源工具】Python+PyQt5打造智能桌面单词记忆工具:悬浮窗+热键切换+自定义词库
  • 【论文解读】FeINFN|Fourier-enhanced Implicit Neural Fusion Network for Multispectral
  • 黑马Java面试笔记之 消息中间件篇(Kafka)
  • Linux 软件安装方式全解(适用于 CentOS/RHEL 系统)
  • 【25.06】FISCOBCOS使用caliper自定义测试 通过webase 单机四节点 helloworld等进行测试
  • 多线程环境中,如果多个线程同时尝试向同一个TCP客户端发送数据,添加同步机制