1. 程式人生 > >微信小程式--form表單訊息推送

微信小程式--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傳送請求時候,需要迴圈。