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

 更新时间:2019年07月17日 09:17:22   作者:sweetea  
这篇文章主要介绍了初试vue-cli使用HBuilderx打包app的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

微信授权登录提示code-2

appid和appsecret应该是移动应用,而非网页应用

微信授权登录提示code:-100/自定义基座无法微信登录和分享

开发者账号配置的应用签名应该是md5加密后的值,而不是原字符串

生产环境proxyTable不生效,导致接口500

两种解决办法:
①入口文件使用网络地址,且和接口在同一域名下
②(推荐)

入口文件依旧是index.html

在config/prod.env和config/dev.env下添加API_ROOT

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"http://cross.precision-wechat.com"'
}

在main.js里设置baseUrl

axios.defaults.baseURL = process.env.API_ROOT

css内背景图片使用相对路径,打包测试不出现

修改config/index,js内的这一行

// Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',

import进来的样式表没有被lib-flexible转为rem

转换写法,改为<style scoped src='../../assets/css/formReset.css'></style>

ApplePay沙盒测试登录app store失败

不能直接登录app store,需要在点击付款时登录沙盒账号

微博分享闪退

Dcloud的锅,在授权失败时授权层会闪现闪退,授权失败有两种情况,1网络问题授权失败2你没安装新浪微博,要再加一层判断,如果授权失败则进行提示。

plus.share.getServices(function(s){
      s.forEach(function(item) {
       if(item.id === 'sinaweibo') {
        $this.shares = item;
       }
      });
      if($this.shares.authenticated) {
       // 已授权
       $this.shares.send($this.sinashareMsg, function() {
        plus.nativeUI.toast($this.langs.SHARE_SUCCESS);
       }, function(e) {
        plus.nativeUI.toast($this.langs.SHARE_FAIL);
       })
      }else {
       // 未授权
       $this.shares.authorize(function() {
        $this.shares.send($this.sinashareMsg, function() {
         plus.nativeUI.toast($this.langs.SHARE_SUCCESS);
        }, function(e) {
         plus.nativeUI.toast($this.langs.SHARE_FAIL);
        })
       }, function(e) {
        // 授权失败
        plus.nativeUI.toast($this.langs.SHARE_FAIL);
       })
      }
     }, function(e){
      plus.nativeUI.toast(e.message);
     });

IOS真机测试,el-input光标全满,输入时错位

设置line-height=字体大小

iPhone X底部有个安全区,导致fixed+bottom的导航没有保持在最底部

打包后在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 )
  function handleBack() {
   var wvs=plus.webview.all();
   for(var i=0;i<wvs.length;i++){
    if(wvs[i].getURL() !== plus.webview.currentWebview().getURL()) {
     plus.webview.close(wvs[i]);
     $this.switchUrl();// 判断是后退还是回到其他页面的方法
    }
   }
  }

动态添加的HTML节点如何绑定事件

有这个需求是因为有多语言版本,文本从后台读取。

比如

By creating your account, you agree to the Terms of Use and Privacy Policy of this site.

放在底部,点击其他地方无反应,但点击Terms of Use或者Privacy Policy则要出现条款浮层

解决办法:

后台添加语言仅修改文字,不要删除标签

<p>By creating your account, you agree to the<span data-id="0"> Terms of Use </span>and<span data-id="1"> Privacy Policy </span>of this site.</p>

这段html标签写为:

<div class="terms" @click="popup($event)" v-html="langs.REGISTER_FOOTER"></div>

事件处理:

popup (event) {
 let id = event.target.getAttribute('data-id')
 if(id === '0') {
  console.log('Terms of Use')
 }
 if(id === '1') {
  console.log('Privacy Policy')
 }
}

只有一个点击范围的可以直接使用<span>标签,通过event.target.nodeName来判断

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue3父子组件传值 双向绑定及注意问题小结

    vue3父子组件传值 双向绑定及注意问题小结

    这篇文章主要介绍了Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,本文结合示例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Vue3使用Suspense优雅地处理异步组件加载的示例代码

    Vue3使用Suspense优雅地处理异步组件加载的示例代码

    Vue3是Vue.js的最新版本,它带来了许多令人兴奋的新特性和改进,其中一个重要的特性是Suspense,它为我们提供了一种优雅地处理异步组件加载和错误处理的方式,本文给大家介绍了Vue3使用Suspense优雅地处理异步组件加载的示例,需要的朋友可以参考下
    2024-01-01
  • IDEA创建Vue项目的两种方式总结

    IDEA创建Vue项目的两种方式总结

    这篇文章主要介绍了IDEA创建Vue项目的两种方式总结,具有很好的参考价值,希望对大家有所帮助。
    2023-04-04
  • vue+golang实现上传微信头像功能

    vue+golang实现上传微信头像功能

    这篇文章主要介绍了vue+golang实现上传微信头像功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • Vue3使用vue-office插件实现word预览功能

    Vue3使用vue-office插件实现word预览功能

    vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库,支持vue2和vue3,这篇文章主要介绍了Vue3使用vue-office插件实现word预览功能,需要的朋友可以参考下
    2024-04-04
  • 详解vue中使用transition和animation的实例代码

    详解vue中使用transition和animation的实例代码

    这篇文章主要介绍了详解vue中使用transition和animation的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vue实现Header渐隐渐现效果的实例代码

    Vue实现Header渐隐渐现效果的实例代码

    这篇文章主要介绍了Vue实现Header渐隐渐现效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue 实现滑动块解锁示例详解

    vue 实现滑动块解锁示例详解

    这篇文章主要为大家介绍了vue 实现滑动块解锁示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue3项目keepAlive使用方法详解

    vue3项目keepAlive使用方法详解

    keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度,这篇文章主要介绍了vue3项目keepAlive使用方法,主要将keepaliev在vue3.0中的用法,需要的朋友可以参考下
    2024-03-03
  • vue+element+springboot实现文件下载进度条展现功能示例

    vue+element+springboot实现文件下载进度条展现功能示例

    本文主要介绍了vue + element-ui + springboot 实现文件下载进度条展现功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论