初试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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
使用console进行性能测试
Apr 27 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
js实现窗口全屏示例详解
Sep 17 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 zend解密软件绿色版测试可用
2008/04/14 PHP
php相当简单的分页类
2008/10/02 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
php 分库分表hash算法
2009/11/12 PHP
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python实现CET查分的方法
2015/03/10 Python
详解Python字符串对象的实现
2015/12/24 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
在python shell中运行python文件的实现
2019/12/21 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
学习python需要有编程基础吗
2020/06/02 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
css sprite简单实例
2016/05/23 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
报关员个人职业生涯规划书
2014/03/12 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
高考学习决心书
2015/02/04 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL