【微信小程序】 通过用户登录实现批量收集formId

参考网上多篇文章，本文目的旨在做个记录。

【微信小程序】通过用户登录实现批量收集formid，无限次发送模板消息

提交1次表单可下发1条模板消息，多次提交下发条数独立，相互不影响。
所以，想无限次发送模板消息，需要批量的收集formId。

index.wxml

  
    <view class="inputView" style="margin-top: 10% ">
      <form bind:submit="formSubmit" report-submit="true">
        <button form-type='submit' class='form_button'>
          <view class='vv'>
            <form bind:submit="formSubmit" report-submit="true">
              <button form-type='submit' class='form_button'>
                <view class='vv'>
                  <input class="input" type="string" bindinput='username' placeholder="用户名" placeholder-style="color: #FFFFFF" />
                view>
              button>
            form>
          view>
        button>                                                
      form>
    view>
    <view class="inputView" style="margin-top: 5% ">
      <form bind:submit="formSubmit" report-submit="true">
        <button form-type='submit' class='form_button'>
          <view class='vv'>
            <form bind:submit="formSubmit" report-submit="true">
              <button form-type='submit' class='form_button'>
                <view class='vv'>
                  <input class="input" password="true" bindinput='pwd' placeholder="密码" placeholder-style="color: #FFFFFF" />
                view>
              button>
            form>
          view>
        button>
      form>
    view>
    <form bind:submit="login" report-submit="true">
      <button type='default' formType="submit" class='btn'>绑定button>
    form>   
  view>

index.js

  formSubmit:function(e){
    let formId = e.detail.formId; //获取formId
    console.log(formId)
    if (e.detail.formId != 'the formId is a mock one') {
      this.collectFormIds(formId);//保存推送码
    }
  },
  collectFormIds: function (formId) {
    let formIds = app.globalData.globalFormIds; // 获取全局推送码数组
    if (!formIds)
      formIds = [];
    let data = {
      formId: formId,
      expire: new Date().getTime() + 604800000 // 7天后的过期时间戳
    }
    formIds.push(data);// 将data添加到数组的末尾
    app.globalData.globalFormIds = formIds;// 保存推送码并赋值给全局变量
  },
  username:function(e){
    this.data.username = e.detail.value
  },
  pwd:function(e){
    this.data.pwd = e.detail.value 
  },
  login: function (e) {
    let username = this.data.username;
    let pwd =  this.data.pwd;

    wx.request({//通过网络请求发送用户名和密码到服务器
      url: '请求的地址'’,
      data:{  
         username : username ,
         pwd : pwd
      },
      success: function (res) {
        if (res.data.user != null) {
          wx.setStorageSync("userId", res.data.user.id) //保存返回的用户信息
        }
        if (res.data.status == 0) {      
          //登录成功
          wx.redirectTo({
            url: '../second/second',
            success: function (res) {
              console.log('登录跳转成功')
            },
            fail: function () {
              console.log('登录跳转失败')
            }
          })
        } else {
          //跳回首页
          wx.redirectTo({
            url: '../index/index',
            success: function (res) {
              console.log('跳回首页成功')
            },
            fail: function () {
              console.log('跳回首页失败')
            }
          })
        }
      }
    })
  }

second.js

Page({
  onLoad: function (options) {
    this.uploadFormIds(); //上传推送码
  },
  uploadFormIds: function () {
    var openid = wx.getStorageSync("openid")//获取openid
    var userId = wx.getStorageSync("userId")//获取userId
    var formIds = app.globalData.globalFormIds;// 从全局变量中获取formId
    if (formIds) {//gloabalFomIds存在的情况下 将数组转换为JSON字符串
      formIds = JSON.stringify(formIds);
      app.globalData.globalFormIds = '';   //清空formId
    }
    if (userId){
      wx.request({//通过网络请求发送openId和formIds到服务器
        url: '请求地址',
        method: 'POST',
        data: {
          formId: formIds,
          openId: openid,
          userId: userId
        }
        success: function (res) {
        }
      })
    }
  }
})

后台将获取到的 fromId，openid，以及userid 保存到数据库表中，就实现了批量收集formId的功能。

注：测试时，必须在真机上测试，微信开发者工具收集不到fromId，提示：the formId is a mock one
注：真机测试时，手机和电脑连的WIFI是同一个。
注：测试时，调用本地的接口，可以在微信开发者工具中设置成不检验合法域名，如下图