小程序 <web-view></web-view> 中使用 form 表单提交

在最近的小程序项目中，使用到了 <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>

巴特西

小程序 <web-view></web-view> 中使用 form 表单提交

最新文章

热门文章