BUI 調(diào)試

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

自動(dòng)化部署工程

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

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

接口如何跨域

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

假設(shè)請(qǐng)求的接口地址為: http://m.hgci.cn/api/getDetail/id/123 可以這樣配置 proxy :

"/api": 為請(qǐng)求接口的二級(jí)目錄, "target": "http://m.hgci.cn"

{
...
"proxy": {
    "/api": {
      "target": "http://m.hgci.cn",
      "changeOrigin":true,
      "ssl": false
    }
  }
...
}

js:

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

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


})

建議可以把url前部分作為變量配置項(xiàng), 調(diào)試的時(shí)候?yàn)榭? 打包正式環(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ā)者工具, 開啟模擬手機(jī)效果, 這樣才能模擬手機(jī)的滑動(dòng)拖拽事件, 需要刷新一次.

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

Debugtool調(diào)試

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

• 安卓版下載
• IOS版下載

微信調(diào)試緩存

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

去除腳本緩存

例如:

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

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

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

去除模板緩存

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

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