uniapp监听webview值的变动（引入页面的title）

vue页面引入：
在这里插入图片描述
html页面：

<title>上传文件</title>
<body style="position: fixed; top: 300px; left: 47%;">
    <div class="head-btn">
        <form action="" method="post">
            <a href="javascript:;" class="file">选择文件
                <input type="file" name="uploadFile" id="uploadFile" >
            </a>
        </form>
        <p class="showFileName"></p>
    </div>
    <div class="box_btn" id="app">
        <button class="btn" type="button" data-action="redirectTo">确定</button>
        <button class="btn1" type="button" data-action="navigateBack" id="postMessage">取消</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
var title = document.getElementsByTagName('title')[0];
function getQuery(name) { // 获取uni传值
    // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r != null) {
        // 对参数值进行解码
        return unescape(r[2]);
    }
    return null;
}
// 文件上传
$('.btn').click(function(evt) { 
  var ipt = document.getElementById('uploadFile');
   var formdata = new FormData(); // 创建一个form类型的数据
   formdata.append("files",ipt.files[0]); // 获取上传文件的数据
   formdata.append("orderId",getQuery('orderId')); // 获取上传文件的数据
   formdata.append("name","name"); // 获取上传文件的数据
   // console.log(formdata)
   // 改变title
   title.innerText = '上传'
   $.ajax({
     url: '后端接口',
     type: "POST",
     processData: false,
     contentType: false,
     data:formdata,
     headers: {
       'token': getQuery('token')
     },
     success: function(res) {
     	// 改变title
       title.innerText = res.message
     },
     error: function(err) {
       alert('上传失败')
     }
   });
 });
 //取消文件上传
 $('.btn1').click(function(evt) {
   var target = evt.target;
   if (target.tagName === 'BUTTON') {
     var action = target.getAttribute('data-action');
     if (action == 'navigateBack') {
     	// 改变title
      title.innerText='取消'
     }
   }
 });
</script>

vue页面：

// 监听title是安卓原生事件
shang () { // 上传
  // 获取所有的webview对象
  const currentWebview = _this.$mp.page.$getAppWebview();
  // 需要延时，不然拿不到
  setTimeout(function(){
  	// 获取当前页面的webview对象
    var web = currentWebview.children()[0];
    // 监听当前页面webview对象的title
    web.addEventListener('titleUpdate',({title}) => {
      if (title === '上传') { 
        uni.showLoading({ // 动画
            title: '上传中' 
        });
        // title!=='上传文件'
      } else if (title&&!title.includes('上传文件')) {
        uni.hideLoading(); // 关闭动画
        uni.showToast({ // 提示框
            title: title,
            icon: 'none',
            duration: 1000
        });
      }
      if (title === '取消') {
        uni.showToast({ // 提示框
            title: '取消上传',
            icon: 'none',
            duration: 1000
        });
      }
    },false)
  },200)
}

uniapp监听webview值的变动（引入页面的title）

猜你喜欢