小程式 <web-view></web-view> 中使用 form 表單提交
阿新 • • 發佈:2018-11-08
在最近的小程式專案中,使用到了 <web-view></web-view> 內嵌 H5 頁面,在 H5 中需要使用 form 表單提交資料。
H5 使用的技術框架是 vue+vuex,剛開始編碼如下:
//form表單,v-model繫結資料 <form :action="url" ref="setForm" method="post"> <input type="hidden" v-model="id" name="id"> <input type="hidden" v-model="code" name="code"> <input type="hidden" v-model="dta" name="dta"> </form> //介面內提交表單資料 let form = this.$refs.setForm; this.id = res.data.id; this.code = res.data.code; this.dta = res.data.data; form.submit();
聯調發現這樣寫,v-model 內的引數沒有賦值。親測以下兩種方法都可以拿到值:
解決方法1:v-model 結合延時處理
//介面內提交表單資料 let form = this.$refs.setForm; this.id = res.data.id; this.code = res.data.code; this.dta = res.data.data; setTimeout(function(){ form.submit(); },500);
解決方法2:使用 document 建立元素
//form表單 <form :action="url" ref="setForm" method="post"> </form> //介面內提交表單資料 let form = this.$refs.setForm; arr = [{ name: 'id', val: res.data.id }, { name: 'code', val: res.data.code }, { name: 'dta', val: res.data.data }]; for(let p in arr) { let input = document.createElement('input'); input.setAttribute('name': arr[p].name); input.setAttribute('code': arr[p].code); input.setAttribute('dta': arr[p].data); input.setAttribute('type': 'hidden'); } form.submit();
這樣寫在 H5 中訪問是沒有問題的,但是當在小程式的環境中訪問時問題來了:form-data 里根本沒有資料!
原因在於:web-view 與 form-data 不能同時使用。
解決方法:改為 get ,親測可行。(可以修改 form 的 enctype 為 application/x-www-form-urlencoded 試一下,不過這種方法還未驗證)
//form表單 <form :action="url" ref="setForm" method="get"> </form>