帮助中心

前言

新手使用BUI开发中常见的问题, 如果这里找不到你的答案, 可以像我们提问, 问题中尽量描述清楚你要实现的功能及效果, 我们会尽快答复.

我要提问

数据问题

Q: 接口请求如何跨域?

答: 调试

  1. 该问题在调试一节已经给出方案.

功能问题

Q: 代码已经写在 bui.ready里面,为何调试不了原生功能? webapp版本不用了解.

答:

  1. 1. 设置 bui.isWebapp= false;
  2. 2. 确认你的 bui.js 是带原生功能版本; 输出 console.log(bui.currentPlatform).
  3. 3. 你的方法都在 bui.ready 里面

Q: BUI 为什么需要计算main 的高度?

答:

  1. 上中下是移动端常见的一种结构,当然实现这种布局的方式有很多, 比如,
  2. 第1种, 你可以使用绝对定位或者固定定位的方式, 固定定位以后,中间的内容的坐标就变成0; 我们可以给中间内容加上padding的方式. 这样当头部变高或者不要头部的时候, 或者ios 在viewport下不支持fixed的情况, 这种方式带来的弊端就比较明显了.这也是BT最早的UI采用的方式,最终还是得通过计算的方式.
  3. 第2种, 自从有了css3以后,我们有flex布局可以实现对页面的垂直布局有了很好的支持,我可以头部固定,底部固定,中间自适应, 可惜的是这种布局在移动终端的适应性有局限性, 低配的手机都不支持,就连微信都不支持.
  5. 第3种, 也就是我们采用的计算的方式,在页面初始化前先进行计算,固定好他们各自该在的位置.你中间的内容也就能够自适应,它没有第1种的ios兼容问题,用户也不用去管用不用设置padding, 也没有第2种的兼容问题.他只提供一个框架上的容器,你不需要的时候就删除对应的标签即可. 虽然需要动态计算耗一点性能,但这个对于页面初始化之前丝毫没有影响.另外它还可以解决,当页面跳转导致的webview高度问题.
  6. 当然,你如果不喜欢这种计算的方式,你也可以使用自己认为合适的方式,不使用 bui-page header main footer 这几个保留样式名就行.

Q: iconfont 图标冲突问题

答:

  1. 引入第三方 iconfont 以后,里面的字体图标不能以 .icon- 命名, 需要全局修改.
  3. 默认bui使用的字体图标名字为: font-family:"icon";
  4. 并且所有 .icon 或 .icon- 会自动引用默认字体图标的样式,
  5. 如果要自定义一个图标, 可以以 icons- 开头,避免冲突.

尽量使用默认图标, 点击查看所有图标

使用unicode编码图标示例:

  1. <i class="icon">&#xe60a;</i>
  3. 自定义样式名
  4. <i class="icon-alert">&#xe658;</i>

Q: 如何打电话,发短信,发邮件?

答:

  1. 打电话
  2. bui.unit.tel("10086");
  4. 发送短信
  5. bui.unit.sms("10086","CZMM");
  7. 发邮件
  8. bui.unit.mailto({
  9.   email: "bui@easybui.com",
  10.   cc: "抄送",
  11.   subject: "邮件标题",
  12.   body: "邮件内容"
  13. });

方案2: 可以保持跟a标签调用的方式一致, 前提是当前按钮已经绑定静态跳转

  1. <div class="bui-btn" href="tel:10086">打电话</div>

Q: 微信调试缓存问题?

答:

  1. 多页开发需要手动修改js的引用加入时间戳
  2. <script src="index.js?t=20180518"></script>
  4. 单页开发只要在index.js, 重新初始化 window.loader, 动态加载的模块就会自动加上时间戳, 这句需要在 `window.router = bui.router()` 初始化之前
  6. window.loader = bui.loader({
  7.     cache: false
  8. })

Q: 应该使用tap事件还是click事件?

答:

  1. bui的开发推荐全部使用click事件, tap事件在移动端会存在一些兼容问题.

Q: input被输入法遮挡问题?

答:

  3. 方案1: 输入框在底部用方案1
  5. $('.bui-input').on('click', function () {
  6.     // 使用定时器是为了延迟计算
  7.     setTimeout(function(){
  8.         bui.init({
  9.             id: router.$(".bui-page")
  10.         })
  12.       router.$(".bui-page")[0].scrollIntoView();
  14.     },300);
  15. });
  16. // 指定某个input,避免每次都要重复计算
  17. $('input').on('blur', function () {
  18.     // 使用定时器是为了延迟计算
  19.     setTimeout(function(){
  20.         bui.init({
  21.             id: router.$(".bui-page")
  22.         })
  24.       router.$(".bui-page")[0].scrollIntoView();
  25.     },300);
  26. });
  28. 方案2: 顶部会看不到
  30. $('.bui-input').on('click', function () {
  31.     $("html,body").css("overflow","scroll");
  32.     var target = this;
  33.     // 使用定时器是为了缓冲
  34.     setTimeout(function(){
  35.       target.scrollIntoView(true);
  36.     },100);
  37. });

单页开发问题

B页面跟D页面,都跳转到C页面, 那C页面如何能够确保后退到B页面?

路由1: A->b>-C , 路由2: A>B>D>C

答:

  1. 指定后退到B模块, B模块如果不是自定义名称, 则输入B页面的路径名,无后缀.
  2. router.back({
  3.   name: "B"
  4. })

Q: 如何跳转锚点?

单页里面的锚点已经更改成模块加载, 锚点跳转是禁止的.可以利用 scrollTop = 某个高度来实现, 首先你需要知道你当前的滚动条是在哪里? 正常滚动条是在main标签, tab 控件的滚动是在 .bui-tab-main > ul > li 层. list 控件的滚动条则在 bui-scroll

答:

以main标签为例.

  1. <div class="bui-page">
  2.   <header class="bui-bar">
  3.     <div class="bui-bar-main">
  4.       锚点跳转
  5.     </div>
  6.   </header>
  7.   <main class="main-scroll">
  8.     内容 <br>  
  9.     内容 <br>  
  10.     内容 <br>  
  11.     内容 <br>  
  12.     内容 <br>  
  13.     内容 <br>  
  14.     内容 <br>  
  15.     内容 <br>  
  16.     内容 <br>  
  17.     内容 <br>  
  18.     <div id="jump">我在这里</div>
  19.   </main>
  20. </div>
  1. // 返回顶部
  2. document.querySelector(".main-scroll").scrollTop = 0;
  4. // 跳转指定id
  5. var jumpTop = document.querySelector("#jump").offsetTop;
  6. document.querySelector(".main-scroll").scrollTop = jumpTop;

Q: 是否可以在单页的.html页面直接引入样式,脚本及初始化

可以,但是要注意的是, 样式会影响全局, 脚本引入跟初始化不会被缓存, 每次都是新的, 也无法抛出共享给其它页面调用.

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

  1. loader.define(function(){
  2.   // 在这里初始化你的脚本  
  3. })

Q: a 标签跳转跟 bui.load 的区别?

答:

  1. 当 bui.isWebapp=true; 的时候,其实是一样的, 但使用 bui.load 会多一种可能性, 可以随状态变成原生跳转.
  3. 而当绑定按钮及A标签的静态跳转以后,
  4. bui.btn({id:".bui-page",handle:".bui-btn,a"}).load();
  5. a标签跳转 = bui.load 跳转.

需要注意的是 a 标签默认点击会受样式的伪类状态影响, 默认我们使用 div 标签模拟.

Q: 页面跳转的静态属性传参?

答: 静态传过去的参数必须是一个标准的json字符

  1.   html += "<li href='pages/ui_controls/bui.hint.html' param='{\"id\":123}'>跳转传参示例</li>";

控件问题

Q: 如何全局修改请求?

正常我们开始一个项目前, 一般会封装一个统一的 ajax请求方法, 这样便于后面的修改, 但如果万一你没有封装, 并且已经开发了一大半了, 那就需要使用全局修改的方式.

答: 比方: 增加请求头部认证

  1. bui.config.ajax = {
  2.   headers: {
  3.     token: ""
  4.   }
  5. }

这个全局配置,每个控件都有一个,配置以后,会覆盖控件的默认参数.

样式问题

Bingotouch,Link轻应用开发

Q: 安卓9的系统下,打开link轻应用市场会有页面白屏.

在index.js 加入这段代码可以解决白屏问题.

答:

  1. $(function(){
  2.   var clientWidth = document.documentElement.clientWidth;
  3.   if( clientWidth == 0 ){
  4.     window.location.reload();
  5.   }
  6. })