初试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来判断

实现产品之间互跳

如要从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最好是第三方浏览器打开。
代码以下：

<div class="infocon" v-html="info.content" @click="handleA($event)"></div>

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