formid 基础知识

formid 是啥

小程序给用户发消息的唯一途径，所以前端要尽量多收集 formid 保存到服务端；

formid 怎么收集

小程序要求必须用户提交表单才能得到formid；
form 增加 report-submit 属性，并通过 button submit，前端 formSubmit 事件就能获得 formid ，如下方代码所示：

<form bindsubmit="formSubmit" report-submit class="layout">
    <button formType="submit" class="button" 
    	hover-class="none">
        。。。
    </button>
</form>

formid 组件封装（初期思路）

我们将form与button 封装成组件（fomids），通过slot，可以显示任意元素，模拟form submit；
把页面上需要点击的元素用fomids包起来，fomids 将收集的 formid 放入cache，然后通过网络请求将 fomid 传给服务端；
大数小程序都是这么做的，这样做也没有问题，就是略微麻烦，form 与button 组合的样式有时不太好控制

formid 组件封装（进阶思路）

此思路是上面思路的延申，我们把 formids 这个组件做成layout级，把整个页面包在里面，利用事件自动冒泡的特性，只要有点击事件，就能收集到 formid

新建组件layout

<!--components/layout.wxml-->
<form bindsubmit="formSubmit" report-submit class="layout">
    <button formType="submit" class="button"
            hover-class="none">
        <view class="fixed"><slot></slot></view>
    </button>
</form>

/* components/layout.wxss */
.layout {
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    font-size: inherit;
    text-align: left;
    text-decoration: none;
    line-height: inherit;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    width: 100%;
    position: relative;
}
.layout .button{
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    font-size: inherit;
    text-align: left;
    text-decoration: none;
    line-height: inherit;
    -webkit-tap-highlight-color: #000;
    color: inherit;
    width: 100%;
    position: relative;
}
.layout .button .fixed{
    position:relative;
    z-index: 9999;
    width: 100%;
}
.layout .button:before,.layout .button:after{
    border-width: 0;
}

// components/layout.js
Component({
  methods:{
    formSubmit: function(e) {
      console.log('layout.formids',e.detail.formId)
      if("the formId is a mock one"!=e.detail.formId){
        let formids=wx.getStorageSync('formids') || [];
        formids.push(e.detail.formId);
        formids=[...new Set(formids)];
        wx.setStorage({key:'formids',data:formids});
      }
    },
  },
})

将 layout 添加为全局组件

app.json 中增加

"usingComponents":{
    "layout":"/components/layout"
  },

在页面wxml中使用

<layout>
	<view class="pages">...</view>
</layout>

怎么将 formid 提给服务端

首先你必须将wx.requxest 进行封装为myRequxest，页面上都是用myRequxest 进行网络请求；

myRequxest 中 header 增加formids，从cache中获得放到header中；并删除formid缓存；（需要服务端从header中获得formids并存起来）

function myRequxest(....){
  let formids = wx.getStorageSync('formids');
  if(formids){
  	wx.removeStorage({key:'formids'});
  }
  let openid='';//用户openid
  wx.request({
    ...
    header: {
      formids:formids.toString(),
      openid:openid,
    },
    ...
  })
}

延申思考

从 写 form 收集 -> 封装 formids 组件 -> 封装 layout(formids) 组件，跳出思维固化，可以做更多可能；

希望这个思路能给你一些触发