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

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

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

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

接口如何跨域

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

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

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

{
...
"proxy": {
    "/api": {
      "target": "http://www.15014759268.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)境一般沒(méi)有跨域問(wèn)題.

var apiUrl = "";


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


})

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

Chrome跨域調(diào)試

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

在PC調(diào)試數(shù)據(jù),界面等內(nèi)容,需要打開(kā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)試需要注意的是,微信里面的緩存很?chē)?yán)重,每次修改,需要給修改的js引用,后面增加?t=時(shí)間戳之類(lèi)的方式,來(lái)確保腳本的更新.

去除腳本緩存

例如:

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

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

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

去除模板緩存

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

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