小程序无限制保存formid到后台

小程序formId

小程序的formId是为发送消息模板做准备的，只能在小程序使用时获取，后台是无法获取的。所以是用来发送一切临时的通知消息，并且formId是会过期的，且只能使用一次。期限好想是一周。但是我们为了给用户发送通知方便直接在用户使用小程序的时候收集formId并且在有效期内使用就能实现发送通知的功能。

实现策略

因为小程序限制,只能如下的方式获取formId，支付也会有formId我们这里不讨论，但是button一般太丑了。

 <form report-submit="true" @submit="formSubmit">
   <button form-type="submit" class="form-btn">
   </button>
</form>

为了button不影响我们界面的美观，并且能够以能够对开发者不透明的使用就更好了。我们现在封装一个组件，满足一以下功能：

• 不影响前端点击事件布局。即组件透明，并且有点击区域触发submit事件
• 每次点击记录formId
• 设定每天formId的采集上限
• 当formId达到上限，不渲染form，防止频繁获取formId造成的影响
• 设定formId达到多少值上传到服务器。

下面是代码实现

框架是类vue，如果不兼容自己需要改造下

<template>
    <div>
        <form v-if="isGetFormId" report-submit="true" @submit="formSubmit">
            <button form-type="submit" class="form-btn">

            </button>
        </form>
    </div>
</template>

<script>
    let ms = wx //兼容微信接口，如果不是使用微信，可以修改这个，并确认接口规范
    export default {
        data() {

            return {
                //每天获取formId的上限
                dayGetFormIdLimit:10,
                //上传到服务器的formId池大小,即formId采集到这么多个后就会上传到服务器\
                isGetFormId:true,
                //formId的过期毫秒数，为了保险，设定为5天，
                formIdExpire:5*24*60*60*1000,
                //模拟器中是否开启测试
                isMockTest:false,
                //存储key,每天formIds的采集数
                STORAGE_KEY:'formIdsCount'
            };
        },
        mounted() {
            this.isGetFormId = this.isFormShow()
        },

        methods: {
            //获取当天年月日
            getDay(){
                let date = new Date()
                let day = date.getFullYear()+"-" + (date.getMonth()+1)+"-"+date.getDate()
                return day
            },
            //处理提交记录
            isFormShow(){
                let isShow = true
                let day = this.getDay()
                //判断isGetFormId
                let formIds = ms.getStorageSync(this.STORAGE_KEY)
                if(typeof formIds === "object" ){
                    let dayFormIdCount = formIds[day]
                    if("number" === typeof dayFormIdCount){
                        if(dayFormIdCount >= this.dayGetFormIdLimit){
                            isShow = false
                            console.log('collect formIds is max:',this.dayGetFormIdLimit)
                        }
                    }
                }
                return isShow
            },
            //记录formId提交
            submitRecord(){
                if(!this.isFormShow()){
                    return
                }
                let day = this.getDay()
                let formIds = ms.getStorageSync(this.STORAGE_KEY)
                let cFormIds = {}
                if(typeof formIds === "object" ){
                    let dayFormIdCount = formIds[day]
                    if("number" === typeof dayFormIdCount){
                        cFormIds[day] = dayFormIdCount + 1
                    }else{
                        cFormIds[day] = 1
                    }
                }else{
                    cFormIds[day] = 1
                }
                ms.setStorageSync(this.STORAGE_KEY,cFormIds)
                this.isGetFormId =  this.isFormShow()
            },
            //触发表单事件
            formSubmit(e){
                if(e && e.detail && e.detail.formId){
                    if(!this.isMockTest){
                        //模拟器不采集
                        if(e.detail.formId.indexOf('formId')>0){
                            console.log('formId not collect for mock')
                            return
                        }
                    }

                    //提交formId数据
                    //这里要传formId和过期的绝对时间，防止formId在使用时过期
                    let params = {
                        formId:e.detail.formId,
                        expire:new Date().getTime()+this.formIdExpire
                    }
                    //提交到后端
                    postRow('/api/wxFormId/',params)
                    //采集记录
                    this.submitRecord()
                }else{
                    console.log('save form id exception.not event params')
                }
            }
        },

        watch: {},
        computed: {},
        filters: {},
        components: {},
        name: "wx-form-id"
    }
</script>

<style lang="scss">
    .form-btn{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
    }
</style>

隐藏时使用css的方式。

使用

在有点击时间的节点下，加入此组件

<view @click="clickReview"  class="content">
  <wx-form-id></wx-form-id>
  <text class="text-gray text-sm">hello</text>
</view>

版权所有

---

作者：简书@mt23，优快云@mt23

出处：

https://www.jianshu.com/u/71f8075c4151

https://blog.youkuaiyun.com/mathcoder23

发布时间：2019-09-12

版权所有，欢迎保留原文链接进行转载