APICloud打包Vue單頁應用

　　APICloud新建項目後，會生成如下目錄結構

其中index.html是入口文件，而vue-cli打包生成的文件是在dist目錄下

├─dist
│ └─static
│ 　　 ├─css
│ 　　 └─js

│ └─index.html

把dist目錄中的static文件夾和index.html複製到apicloud的項目文件中便可，覆蓋原來的index.html。最終apicloud的目錄結構只是比原來多了一個static目錄。

 

vue項目中須要作以下配置，config/index.js中須要把build的assetsPublicPath屬性由原來的 /改爲 ./，

index.html添加一些代碼用於處理物理返回鍵：

<!--引用apicloud的腳本-->
<script src="script/api.js"></script>

<div id="app"></div>
<!-- built files will be auto injected -->

<script>
  //這裏處理物理返回鍵，避免打包後點擊一次直接退出應用
  window.apiready = function () {
    var timer = 0
    api.addEventListener({
      name: 'keyback'
    }, function (ret, err) {
      var currentTime = +new Date()
      api.historyBack(function (ret, err) {
        if (!ret.status) {
          if ((currentTime - timer) > 2000) {
            timer = currentTime
            api.toast({
              msg: '再按一次返回鍵退出app',
              duration: 2000,
              location: 'bottom'
            })
          } else {
            api.closeWidget({
              id: 'A6089289836112', //這裏改爲本身的應用ID
              retData: {name: 'closeWidget'},
              silent: true
            })
          }
        }
      })
    })
  }
</script>

這樣打包之後代碼還存在index.html裏，引用腳本的路徑也是apicloud目錄下的。以後把dist目錄下的文件複製過去就好了。如此一來就能暢享vue帶來的高效開發了。

 

最後，若是想調用apicloud的組件，能夠在vue的組件中這樣寫：

　　<button @click="clickHandler">點擊試試</button>

    mounted() {

    },
    methods: {
      clickHandler() {
        //調用apicloud的組件
        var photoSelect = api.require('photoSelect');
        photoSelect.openAblum({
          permitnum: '9'
        }, function (ret, err) {
          if (ret) {
            alert(JSON.stringify(ret));
          } else {
            alert(JSON.stringify(err));
          }
        });
      }
    },
    created() {

    }