乐趣区

初试vuecli使用HBuilderx打包app的坑

jiezi

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

退出移动版