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


Posted in Javascript onJuly 17, 2019

微信授权登录提示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来判断

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

Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 #Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 #Javascript
js getBoundingClientRect使用方法详解
Jul 17 #Javascript
深入了解Hybrid App技术的相关知识
Jul 17 #Javascript
Vue发布项目实例讲解
Jul 17 #Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 #Javascript
百度小程序自定义通用toast组件
Jul 17 #Javascript
You might like
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
layui表格数据重载
2019/07/27 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
学习python的几条建议分享
2013/02/10 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
UML设计模式笔试题
2014/06/07 面试题
工商管理实习生自我鉴定范文
2013/12/18 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
离婚协议书格式
2014/11/21 职场文书
初中成绩单评语
2014/12/29 职场文书
骨干教师考核评语
2014/12/31 职场文书
看雷锋电影观后感
2015/06/10 职场文书
红与黑读书笔记
2015/06/29 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS