有了 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]

本人文采不好,见谅!

标签: none

添加新评论