初试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

转换写法，改为

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`

`的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

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

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

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

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

后台添加语言仅修改文字，不要删除标签
By creating your account, you agree to the Terms of Use and Privacy Policy of this site.

这段html标签写为：

事件处理：

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

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

实现产品之间互跳

如要从http://localhost:8080/#/products_list?id=3跳转到http://localhost:8080/#/products_list?id=2，请注意，id不同，每次进入页面会根据id值请求产品信息。
这种情况使用

this.$router.push({
    path: '/products_list',
    query: {
        id: 2
    }
})

实际上url变化，但页面不会变化，因为路由地址本质上没有改变。
这种情况需要使用watch来监听路由：

watch: {
    '$route':function (route) {
        this.getproductslist() // 路由一旦有变化就重新调接口获取产品信息
    }
}

实现welcome目录下的页面登录后不可返回

如图所示：

返回的情况包括右划/页面返回键/安卓返回键，需要在多处判断，干脆直接从路由着手，设置进入页面前判断是否登录，未登录状态才可以进入，否则不响应。
代码如下：

router.beforeEach((to, from, next) => {
  if((to.name === 'Signin' ||
      to.name === 'Valimail' ||
      to.name === 'Signup'||
      to.name === 'Welcome') &&
      localStorage.getItem('token').length > 0) {
    next(false)
  }else {
    next()
  }
})

实现动态文本点击a标签使用第三方浏览器打开

这里的思路和给动态html绑定事件是一样的，判断点击部分是a标签，获取href，然后执行5+的runtime方法，ios默认打开safari，安卓如果没有设置默认浏览器会跳出选择默认浏览器的遮罩，样式不丑，体验很原生。
其实还有一种办法是判断完使用iframe打开，但有些网站会禁止iframe，为了规避bug最好是第三方浏览器打开。
代码如下：

handleA (event) {
    event.preventDefault()
    event.stopPropagation()
    let isA = event.target.nodeName === 'A';
    let href = event.target.getAttribute('href');
    if(isA)
        plus.runtime.openURL(href);
}