[微信小程序]模板消息formid的采集

1.formid的来源

微信小程序中，若需要针对用户推送模板消息，需要持有该用户的formid。 根据微信官方文档，formid的来源如下：

步骤二：页面的 <form/> 组件，属性 report-submit 为 true 时，可以声明为需要发送模板消息，此时点击按钮提交表单可以获取 formId，用于发送模板消息。或者当用户完成 支付行为，可以获取 prepay_id 用于发送模板消息。

其中，prepay_id需要支付这一行为触发，开发中可在支付完成后收集，在此不再赘述。 若要便捷的收集用户formid，可通过使用自定义button组件实现这一目的。

2.自定义button

• formbtn.wxml

<form report-submit="true" bindsubmit="getFormId">
    <button class="btn-class" hover-class="hover-class button-hover" form-type="submit" type="{{type}}" disabled="{{disabled}}"><slot></slot></button>
</form>
复制代码

• formbtn.js

const app = getApp();

Component({
  behaviors: [],
  properties: {
    type: {
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: 'normal' // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    disabled: {
      type: Boolean, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: false // 属性初始值（可选），如果未指定则会根据类型选择一个
    }
  },
  data: {},
  // 公有方法
  methods: {
    getFormId(e){
      let formId = e.detail.formId;
      if(formId && formId !== 'the formId is a mock one'){
        // 上传formid
      }
    }
    externalClasses: ['btn-class','hover-class'] //导入外部样式
});
复制代码

• formbtn.wxss

button{
    background-color: rgba($color: #000000, $alpha: 0);
    background-image: none;
    border-radius: 0;
    border: none;
    padding: 0;
    margin: none;
    line-height: normal;
}

.button-hover{
    background-color: rgba($color: #000000, $alpha: 0);
    background-image: none;
}
复制代码