初试vue-cli使用HBuilderx打包app的坑

打包后在index.html`

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>`的content里加一句`viewport-fit=cover`

使用plus.createWebview创建webview打开第三方链接出现的诸多问题

①在打开的连接中执行一段脚本

$this.payw.evalJS(script);

安卓测试无错，iPhone不执行

解决：

将evalJS代码放在loaded里

$this.payw.addEventListener('loaded',function () {
    $this.payw.evalJS(string);
   });

②loaded内代码执行了两次，导致页面跳转两次

Dcloud的锅，解决办法：

var isLoaded = false;
   $this.payw.addEventListener('loaded',function () {
    if(isLoaded){return true}
    isLoaded=true;
    $this.payw.evalJS(string);
   });

③使用loading监听页面跳转，跳转到执行成功页面即close当前webview，但IOS下监听无效

Dcloud的锅，loading中webview.getUrl获取的永远是上一步的url，而不是当前页面的真正url

一开始想更换loaded，后来发现在IOS上loaded有些webview只执行一次，有些则能每次跳转都执行，不太稳定，最终决定使用progressChanged

解决方案：使用loaded来evalJS，progressChanged来对比地址

var isLoaded = false;
payw.addEventListener('loaded',function () {
  if(isLoaded){return true}
  isLoaded=true;
  payw.evalJS(string);
})
payw.addEventListener('progressChanged',function () {
  // 监听是否成功
  console.log(payw.getURL())
  var callbacklink = payw.getURL().split('?')[0];
  // if(callbacklink === successUrl) {
  //  plus.webview.close(payw)
  //  console.log('success');
  // }
  // if(callbacklink === failUrl) {
  //  // 支付失败
  //  plus.webview.close(payw);
  //  console.log('fail');
  // }
  // if(callbacklink === cancelUrl) {
  //  plus.webview.close(payw)
  //  console.log('cancel');
  // }
})

④progressChanged也会引发执行多次的问题

可以在判断成功后remove掉事件

$this.fbsharew.addEventListener('progressChanged', handlePChange );
 function handlePChange (e) {
 if($this.fbsharew.getURL().split('?')[0] === finishlink) {
  $this.fbsharew.removeEventListener('progressChanged', handlePChange );
 }
}

处理安卓返回键，使返回时关闭所有webview

// 写在mounted内
// 处理安卓返回键问题
  plus.key.removeEventListener('backbutton', handleBack );
  plus.key.addEventListener('backbutton', handleBack )								 
 2/3   首页 上一页 1 2 3 下一页 尾页