您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

uniapp系列之webview加载html 动态创建webview 非url加载

发布时间：2022-05-18 23:26:55编辑：雪饮阅读（）

昨天做那个支付宝支付手机网站版，但是前端是uniapp实现的，而且后端这边是用fastadmin的一个epay支付插件的，里面已经集成了多种支付场景，所以我只需要调整下传参就能快速实现手机网站的支付宝支付（有点佩服），但前端反应只能在pc端（前端刚开始应该是在hbuilder的内置浏览器或者直接就是npm run dev类似环境运行的pc端）提交表单form（这里发现实现的支付宝手机网站支付返回的是form表单），虽然能在pc端运行，但是pc端肯定不能唤醒手机支付宝啊。。。，但是理论来说一个表单而已，提交它就行了（看了action地址，好像就是直接提交就行的），前端排查半天没有搞定，第二天也就是今天我帮前端看了下，原来他里面在手机端运行时候document都是undefined...，所以我这里采用了如下方案，不过我这个方案是基于html5+(html plus)环境：

 try{
 var wv = plus.webview.create("","custom-webview",{
  plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
       'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
  top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
  })
  //wv.loadURL("https://www.baidu.com")
wv.loadData(obj.orderInfo);

  var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
  currentWebview.append(wv);//
 }
 catch(e){
 console.log("e",e);
 }

其中这里obj.orderInfo是一个字符串就是form表单代码（还包含该表单提交的代码，即只要包含该代码于webview的html中则自动提交了）