web-view是承载网页的容器。会自动铺满整个小程序页面，说到底就是在进行文件上传的时候还是通过原来的H5的form表单进行提交数据，而web-view负责把这个页面放进小程序里，下面是他的部分属性：
src:webview:指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名；
bindmessage:网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组；
bindload:网页加载成功时候触发此事件。e.detail = { src ；
binderror:网页加载失败的时候触发此事件。e.detail = { src }；
需要注意的是：
1、网页内 iframe 的域名也需要配置到域名白名单。
2、开发者工具上，可以在web-view组件上通过右键 - 调试，打开web-view组件的调试。
3、每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
4、web-view网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
5、在 iOS 中，若存在JSSDK接口调用无响应的情况，可在web-view的 src 后面加个#wechat_redirect解决。
6、避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。
引入方式：
<web-view src='H5页面的地址'></web-view> <!--注意：页面需要配置白名单-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta charset="UTF-8">
<title>文件上传</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="http://malsup.github.io/min/jquery.form.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<style type="text/css">
body,html{
width: 100%;
height: 100%;
margin: 0;
}
#form{
width: 100%;
height: 100%;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.oldFile{
display:none;
}
.newFile{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #10a78e;
text-align: center;
line-height: 150px;
color: white;
}
.btn{
width: 150px;
height: 45px;
background-color: #c1c1c1;
color:white;
outline: none;
border: 0;
border-radius: 10px;
}
.filename{
width: 100%;
height: 120px;
margin: 50px 0;
line-height: 24px;
text-align: center;
}
</style>
</head>
<body>
<form id="form" action="http://underwriting.algerfan.cn/underwriting/upload" method="post" enctype="multipart/form-data">
<div class="newFile">选择文件</div>
<div class="filename"></div>
<input type="submit" value="上传文件" class="btn">
<input class="encryptedData" style="display: none;" type="text" name="encryptedData" />
<input class="iv" style="display: none;" type="text" name="iv" />
<input class="code" style="display: none;" type="text" name="code" />
<input class="name" style="display: none;" type="text" name="name" />
<input type="file" name="file" class="oldFile">
</form>
</body>
<script type="text/javascript">
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
var encryptedData = getUrlParam('encryptedData');
var iv = getUrlParam('iv');
var code = getUrlParam('code');
var name = getUrlParam('name');
$('.encryptedData').val(encryptedData);
$('.iv').val(iv);
$('.code').val(code);
$('.name').val(name);
var INPUTINDEX = 0;
$('.newFile').click(function(){
$(".oldFile").eq(INPUTINDEX).change(function(){
$('.newFile').css('line-height','20px');
$('.newFile').css('padding-top','45px');
$('.newFile').css('height','105px');
$('.newFile').html('继续选择'+'<br/>'+'点击不需要的文'+'<br/>'+'件进行删除');
var NAME = getfilename(INPUTINDEX);
var NODE = '<div class="names">'+NAME+'</div>';
$('.filename').append(NODE);
$('.btn').css('background-color','#10a78e');
})
if(INPUTINDEX>4){
alert('最多添加五个文件');
}else if(INPUTINDEX==4){
$('.oldFile').eq(INPUTINDEX).click();
INPUTINDEX++;
}else{
var newinput = '<input type="file" name="file" class="oldFile">';
$('#form').append(newinput);
$('.oldFile').eq(INPUTINDEX).click();
INPUTINDEX++;
}
});
function getfilename(index){
var file = $(".oldFile").eq(index-1).val();
var name = file.lastIndexOf("\\");
var fileName = file.substring(name+1);
return fileName;
}
setInterval(function(){
$('.names').click(function(){
var INDEX = $(this).index();
$(this).remove();
var text = document.getElementsByClassName('oldFile')[INDEX];
document.getElementById('form').removeChild(text);
INPUTINDEX--;
})
},100)
$(function(){
$("#form").ajaxForm(function(data){
if(data.code==1){
wx.miniProgram.switchTab({url: '/pages/submit/submit'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
}
});
});
</script>
</html>
网友评论