微信小程式--form表單訊息推送
阿新 • • 發佈:2019-01-03
小程式實現向用戶發推送訊息,需要前端傳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傳送請求時候,需要迴圈。