BUI 常見問題

2020-08-11 19:53 更新

前言

新手使用BUI開發(fā)中常見的問題, 如果這里找不到你的答案, 可以像我們提問, 問題中盡量描述清楚你要實(shí)現(xiàn)的功能及效果, 我們會(huì)盡快答復(fù).

我要提問

數(shù)據(jù)問題


Q: 接口請(qǐng)求如何跨域?

答: 調(diào)試

該問題在調(diào)試一節(jié)已經(jīng)給出方案.

功能問題


Q: 代碼已經(jīng)寫在 bui.ready里面,為何調(diào)試不了原生功能? webapp版本不用了解.

答:

1. 設(shè)置 bui.isWebapp= false;
2. 確認(rèn)你的 bui.js 是帶原生功能版本; 輸出 console.log(bui.currentPlatform).
3. 你的方法都在 bui.ready 里面

Q: BUI 為什么需要計(jì)算main 的高度?

答:

上中下是移動(dòng)端常見的一種結(jié)構(gòu),當(dāng)然實(shí)現(xiàn)這種布局的方式有很多, 比如,
第1種, 你可以使用絕對(duì)定位或者固定定位的方式, 固定定位以后,中間的內(nèi)容的坐標(biāo)就變成0; 我們可以給中間內(nèi)容加上padding的方式. 這樣當(dāng)頭部變高或者不要頭部的時(shí)候, 或者ios 在viewport下不支持fixed的情況, 這種方式帶來的弊端就比較明顯了.這也是BT最早的UI采用的方式,最終還是得通過計(jì)算的方式.
第2種, 自從有了css3以后,我們有flex布局可以實(shí)現(xiàn)對(duì)頁面的垂直布局有了很好的支持,我可以頭部固定,底部固定,中間自適應(yīng), 可惜的是這種布局在移動(dòng)終端的適應(yīng)性有局限性, 低配的手機(jī)都不支持,就連微信都不支持.


第3種, 也就是我們采用的計(jì)算的方式,在頁面初始化前先進(jìn)行計(jì)算,固定好他們各自該在的位置.你中間的內(nèi)容也就能夠自適應(yīng),它沒有第1種的ios兼容問題,用戶也不用去管用不用設(shè)置padding, 也沒有第2種的兼容問題.他只提供一個(gè)框架上的容器,你不需要的時(shí)候就刪除對(duì)應(yīng)的標(biāo)簽即可. 雖然需要?jiǎng)討B(tài)計(jì)算耗一點(diǎn)性能,但這個(gè)對(duì)于頁面初始化之前絲毫沒有影響.另外它還可以解決,當(dāng)頁面跳轉(zhuǎn)導(dǎo)致的webview高度問題.
當(dāng)然,你如果不喜歡這種計(jì)算的方式,你也可以使用自己認(rèn)為合適的方式,不使用 bui-page header main footer 這幾個(gè)保留樣式名就行.

Q: iconfont 圖標(biāo)沖突問題

答:

引入第三方 iconfont 以后,里面的字體圖標(biāo)不能以 .icon- 命名, 需要全局修改.


默認(rèn)bui使用的字體圖標(biāo)名字為: font-family:"icon";
并且所有 .icon 或 .icon- 會(huì)自動(dòng)引用默認(rèn)字體圖標(biāo)的樣式,
如果要自定義一個(gè)圖標(biāo), 可以以 icons- 開頭,避免沖突.

盡量使用默認(rèn)圖標(biāo), 點(diǎn)擊查看所有圖標(biāo)

使用unicode編碼圖標(biāo)示例:

<i class="icon"></i>


自定義樣式名
<i class="icon-alert"></i>

Q: 如何打電話,發(fā)短信,發(fā)郵件?

答:

打電話
bui.unit.tel("10086");


發(fā)送短信
bui.unit.sms("10086","CZMM");


發(fā)郵件
bui.unit.mailto({
  email: "bui@easybui.com",
  cc: "抄送",
  subject: "郵件標(biāo)題",
  body: "郵件內(nèi)容"
});

方案2: 可以保持跟a標(biāo)簽調(diào)用的方式一致, 前提是當(dāng)前按鈕已經(jīng)綁定靜態(tài)跳轉(zhuǎn)

<div class="bui-btn" href="tel:10086">打電話</div>

Q: 微信調(diào)試緩存問題?

答:

多頁開發(fā)需要手動(dòng)修改js的引用加入時(shí)間戳
<script src="index.js?t=20180518"></script>


單頁開發(fā)只要在index.js, 重新初始化 window.loader, 動(dòng)態(tài)加載的模塊就會(huì)自動(dòng)加上時(shí)間戳, 這句需要在 `window.router = bui.router()` 初始化之前


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

Q: 應(yīng)該使用tap事件還是click事件?

答:

bui的開發(fā)推薦全部使用click事件, tap事件在移動(dòng)端會(huì)存在一些兼容問題.

Q: input被輸入法遮擋問題?

答:





方案1: 輸入框在底部用方案1


$('.bui-input').on('click', function () {
    // 使用定時(shí)器是為了延遲計(jì)算
    setTimeout(function(){
        bui.init({
            id: router.$(".bui-page")
        })


      router.$(".bui-page")[0].scrollIntoView();


    },300);
});
// 指定某個(gè)input,避免每次都要重復(fù)計(jì)算
$('input').on('blur', function () {
    // 使用定時(shí)器是為了延遲計(jì)算
    setTimeout(function(){
        bui.init({
            id: router.$(".bui-page")
        })


      router.$(".bui-page")[0].scrollIntoView();
    },300);
});


方案2: 頂部會(huì)看不到


$('.bui-input').on('click', function () {
    $("html,body").css("overflow","scroll");
    var target = this;
    // 使用定時(shí)器是為了緩沖
    setTimeout(function(){
      target.scrollIntoView(true);
    },100);
});

單頁開發(fā)問題


B頁面跟D頁面,都跳轉(zhuǎn)到C頁面, 那C頁面如何能夠確保后退到B頁面?

路由1: A-&B&-C , 路由2: A&B&D&C

答:

指定后退到B模塊, B模塊如果不是自定義名稱, 則輸入B頁面的路徑名,無后綴.
router.back({
  name: "B"
})

Q: 如何跳轉(zhuǎn)錨點(diǎn)?

單頁里面的錨點(diǎn)已經(jīng)更改成模塊加載, 錨點(diǎn)跳轉(zhuǎn)是禁止的.可以利用 scrollTop = 某個(gè)高度來實(shí)現(xiàn), 首先你需要知道你當(dāng)前的滾動(dòng)條是在哪里? 正常滾動(dòng)條是在main標(biāo)簽, tab 控件的滾動(dòng)是在 .bui-tab-main & ul & li 層. list 控件的滾動(dòng)條則在 bui-scroll

答:

main標(biāo)簽為例.

<div class="bui-page">
  <header class="bui-bar">
    <div class="bui-bar-main">
      錨點(diǎn)跳轉(zhuǎn)
    </div>
  </header>
  <main class="main-scroll">
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    內(nèi)容 <br>
    <div id="jump">我在這里</div>
  </main>
</div>

// 返回頂部
document.querySelector(".main-scroll").scrollTop = 0;


// 跳轉(zhuǎn)指定id
var jumpTop = document.querySelector("#jump").offsetTop;
document.querySelector(".main-scroll").scrollTop = jumpTop;

Q: 是否可以在單頁的.html頁面直接引入樣式,腳本及初始化

可以,但是要注意的是, 樣式會(huì)影響全局, 腳本引入跟初始化不會(huì)被緩存, 每次都是新的, 也無法拋出共享給其它頁面調(diào)用.

答: 我們更推薦使用同名的js,在define里面初始化.

loader.define(function(){
  // 在這里初始化你的腳本
})

Q: a 標(biāo)簽跳轉(zhuǎn)跟 bui.load 的區(qū)別?

答:

當(dāng) bui.isWebapp=true; 的時(shí)候,其實(shí)是一樣的, 但使用 bui.load 會(huì)多一種可能性, 可以隨狀態(tài)變成原生跳轉(zhuǎn).


而當(dāng)綁定按鈕及A標(biāo)簽的靜態(tài)跳轉(zhuǎn)以后,
bui.btn({id:".bui-page",handle:".bui-btn,a"}).load();
a標(biāo)簽跳轉(zhuǎn) = bui.load 跳轉(zhuǎn).

需要注意的是 a 標(biāo)簽?zāi)J(rèn)點(diǎn)擊會(huì)受樣式的偽類狀態(tài)影響, 默認(rèn)我們使用 div 標(biāo)簽?zāi)M.

Q: 頁面跳轉(zhuǎn)的靜態(tài)屬性傳參?

答: 靜態(tài)傳過去的參數(shù)必須是一個(gè)標(biāo)準(zhǔn)的json字符

  html += "<li href='pages/ui_controls/bui.hint.html' param='{\"id\":123}'>跳轉(zhuǎn)傳參示例</li>";

控件問題


Q: 如何全局修改請(qǐng)求?

正常我們開始一個(gè)項(xiàng)目前, 一般會(huì)封裝一個(gè)統(tǒng)一的 ajax請(qǐng)求方法, 這樣便于后面的修改, 但如果萬一你沒有封裝, 并且已經(jīng)開發(fā)了一大半了, 那就需要使用全局修改的方式.

答: 比方: 增加請(qǐng)求頭部認(rèn)證

bui.config.ajax = {
  headers: {
    token: ""
  }
}

這個(gè)全局配置,每個(gè)控件都有一個(gè),配置以后,會(huì)覆蓋控件的默認(rèn)參數(shù).

樣式問題

Bingotouch,Link輕應(yīng)用開發(fā)


Q: 安卓9的系統(tǒng)下,打開link輕應(yīng)用市場(chǎng)會(huì)有頁面白屏.

在index.js 加入這段代碼可以解決白屏問題.

答:

$(function(){
  var clientWidth = document.documentElement.clientWidth;
  if( clientWidth == 0 ){
    window.location.reload();
  }
})
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)