imouou / bui-guide Goto Github PK

BUI 是一个跨平台UI开发框架，基于路径式的组件化开发和单页路由SPA，数据驱动，开箱零配置，简单上手，适合独立开发各种 Webapp，App，小程序……

bui webapp cordova cross-platform dcloud miniprogram uniapp app component-library

bui-guide's Introduction

Hi there 👋

BUI：https://www.easybui.com/

BUI 是基于jQuery或者Zepto的Webapp UI组件开发框架，双向状态管理，路径式路由和动态组件加载，丰富的模板生态资源，开箱即用零配置，一次开发跨平台、完美嵌入企业微信、小程序、公众号、钉钉、link等平台或通过Cordova、Dcloud、鸿蒙、Flutter打包独立 APP。

BUI is a Webapp UI component development framework based on jQuery or Zepto, with bidirectional state management, path-based routing and dynamic component loading, rich template ecological resources, and zero configuration out of the box

八大特点

开箱零配置：一行代码构建即可构建工程开发
高性能视图：每个组件按需加载，无需拆包。
跨平台适配：一次开发，跨平台全适配
HTML模板：传统HTML，JS，ES模板一看就懂
模块化：支持AMD异步模块，全局模块，ES同步模块
轻组件：轻量路径式组件，按需加载，可单独预览调试
数据驱动：通过数据跟视图的绑定关系，自动更新（无虚拟Dom）
单/多页路由：单页SPA零配置路径式路由、传统多页面路由，简单高效
less/sass：支持常用样式编译，默认为less
高保真还原：等比还原设计稿，应对不同手机分辨率下的适配问题
多种引用：支持NPM引入，Script传统引入，方便嵌入第三方

BUI 性能测试｜ BUI Demo演示｜在线开发-百搭模板构建

bui-guide's People

Contributors

Stargazers

Watchers

Forkers

easybui tigerchain flytyger lauralxj sky8652 visayang pzq0101 mescalchuan killkiss aikewang627 xilebaba yinging swankytigeryy op0326 shileiit hiboxgit wanggaodeng nonomal weikety

bui-guide's Issues

进入页面时bui.list发送了5次请求数据

首次进去列表页面时，不知道为什么了连续发送了5次请求
var uiList = bui.list({
id: "#scrolPlanList",
// 测试的接口及传参
url: serverUrl + "/main/test",
data: {
"id":1
},
pageSize:10,
height:0,
template: templateList,
method:"POST",
//如果分页的字段名不一样,通过field重新定义
field: {
page: "pageNum",
size: "pageSize",
data: "datas"
},
onRefresh: function (scroll) {
//刷新的时候执行
},
onLoad: function (scroll) {
// console.log( this.option("page") );
}
});

请问css的class样式在android手机浏览器和接入的微信上都不显示，ios和web浏览器都很正常，怎么整？

但是写在标签内的style就是有效的

buijs单页面开发包最新版npm run dev之后不能热更新，必须npm run build之后dist文件夹里的文件才能跟src同步

buijs单页面开发包最新版npm run dev之后不能热更新，必须npm run build之后dist文件夹里的文件才能跟src同步,这个地方我这边试了是必须npm run build之后才能更新，如果不npm run build的话，修改不生效。能给看看吗

登录的是时候怎么实现第三方登录

怎么用微信，支付宝这些第三方接口登录

fixStatusBar.js 问题

fixStatusBar.js 这个js怎么使用，有没有文档说明哦？

底部导航反复点击A-B跳转，会出现A页面的数据追加显示在B页面数据下面

上图是我底部导航代码，在跳转页面也执行了 pageview.init（）=function（）{} 去执行数据重新请求，代码如下：

我也试过将window.loader = bui.loader({ cache: false});放在index.js页面中，但是运行会提示main.html 404，请问是我放置的位置有问题吗？我要怎么做才能解决这个问题

怎么放到手机上进行调试？

单选框切换有问题

单选框有时候不能点击，需要移动鼠标再次点击才有效果

Mac atom安装插件的时候，加载不了文件

Failed to load snippets from '/Users/liufei/.atom/snippets.cson'
/Users/liufei/.atom/snippets.cson: keyword 'class' can't be assigned

页面跳转问题

从页面点击跳转之前的页面，bui.load()方法，之前的页面点击按钮都失效了

进入页面，数据有请求，解析代码log也有输出，就是页面加载不出来

功能是邮件选择发送人，点击click 跳转到人员列表，但是我每次从btn click 进入页面，数据有请求，解析代码log也有输出，就是页面加载不出来，是什么情况？我应该要怎么刷新才对？
下面是我的代码：

时间控件，点击取消按钮，会默认重置为00：00：00

如何打包成app

打扰了

你好，感谢你提供的这个框架，我觉得很好用。但皮肤不是很好看，我在一个项目里，把bui.js 和 mdui.js 合用了，用了mdui的控件，用了bui的单页router框架，，，但两者好像配合的不是很好，有一个这样的问题：我用mdui做了复选框，但只有双击才会有效果，单击无效，然后我单独试了一个html文件，只有mdui.js，复选框单击有效，请问你有什么办法帮我解决吗，谢谢了！！！

<header class="bui-bar>的问题

BUI 怎么在微信小程序里面使用

如题,在小程序里面怎么使用BUI

按照上拉刷新的模式，每次进入的时候，解析的html并没有被展示在页面上，再刷新就出来了，大神帮我看下是哪块写错了吗？

组件文档中样式显示出错影响很大

请检查这些文件是否存在？

Apicloud 打包编译问题

用apicloud编译测试包下载后打开，提示： bui.loader.execute Cannot read property 'open' of undefined: TypeError&&stack:TypeError: Cannot read property 'open'of undefined at Object.e.init(file:///android_asset/widget/dist/pages/main/main.js:1:196) 等... 能帮忙看下是哪里没处理好吗

引入fixStatusBar.js后底部被main挤下去

apicloud打包后引入fixStatusBar.js后底部被main挤下去，这是怎么回事啊

bui怎样打包成apk

bui能否在其他html页面引用控件

时间选择控件不错，想引入到html页面（未使用bui框架）。但是写入代码后访问页面就跳转到首页了？

关于rem

怎么在找不到页面的时候，自动跳转到404页面

如何在页面不存在的情况下，自动跳转到自定义的404页面，在路由里可以全局拦截吗？

跨域问题

设置了proxy怎么没用呢

请问bui的slide控件autoheight属性怎么不起作用

不使用命令行工具生成项目，如何配置跨域

不使用命令行工具生成项目，如何配置跨域，有办法使用原生等插件么

你好，上一个问题解决了，谢谢。现在有个问题是，手机软键盘弹出的之后，$(window).height()获取的高度不准确，导致输入框还是会被遮住

// 为input绑定事件
$chatInput.on('focus', function () {
var target = this;
interval = setTimeout(function(){
var winHeight = window.innerHeight;
//我换了这种方法获取是一样的，屏幕高度822，弹出键盘后获取的height是744。
//所以还是会遮住footer中的输入框
bui.alert(winHeight);
bui.init({
id: $(".bui-page"),
height: winHeight ,
})
$(".bui-page")[0].scrollIntoView(true);
},500);
}).on('blur', function () {
if( interval ){
clearTimeout(interval);
}
// 使用定时器是为了延迟计算
interval = setTimeout(function(){
bui.init({
id: $(".bui-page"),
})
$(".bui-page")[0].scrollIntoView(true);
},500);
});

levelselect 增加ID 属性

levelselect 目前是文本，可否优化为 ID+ 文本，这样插入数据库可以插入对应的id。

文本内容

焦点图如何动态加载

我的代码如下：
pageview.fouceImg=function (){
bui.ajax({
url: "abc.json",
data: {}
}).then(function(res){
var html1="";
var html2="";
$.each(res,function(index,el){
html1+='

el.Title

';
html2+='

'+index+'

';
})

		$("#fouceImg").html(html1);
		$("#fouceImgNum").html(html2);
	})
    
  };

虽然数据有了，但图片和文字显示的很小，不知道是怎么回事

文档中布局中的弹性布局bui-box-reverse错了，应该是flex-direction:row-reverse,可是实际上是flex-direction:column-reverse

微信返回前页面强制刷新问题

微信公众号里面返回上一个页面会强制刷新整个页面，bui框架中怎么做才能不刷新上一个页面？

图片压缩修正后(已得到blob数据) 如何替换上传的文件数据

function formUpData(blobFiles){
console.log('before', uiUpload3.data()[uiUpload3.data().length-1])
console.log('before', URL.createObjectURL(uiUpload3.data()[uiUpload3.data().length-1].data))
uiUpload3.data()[uiUpload3.data().length-1].data = blobFiles;
console.log('after', uiUpload3.data()[uiUpload3.data().length-1])
console.log('after', URL.createObjectURL(uiUpload3.data()[uiUpload3.data().length-1].data))

            uiUpload3.start({
                url: localStorage.post + "drivermanger-server/api/driver/file/avatar",
                headers: { token: sessionStorage.token },
                onSuccess:function (data) {}

npm run dev 报错

events.js:183
throw er; // Unhandled 'error' event
^
Error: ϵͳ�Ҳ��ָ��·��

at notFoundError (D:\code\demo\node_modules\cross-spawn\lib\enoent.js:11:11)
at verifyENOENT (D:\code\demo\node_modules\cross-spawn\lib\enoent.js:46:16)
at ChildProcess.cp.emit (D:\code\demo\node_modules\cross-spawn\lib\enoent.js:33:19)
at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: gulp dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-12-14T01_01_29_677Z-debug.log

---------------------------log 文件内容-----------------------------------------

0 info it worked if it ends with ok
1 verbose cli [ 'D:\download\node\node.exe',
1 verbose cli 'D:\download\node\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 info lifecycle @~dev: @
7 verbose lifecycle @~dev: unsafe-perm in lifecycle true
8 verbose lifecycle @~dev: PATH: D:\download\node\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\code\demo\node_modules.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;D:\download\node;D:\download\tortoiseGit\bin;D:\download\Git\cmd;C:\Go\bin;C:\Users\Administrator\AppData\Roaming\npm;%GOPATH%\bin
9 verbose lifecycle @~dev: CWD: D:\code\demo
10 silly lifecycle @~dev: Args: [ '/d /s /c', 'gulp dev' ]
11 silly lifecycle @~dev: Returned: code: 1 signal: null
12 info lifecycle @~dev: Failed to exec dev script
13 verbose stack Error: @ dev: gulp dev
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (D:\download\node\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess. (D:\download\node\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid @
15 verbose cwd D:\code\demo
16 verbose Windows_NT 6.3.9600
17 verbose argv "D:\download\node\node.exe" "D:\download\node\node_modules\npm\bin\npm-cli.js" "run" "dev"
18 verbose node v8.11.1
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error @ dev: gulp dev
22 error Exit status 1
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

在页面使用bui的控件时，提示缺少字体

跳转页面后刷新浏览器，返回按钮功能失效

路由从一个页面跳转到另外一个页面，点击浏览器的刷新按钮页面刷新后，点击左上角的路由返回无效，请问这个有什么办法处理哦？

升级到最新版本，bui.confirm点击了确定后，没反应，不能关闭了。

请问怎么让一个控件全局调用呢？例如一个dialog

页面跳转后数据重载问题

从一个页面跳到登录页面，登录成功后跳回来，数据都没有加载，用router.load 和 bui.load 都没有数据，没有执行到js里面的方法

同一个接口多次加载的问题

首页加载进来，获取轮播图，同一个接口连续加载了四次，请问一下怎么闭环这个问题
if( !uiSlide ){
// 初始化焦点图
bui.ajax({
url : apiUrl+"reqinfo",
data : {}, //接口请求的参数
// 可选参数
method : "GET"
}).then(function(result) {
// 初始化
uiSlide = bui.slide({
id : "#tabSlideImg",
height : 250,
autopage : true, //分页
loop : true, //
autoplay : true, //自动播放
interval : 2000, //滚动时间
template : function() {
var html ='

";
return html;
},
})
});
}

在模块定义中，怎么验证用户并跳转到登录页

请问怎么让一个控件全局调用呢？例如一个dialog

请问轮播图怎么设置自动播放，可滑动？

我翻文档也没说，百度了也没有搜到相关答案，来这请教下

请问如何把BUI的这个菜单栏隐藏不在手机端展示？

开发包

官网教程里面的下载开发包，单页开发包和多页开发包的下载地址，是不是写反了？

H5嵌入app，在低版本安卓手机 buijs无法执行

如题，这个问题能给个处理思路吗？不可能为了低版本去重新做一套demo，而强制更新系统才可用体验又太过生硬。小生对webview不了解，有劳解答~

官方文档里有好多效果预览的图片已经挂掉了，能给维护一下吗

tab 的on 监听事件除了to 以外的事件在1.5.0版本中都不能被监听到

bui.ready(function () {
    
    f();
    
    // var uiLoading = bui.loading({
    //     text: '加载中',
    //     autoClose: false,
    //     callback: function (argument) {
    //         console.log("clickloading")
    //     }
    // });

    // tab.on("to", function () {
    //     uiLoading.show();
    // });
});

var f = function () {
    var tab = bui.tab({
        id: "#tabFoot",
        menu: "#tabFootNav",
        animate: false
    })

    tab.lock();

    tab.on("last", function () {
        console.log(this);
    });
}

百度模板渲染问题

进入使用百度模板的页面后，需要刷新浏览器后html才有加进id容器里面，才有展示数据，我用的是你们的那套demo，请问这个问题要怎么处理哦？谢谢~

Tab切换页面模板中页面不能自动匹配高度，差不多只显示到一半位置

就是直接使用下载下来的多页tab模板，然后把跳转的页面更换成同样下载下来的列表页面模板（例如把列表模板直接改文件名成“home.html”），显示的效果是列表部分不能自动扩展到全部高度。这是什么原因？