新手使用BUI開發(fā)中常見的問題, 如果這里找不到你的答案, 可以像我們提問, 問題中盡量描述清楚你要實(shí)現(xiàn)的功能及效果, 我們會(huì)盡快答復(fù).
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);
});
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ù).
Q: 安卓9的系統(tǒng)下,打開link輕應(yīng)用市場(chǎng)會(huì)有頁面白屏.
在index.js 加入這段代碼可以解決白屏問題.
答:
$(function(){
var clientWidth = document.documentElement.clientWidth;
if( clientWidth == 0 ){
window.location.reload();
}
})
更多建議: