热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

小程序如何获取多个formId实现详解

这篇文章主要介绍了小程序如何获取多个formId实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId

但是在今年3月份,这个投机取巧的方法(算是微信的一个bug)已经被微信修复,那么再使用这个方法,所拿到的formId都是相同的了,也就不符合我们的需求了

接下来给大家介绍另一种方法:

将form和button封装成组件模拟form submit,并把这个组件做成layout级,这样可以把整个页面包括在layout里面,利用事件自动冒泡的特性,只要点击了页面任一位置,就能获取到formId

1. 新建一个组件layout,wxml、wxss、js、json代码分别如下


 

.layout {
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  line-height: inherit;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  width: 100%;
  position: relative;
}
.layout .button{
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  line-height: inherit;
  -webkit-tap-highlight-color: #000;
  color: inherit;
  width: 100%;
  position: relative;
}
.layout .button .fixed{
  position:relative;
  z-index: 9999;
  width: 100%;
}
.layout .button:before,.layout .button:after{
  border-width: 0;
}
Component({
 methods: {
  formSubmit: function (e) {
   let formId = e.detail.formId
   console.log(formId)
  }
 }
})
{
 "component": true
}

2. 在app.json中,将layout添加为全局组件

"usingComponents": {
  "layout": "/components/layout/index"
 }

3. 在页面中使用


 
  ...
 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 解决fetch上传图片至微信公众号H5页面的问题
    在近期的一个项目需求中,需要在微信公众号内嵌入H5页面,并实现用户通过该页面上传图片的功能,包括拍摄新照片或从已有相册中选择。前端开发中采用了fetch API进行接口调用,但遇到了上传图片时数据无法正确传递的问题。 ... [详细]
  • 微信小程序开发指南:创建动态电影选座界面
    本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ... [详细]
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • 本文探讨了为何采用RESTful架构及其优势,特别是在现代Web应用开发中的重要性。通过前后端分离和统一接口设计,RESTful API能够提高开发效率,支持多种客户端,并简化维护。 ... [详细]
  • 本文介绍如何使用 jQuery 的 AJAX 方法从服务器获取 JSON 数据,并通过遍历这些数据来创建包含公司及其产品信息的数组。 ... [详细]
  • 手把手教你构建简易JSON解析器
    本文将带你深入了解JSON解析器的构建过程,通过实践掌握JSON解析的基本原理。适合所有对数据解析感兴趣的开发者。 ... [详细]
  • 本文详细介绍了如何手动编写兼容IE的Ajax函数,以及探讨了跨域请求的实现方法和原理,包括JSONP和服务器端设置HTTP头部等技术。 ... [详细]
  • 使用 NDB 提升 Node.js 应用调试体验
    本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB,旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]
  • 微信小程序配置详解:pages、window、tabBar与调试模式
    本文详细介绍了如何在微信小程序中配置pages、window、tabBar以及启用调试模式,帮助开发者更好地理解和应用这些配置选项。 ... [详细]
  • Android json字符串转Map
    Androidjson字符串转Map,Go语言社区,Golang程序员人脉社 ... [详细]
  • 本文档详细规划了从基础到高级的软件测试学习路径,包括但不限于测试基础、Linux和数据库、功能测试、Python编程、接口测试、性能测试、金融项目实战、UI自动化测试等内容,旨在为初学者和进阶者提供全面的学习指导。 ... [详细]
  • 告别酷暑,Python带你探寻全国最热城市
    随着九月的到来,炎热的夏季似乎终于画上了句号。对于许多人来说,夏天不仅仅是高温的代名词,更是对户外活动的一种限制。本文将通过Python编程技术,带领读者探索并找出今年夏季全国最热的城市。 ... [详细]
  • 软件测试行业深度解析:迈向高薪的必经之路
    本文深入探讨了软件测试行业的发展现状及未来趋势,旨在帮助有志于在该领域取得高薪的技术人员明确职业方向和发展路径。 ... [详细]
  • 本文介绍了 PHP 的基本概念、服务器与客户端的工作原理,以及 PHP 如何与数据库交互。同时,还涵盖了常见的数据库操作和安全性问题。 ... [详细]
author-avatar
浮夸诗人_219
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有