微信小程序--form表单消息推送

小程序实现向用户发推送消息,需要前端传formid给后台。后台便可以实现消息推送。那么formid怎么获取呢?
formid 肯定是写在form表单中的,通过button按钮触发,一个简单的例子:

<form bindsubmit="formSubmit" report-submit="true" >
    <button class='btnclass input-btn' formType="submit" >点击按钮</button>
</form>

js文件:

formSubmit: function (e) {
    console.log(e.detail.formId) // 获取formid
        // 发送wx.request请求,这里是我封装过的,根据自己业务修改
      api._fetch({
        url: '/msg/add', // 自己的url地址
        data: {
          formId: e.detail.formId, // 将formid作为参数传递给后台
        },
        method: 'POST'
      }).then((res) => {
        console.log(res)
      })
    }

注意formid只能通过真机调试可以看到,在编辑器上测试只能输出字符串。
以上代码可以实现一次性发送一条formid,那么如果需要点击按钮发送多个formid怎么办呢,那就需要在css样式上面做一点修改。
wxml代码:

<form bindsubmit="formSubmit" report-submit="{{true}}">
      <button formType="submit" class='btn'>
            <view class='aa'>
                 <form bindsubmit="formSubmit" report-submit="{{true}}">
                       <button  formType="submit" class='btn'>
                            <view class='aa'>
                            <form bindsubmit="formSubmit" report-submit="{{true}}">
                                <button  formType="submit" class='btn'>
                                      <view class='aa'>
                                        <form bindsubmit="formSubmit" report-submit="{{true}}">
                                              <button formType="submit" class='btn'>                                        <view class='aa'>
                                                      <form bindsubmit="formSubmit" report-submit="{{true}}">
                                                        <button formType="submit" class='btn'>                             <view class='aa'>
                                                              <form bindsubmit="formSubmit" report-submit="{{true}}">
                                                        <button formType="submit" class='btn'>                             <view class='aa'>
                                                              <form bindsubmit="formSubmit" report-submit="{{true}}">
                                                        <button formType="submit" class='btn'>                             <view class='aa'>
                                                              <form bindsubmit="formSubmit" report-submit="{{true}}">
                                                        <button formType="submit" class='btn'>                             <view class='aa'>
                                                              <form bindsubmit="formSubmit" report-submit="{{true}}">
                                                        <button formType="submit" class='btn'>                             <view class='aa'>
                                                              <form bindsubmit="formSubmit" report-submit="{{true}}">
                                                        <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" formType="submit" class='btn'>                             <view class='aa'>
                                                              立即登录
                                                            </view>
                                                          </button>
                                                      </form>
                                                            </view>
                                                          </button>
                                                      </form>
                                                            </view>
                                                          </button>
                                                      </form>
                                                            </view>
                                                          </button>
                                                      </form>
                                                            </view>
                                                          </button>
                                                      </form>
                                                            </view>
                                                          </button>
                                                      </form>
                                                    </view>
                                              </button>
                                        </form>
                                      </view>
                                </button>
                          </form>
                            </view>
                      </button>
                 </form>
            </view>
      </button>
  </form>

emmm是的,目前搜到的解决办法就是这样一个form嵌套一个form
在css里面还要做点修改,才能实现穿透
wxss代码:

.aa{
    border-radius: 150rpx;
    font-size:34rpx;
    background: #Fee100;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:#212121;
    line-height:85rpx;
    width: 300rpx;
    position: fixed;
    left: 50%;
    transform:translateX(-50%);
  }

js代码:

// 获取formid
  formSubmit: function (e) {
    let formId = this.data.formId
    formId.push(e.detail.formId)
    formId = [...new Set(formId)] // 这里对获取到的formid去重了,因为我们测试时候发现有时候两条formid是相同的
    this.setData({
      formId
    })
    console.log(this.data.formId)
  },

使用多条formid发送请求时候,需要循环。

猜你喜欢

转载自www.cnblogs.com/sevenbreey/p/10214076.html