BUI 調(diào)試

關(guān)于數(shù)據(jù)的調(diào)試,只需要打開跨域的Chrome就可以直接預(yù)覽效果了,但在手機調(diào)試就需要部署工程,并且還要解決跨域問題, 這些通過自動化部署工程,簡單配置一下就可以了.

自動化部署工程

使用buijs創(chuàng)建的工程,安裝好依賴以后,執(zhí)行npm run dev,就會起一個服務(wù)器了.

## 安裝依賴
$ npm install
## 部署環(huán)境并打開瀏覽器
$ npm run dev

接口如何跨域

配合自動化構(gòu)建工程, 打開根目錄下的 app.json ,里面有個鍵值 proxy 的對象.

假設(shè)請求的接口地址為: http://o2fo.com/api/getDetail/id/123 可以這樣配置 proxy :

"/api": 為請求接口的二級目錄, "target": "http://o2fo.com"

{
...
"proxy": {
    "/api": {
      "target": "http://o2fo.com",
      "changeOrigin":true,
      "ssl": false
    }
  }
...
}

js:

注意: ajax請求的時候請使用相對路徑,這樣代理才會正確轉(zhuǎn)發(fā).

bui.ajax({
    url: "api/getDetail/id/123"
}).then(function(res){


})

建議可以把url前部分作為變量配置項, 調(diào)試的時候為空, 打包正式環(huán)境一般沒有跨域問題.

var apiUrl = "";


bui.ajax({
    url: apiUrl+ "api/getDetail/id/123"
}).then(function(res){


})

關(guān)于代理的更多配置,可以查看 http-proxy-middleware 的使用說明.

Chrome跨域調(diào)試

打開chrome 開發(fā)者工具, 開啟模擬手機效果, 這樣才能模擬手機的滑動拖拽事件, 需要刷新一次.

在PC調(diào)試數(shù)據(jù),界面等內(nèi)容,需要打開跨域的chrome, 搜索chrome 跨域

Debugtool調(diào)試

DebugTool是手機上的一個應(yīng)用,可以預(yù)覽遠程地址,并輸出console.log的相關(guān)信息, 必須使用第一種跨域方式,才能在手機預(yù)覽.

• 安卓版下載
• IOS版下載

微信調(diào)試緩存

微信調(diào)試需要注意的是,微信里面的緩存很嚴重,每次修改,需要給修改的js引用,后面增加?t=時間戳之類的方式,來確保腳本的更新.

去除腳本緩存

例如:

<script src="bui.js?t=2016073101"></script>

如果你使用的是單頁模塊化開發(fā), 重新初始化window.loader設(shè)置緩存參數(shù)為false, 加載的模塊便會采用時間戳的方式加載.

window.loader = bui.loader({cache: false});

去除模板緩存

如果你的頁面是單頁,則在路由初始化的時候,加上cache:false; 如果是多頁,則在地址欄上,加上?t=時間戳

router.init({
    ...
    cache: false
    ...
})