微信小程序的formid获取

formId的触发

微信小程序可以通过收集用户的formid,获取formid给用户主动推送微信消息。获取formid有两个途径,一个是触发一次表单提交,或者触发一次支付行为。如果要给用户主动推送模板消息,就需要拿到足够多的formid。

用表单的方法一定需要绑定bindsubmit,button的form-type设置为submit,在js代码中可以通过e.detail.formId 获取formId。

实例:

<form bindsubmit="submit" report-submit='true' class='formid'>
<button form-type="submit"></button>
</form>
submit: function (e) {
console.log(e.detail.formId);
}

获取formid的tips

如果没有点击事件,可以把button设置为透明的,在每一处点击都可以收集formId

如果想同时触发formid和点击事件,可以采用如下方法:

1、在点击事件的外层套上form和button,但是需要修改button的默认样式,相当于在外面套一层透明的蒙版。

2、直接用button绑定点击事件,把要触发的函数写入。

3、在点击事件内嵌套form和button,也需要修改button的默认样式。

去除button默认样式

这是button的默认样式:

button {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height:2.55555556;
border-radius:5px;/*可以改成0,去除圆角*/
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#000000;
background-color:#F8F8F8;/*按钮默认背景色是灰色的,可以把值改为#fff白色*/
}

去除button的边框:使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。

button::after {
border: none;
}

button::after{ border: none; }

[技术博客] 微信小程序的formid获取的更多相关文章

  1. 技术博客——微信小程序UI的设计与美化

    技术博客--微信小程序UI的设计与美化 在alpha阶段的开发过后,我们的小程序也上线了.看到自己努力之后的成果大家都很开心,但对比已有的表情包小程序,我们的界面还有很大的提升空间,许多的界面都是各个 ...

  2. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  3. 技术博客——微信小程序的架构与原理

    技术博客--微信小程序的架构与原理 在两个月的微信小程序开发过程中,我曾走了不少弯路,也曾被很多现在看来十分可笑的问题所困扰.这些弯路与困扰,基本上都是由于当时对小程序的架构理解不够充分,对小程序的原 ...

  4. [技术博客]微信小程序审核的注意事项及企业版小程序的申请流程

    关于小程序审核及企业版小程序申请的一些问题 微信小程序是一个非常方便的平台.由于微信小程序可以通过微信直接进入,不需要下载,且可使用微信账号直接登录,因此具有巨大的流量优势.但是,也正是因为微信流量巨 ...

  5. [技术博客]微信小程序开发中遇到的两个问题的解决

    IDE介绍 微信web开发者工具 前端语言 微信小程序使用的语言为wxml和wss,使用JSON以及js逻辑进行页面之间的交互.与网页的html和css略有不同,微信小程序在此基础上添加了自己的改进, ...

  6. 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  7. 腾讯技术分享:微信小程序音视频技术背后的故事

    1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

  8. 微信小程序之动态获取元素宽高

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  9. 微信小程序案例:获取微信访问用户的openid

    在微信开发项目中,获取openid是项目常遇的问题,本文通过主要讲解实现在微信小程序中如何获取用户的openid,案例实现非常简单 具体实现方法是通过登录接口获取登录凭证,然后通过request请求微 ...

随机推荐

  1. Java学习:网络编程总结

    Java网络编程总结 一.概述 计算机网络是通过传输介质.通信设施和网络通信协议,把分散在不同地点的计算机设备互连起来,实现资源共享和数据传输的系统.网络编程就就是编写程序使联网的两个(或多个)设备( ...

  2. C# Newtonsoft.Json.JsonReaderException:“Could not convert string to decimal:

    使用Newtonsoft.Json,报以上错误,问题的原因是有"",把“”替换成null: 以前的json: [{"WengvNj":"df5c38c ...

  3. 使“Cmder Here”菜单在Tab页开新窗口

    Cmder是一个非常好用的的控制台命令行,我们在实际使用的时候,经常通过如下指令将其注册到右键菜单: Cmder.exe /REGISTER ALL 这样就可以在任意文件夹下快速打开Cmder,并且能 ...

  4. Cases:Unit Testing with the MSTest Framework

    UnitTesting shanzm 右键-->在新标签页中打开图片,即可查看原图,图片超乎你想像的大! 源代码:https://github.com/shanzm/UnitTesting

  5. Java基础笔记之String相关知识

    (二)String Sring 被声明为 final ,因此不可被继承. String的不可变性: 看String的定义(java9版本): public final class String imp ...

  6. VUE创建播发器组件并调用

    欢迎来到我的友链小屋   首先用vue-cli创建前端项目 参考:https://www.cnblogs.com/ouyangkai/p/11549290.html 新建play.vue文件 编写pl ...

  7. 我为什么学习Haskell

    说起来,Haskell真是相当冷门而小众的一门语言.在我工作第一年的时候,我平时从网络的一些学习资料上时不时看到有人提到这门语言.那时候的认识就是除了我们平时用的“面向对象语言 (OOP: Objec ...

  8. English--音标拼读

    English|音标拼读 音标拼读主要内容是,如何使用音标进行单词的拼读,并且会有相应的语音现象,最关键的还是自己多加练习,多听~ 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识 ...

  9. selenium控制超链接在当前标签页中打开或重新打开一个标签页

    selenium控制超链接在当前标签页中打开或重新打开一个标签页 在web页面源码中,控制超链接的打开是在当前标签页还是重新打开一个标签页,是由属性target=“_black”进行控制的.如果还有属 ...

  10. 解决使用maven clean项目的时候报错,删除target文件夹失败

    背景:jdk1.8 + maven3.5.2 问题描述: 我在使用maven clean项目的时候,celan 失败,报错的原因是删除项目下的target文件夹下面的文件失败 解决方法: 打开任务管理 ...