七、Vue Cli+ApiCloud

一、api.js （參考）

頂部注釋：

底部注釋：

二、導入

 效果：

 繼續使用：

 運行環境：用APP打開，瀏覽器沒有api對象，只有APP運行環境才有API對象

代碼如下：

<template>
  <div>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
  </div>
</template>

<script>

import $api from '@/components/api.js'

export default {
  name: "test",
  data() {
    return {
      show: true
    };
  },created()
  {
      alert("頁面加載完畢之前執行，執行順序：父組件-子組件")
  },
  methods: {
    handleClick: function() {

        window.console.log($api);

        $api.toast('提示','網絡已連接',2000);

    }
  }
};
</script>

APP環境中的瀏覽器，通過android原生往瀏覽器注入api對象，

這個API對象調用apicloud的原生的API接口，實現與手機硬件交互的原生能力。

 

引入模塊：

如圖：

 

 

代碼如下：

<template>
  <div>
    <header>
  </header>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
  </div>
</template>

<script>

import $api from '@/components/api.js'

export default {
  name: "test",
  data() {
    return {
      show: true
    };
  },created()
  {
   
      //添加一個1S的延時

      setTimeout(()=>{
        this.init();
      },300)


  },
  methods: {
    handleClick: function() {

        //this.init();

        window.console.log($api);

        //$api.toast('提示','網絡已連接',2000);
        
        

    },init:function()
    {
        
              var browser = window.api.require('webBrowser');
              browser.openView({
                url: 'http://fj.e7xx.cn/app/index.php?i=1&c=entry&eid=9'
                ,rect: {
                      x: 0,
                      y: $api.dom('header').offsetHeight,
                      w: 'auto',
                      h: 'auto'
                  }
              }, function(ret, err) {
                  window.console.log(ret);
                  window.console.log(err);
              });
              //雙擊退出APP
       
    }
  }
};
</script>

 window.apiready = function () {}可行的

 但是如果 index.html 放入api.css和style.css   就不執行了 ，哪怕加延遲  都不可以。

 

 

 

第二種簡單方式（script src 引用，當作靜態資源處理）