初試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);
}