微信小程序怎么收集用户的FormID
有了 FormID，就相当于有了给用户发送模板消息的权限，一个Formid只能发送一条消息，且这个FormId 的有效期只有7天。
微信相关的文档：
https://developers.weixin.qq.com/miniprogram/dev/api/notice.html#发送模板消息
之前也在网上看过到类型的代码和思路参考，只是他们的实现方法都不太符合我的要求，所以自己写了。
目前普遍的做发就是先把用户在小程序里的操作产生的formid收集到后台系统保存起来，需要发的时候直接从后台数据中取出，发送一条消耗一个fromid，过期就自动删除掉。要产生formid前台还必需使用form标签，再写上对应的属性，然后用户要手动去点击了表单的提交按钮才能得到一个fromID。
思路
就是把你页面中（尽量可能多的把所有页面都加上），用户经常会去点的按钮，图片等都用form标签给包起来，再form里面放上一个提交的按钮，改下按钮的样式，透明、大小和原本的按钮、图片的大小一样，这样用户去点击的时候，际实上是点击的表单的提交按钮，所以就拿到了formid ，然后提交到后台保存，后台推荐用像redis这样的缓存服务来保存
实现
这里我把自己写的收集代码片段分享给大家（使用wepy框架，仅供大家参考提供思路）：
这是mixins组件，怎么使用这里就不说明了
PS：$post是我自己封装的一个请求方法, 注意：the formId is a mock one 这是开发者工具的固定值，这里不作提交，开发可以去掉看效果
form.js
import wepy from 'wepy'
import {$post, config} from './base'
/**
* @author Joyber
* 收集用户的FormID的MIXINS
* 用法：
*
<form class="_f [原有的classname]" report-submit @submit="FormSubmit"
data-event="[原有的方法]">
<button class="_f" form-type="submit"></button>
[原有的标签内容]
</form>
*/
export default class formMixin extends wepy.mixin {
methods = {
FormSubmit(e) {
let _this = this;
const {formId, value} = e.detail;
const {dataset} = e.currentTarget;
const {event} = dataset;
config.debug && console.log('formId', formId);
//the formId is a mock one 这是开发者工具的固定值，这里不作提交
formId && formId!='the formId is a mock one' && $post("member/form/id", {formId});
if (!event) return;
if (typeof _this.methods[event] == 'function') {
_this.methods[event].call(_this, e);
} else if (typeof _this[event] == 'function') {
_this[event].call(_this, e);
} else {
let flag = false;
const {$mixins} = _this;
config.debug && console.log(typeof $mixins, $mixins);
$mixins.forEach((mixin, index)=>{
config.debug && console.log('find mixin function', index);
if (mixin.methods && typeof mixin.methods[event] == 'function') {
flag = true;
mixin.methods[event].call(_this, e);
}else if (typeof mixin[event] == 'function') {
flag = true;
mixin[event].call(_this, e);
}
});
!flag && console.error('page function undefined: ' + event);
}
}
}
}使用
全局CSS(less语法)：
form{
&._f{
position: relative;
display: block;
&._b{display: block;}
button {
&._f {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
z-index:1;
&::after {display: none;}
}
}
}
}代码改造：
原来的页面代码比如：
<view class="XXXX1" @tap="xxxx2" data-id="xxxx3"><image src="xxx4"></image></view>改造后的页面代码：
<form class="_f XXXX1" report-submit @submit="FormSubmit"
data-event="xxxx2" data-id="xxxx3">
<button class="_f" form-type="submit"></button>
<image src="xxx4"></image>
</form>而JS中只需要把 form.js import进来
wx.page 的 mixins 中 增加 formMixin 即可。
mixins = [formMixin]
本人文采不好，见谅！