7、Vue Cli+ApiCloud

1、api.js （參考）

頂部註釋：

底部註釋：

2、導入

 效果：

 繼續使用：

 運行環境：用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 引用，看成靜態資源處理）