初次使用apicloud

先註冊，然後創建應用，然後用微信掃某個二維碼，在瀏覽器打開鏈接下載app，看一下

然後下載TortoiseSVN，新建文件夾，隨便取個名字demo1，然後右鍵彈出的菜單裏看一下SVN Checkout怎麼把代碼拉到這個新建文件夾名爲demo1裏面，按照提示教程，輸入用戶名即註冊apicloud的郵箱，然後密碼是點擊獲取分支密碼獲得。之後等一下就可以看到提示，然後顯示文件一個一個被下載下來了。

之後稍微修改一下，測試一下commit文件是怎麼樣的。右鍵單擊demo1，點擊SVN Commit，點擊ok，version2生成了,可以點擊merge試試，然後選擇demo1目錄。之後再看網頁就可以看到一些記錄。然後點擊雲編譯，配置一下生成二維碼掃一下在手機上看下是不是成功的。

下載開發工具，APICloud Studio 2
想要用真機測試。在菜單欄找到幫助-WIFI真機同步IP和端口，之後根據提示要下載APPLoader到真機上。
連接上後，在菜單中找項目-運行,這樣手機上就能看到效果了。

下一步，修改一些文件，比如一個button按扭，點擊跳轉到下一個html頁面。
一開始嘗試看看這樣行不行

<button onclick="goto()">click  goto side page</button>
<script>
    function goto() {
        console.log('goto')
        api.openFrame({
            name: 'side',
            url: './side.html',
            bounces: true,
            rect: { // 推薦使用Margin佈局，用於適配屏幕的動態變化
                marginTop: headerH, // main頁面距離win頂部的高度
                marginBottom: footerH, // main頁面距離win底部的高度
                w: 'auto' // main頁面的寬度 自適應屏幕寬度
            }
        });
    }
</script>

結果根本不行

那麼查文檔，在前端框架-APICloud前端框架裏面，.dom()和.addEvt()，經過測試，這樣的代碼可行

<button id="btn001">click  goto side page</button>
<script>
    var btn = $api.dom('#btn001')
    $api.addEvt(btn, 'click', function() {
        console.log('walawala')
    })
</script>

下一步看一下怎麼跳轉網頁？在html文件夾下創建文件side.html，然後隨便寫點什麼
只寫有測試使用openWin, closeWin，頁面糊了。暫時不明白什麼情況，等後續再去了解。
在main.html中這麼寫

<script>
    var btn = $api.dom('#btn001')
    $api.addEvt(btn, 'click', function() {
        console.log('walawala')
        api.openFrame({
            name: 'side',
            url: './side.html',
            pageParam: {
                name: 'test'
            },
        })
        console.log('hahahaha')
        api.closeFrame({
            name: 'main'
        });
    })
</script>

這樣的話基本就可以實現跳轉頁面了

然後這個內容好像位置不太對。可以參考一下index.html裏面怎麼配置的。嘗試使用vue.js作爲前端框架

<script src="../script/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#vueInstance',
    data: {

    },
    methods: {
      vuebtn: function(event) {
        console.log('vue button works')
      }
    }
  })
  console.log("vm",vm)
</script>

控制檯成功輸出了

那麼怎麼樣使用Single File Components？

怎麼樣結合vue-cli呢。 今天就到這裏，下次再試吧。應該新建文件夾試試。