小程序如何获取多个formId实现详解
很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId
但是在今年3月份,这个投机取巧的方法(算是微信的一个bug)已经被微信修复,那么再使用这个方法,所拿到的formId都是相同的了,也就不符合我们的需求了
接下来给大家介绍另一种方法:
将form和button封装成组件模拟form submit,并把这个组件做成layout级,这样可以把整个页面包括在layout里面,利用事件自动冒泡的特性,只要点击了页面任一位置,就能获取到formId
1. 新建一个组件layout,wxml、wxss、js、json代码分别如下
<form bindsubmit="formSubmit" report-submit class="layout"> <button formType="submit" class="button" hover-class="none"> <view class="fixed"><slot></slot></view> </button> </form>
.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. 在页面中使用
<layout> <view class="container"> ... </view> </layout>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序如何获取用户手机号
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection { private final i
-
微信小程序用户授权、位置授权及获取微信绑定手机号
1.位置授权 位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框, 在调用前需要在app.json中设置用途说明 Page({ "permission": { "scope.userLocation": { "desc": "你的位置信息将用于xxx" } } }) 授权框 但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹
-
微信小程序获取音频时长与实时获取播放进度问题
首先在没有播放音频之前,居然拿不到总时长 但是在播放之后也需要设置setTimeout来获取 所以在监听音频播放进度更新事件中获取.顺便获取当前播放进度 按照官方的写法 audioPlayed: function () { myAudio.play() setTieout(() => { myAudio.onTimeUpdate(() => { console.log(myAudio.duration) //总时长 console.log(myAudio.currentTime) //当前播放
-
微信小程序实现页面跳转传值以及获取值的方法分析
本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr
-
详解微信小程序开发之formId使用(模板消息)
基于微信小程序的模板消息: 官方文档 基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验. 模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发,详见下发条件说明 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面 使用案例 场景描述:前台获取 formId 送至后台,由后台实现模板消息的发送.(此处由于 formId 只能由用户触发表单提交操作产生,故前台需要将每次产生的formId发送至后台,由后台保
-
详解微信小程序获取当前时间及日期的方法
获取当前时间 首先,在要获取时间的.js文件中加载util.js文件 然后在onload方法中,调用util.js中的formatTime方法获取当前时间 //获取当前时间 // 调用函数时,传入new Date()参数,返回值是日期和时间 var TIME = util.formatTime(new Date()); this.setData({ time: TIME, }); 这样就获取到了当前时间,但是我们发现在util.js中并没有获取当前日期的方法. 没事,别慌! 这个时候我们去看下u
-
微信小程序判断用户是否需要再次授权获取个人信息
一.index.js设置如下 //获取用户的授权信息,放到本地缓存中 wx.getSetting({ success: (res) => { if(res.authSetting['scope.userInfo']) { wx.setStorage({ key: 'can_getuserinfo', data: 1, }) } else { wx.setStorage({ key: 'can_getuserinfo', data: 0, }) } } }), //1:从本地缓存中获取数据,如果获
-
解决微信小程序云开发中获取数据库的内容为空的方法
问题描述: 在前端想获取数据库某集合中的数据时,返回的参数data始终为空数组,如下: 相关代码如下: const db = wx.cloud.database(); const activityInfo = db.collection('activityInfo'); Page({ ...省略不相干代码... onLoad(){ activityInfo.get().then((res)=>{ console.log(res) }) } ...省略不相干代码... }) 解决方案: 数据库新建
-
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
前言 在微信小程序中,小程序提供了一种能力-模板消息,官方文档是这样描述的:"基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验." 看图说话: 下发模板消息效果图 这无疑又给小程序提供了与用户进行通知.反馈的新能力,但是小程序为了防止模板消息对用户造成信息轰炸,影响用户体验,也设置了一些规矩: 模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个
-
小程序如何获取多个formId实现详解
很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次"提交",可以获取到多个formId 但是在今年3月份,这个投机取巧的方法(算是微信的一个bug)已经被微信修复,那么再使用这个方法,所拿到的formId都是相同的了,也就不符合我们的需求了 接下来给大家介绍另一种方法: 将form和button封装成组件模拟form submit,并把这个组件做成layout级,这样可以把整个页面包括在layout里面,利用事件自动冒泡的特性,只
-
微信小程序 利用css实现遮罩效果实例详解
微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi
-
微信小程序 开发MAP(地图)实例详解
微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo
-
使用微信小程序开发弹出框应用实例详解
view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap="modalcnt">模态弹窗</button> <button typ
-
微信小程序激励式视频广告组件使用详解
微信小程序搜索:短视频去水印解析 目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为: 1. Banner 2. 激励式视频 3. 插屏 Banner广告很简单,插入代码就可以显示 这里介绍下激励式视频广告实现(观看完整广告奖励积分): //视频广告 let videoAd = null; //视频广告拉取状态 let videoAdPushStatus = false; Page({ data: { //积分总数 creditsAmountSum: 100 }, onLoad(opt
-
微信小程序常用表单组件的使用详解
目录 1.常用表单组件 1.1button 1.2checkbox 1.3input 1.4label 1.5form 1.6radio 1.7slider 1.8switch 1.9textarea 2.实训小案例–问卷调查 1.常用表单组件 1.1 button <button>为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交.其属性表如下所示. 代码示例: <view class="demo-box"> <view class=&quo
-
小程序页面onload(),onready()加载顺序详解
目录 小程序 原生JS Jquery 小程序 onLoad(Object query) 页面加载时触发.一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数. onShow() 页面显示/切入前台时触发. onReady() 页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互. 所以加载顺序是先加载onLoad,再是onShow,最后onReady 原生JS document.ready 表示文档结构加载完成(不包含图片等非文字媒
-
微信小程序登录与注册功能的实现详解
目录 小程序中的登录 用户注册 用户信息修改 总结 小程序中的登录 在小程序中有一个概念叫openid,这个相当于登录小程序用户的唯一标识,每个微信用户都不同.那要如何拿到用户的唯一标识呢?在微搭低代码中是通过调用系统的api来获取的 let userinfo = await app.utils.getWXContext() 我们通过这行代码的调用来获取到用户的唯一标识,获取到之后我们其他页面也需要使用,那就需要把他存起来.全局变量的作用域是所有页面都可见,所以我们需要在变量中定义一个全局变量叫
-
微信小程序多表联合查询的实现详解
目录 一对多表设计 SQL中的关联查询 低码中的表关联 自定义连接器中实现表关联查询 新建连接器 总结 一对一的设计一般不常见,只需要设计到主表中即可,避免增加复杂性.一对多的关系比较常见,一的一方通常作为主表,多的一方通常作为子表.而多对多一般会拆分成两个一对多的关系,这就必须要用中间表进行过渡. 我们本篇介绍的多表查询,侧重在一对多的关系,我们先看一下我们实际的表设计 一对多表设计 我们实现的是文章关注的业务,通常将文章作为主表,而关注信息作为子表.表和表之间要进行关联,常见的设计思路是子表
-
微信小程序本作用域下调用全局JS详解及实例
微信小程序本作用域下调用全局JS详解 本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"
随机推荐
- Prototype Selector对象学习
- 正则应用之 日期正则表达式
- jsp 生成验证码代码
- javascript放大镜效果的简单实现
- ios实现UITableView之间圆角和间隙
- PHP实现下载断点续传的方法
- JS中from 表单序列化提交的代码
- Ajax和PHP正则表达式验证表单及验证码
- PHP正则匹配图片并给图片加链接详解
- Java 正则表达式详细使用
- Python实现遍历目录的方法【测试可用】
- python中argparse模块用法实例详解
- JS判断客户端是手机还是PC的2个代码
- javascript实现3D变换的立体圆圈实例
- 基于JQuery的Select选择框的华丽变身
- JavaScript下申明对象的几种方法小结
- java版数独游戏界面实现(二)
- vue计算属性时v-for处理数组时遇到的一个bug问题
- Ubuntu添加swap分区的方法
- python matlibplot绘制多条曲线图