javascript2019开发最快的Webapp框架BUI交互框架BUIWebApp开发框架

通过这个看似简单的例子,使用BUI快速开发出来的应用是可以上得了台面的.在没有设计稿的情况下,我们可以仿照任何一款APP开发,并且按照APP的相同比例完美还原.另外一个是在各种复杂的手势操作交互里面,BUI游刃有余.

请使用手机扫码操作看看.

建议扫码在手机预览,PC预览不支持手势操作.

如果你也跟我一样在寻找一款快速开发的Webapp框架,相信我,你来对地方了.欢迎加入BUI移动开发交流群:691560280满BUI移动开发交流群2:4170980新

我自己从2011年开始接触移动混合app开发至今,开发的应用也有几十个了,这些经验可能对别人也会有所帮助.于是我把它整理出来,围绕着快速开发,BUI做了很多事情,看完你就会明白,BUI的快是有意义的.

我找过很多框架,对框架有一些要求:

...

这样的要求不过分吧但发现每个UI框架都有自己的定位,跟我要的还不太一样,于是我们只能自己造轮子.既然自己造轮子,那就要先做最适合自己的,然后才是适合别人.这里有必要交待一下背景.

早在2011年,品高公司就开始接触移动互联网,并有了第一个基于Cordova的混合app开发框架及打包平台--Bingotouch(那个时候除了Appcan,没有像Dcloud,APICloud等比较成熟的平台),为了配合Bingotouch开发框架,我们需要有一个UI,于是我们有了一个简单的UI,那时只有一些简单的基础控件,简单的适配(可以在打包自适应,但无法在浏览器预览),页面切换传参使用原生的切换,其它复杂点的就用第三方的插件,下拉刷新就用iscroll,投入到项目开发中就没去管UI了,一晃就4年过去了,简直就是奇迹.

但随着混合应用的技术推广及系统的升级,手机屏幕越来越大,我们的UI存在的一些不足,我们意识到,我们的UI必须升级了.经过4年的移动开发项目经验沉淀,于是2015年底我们就开始着手UI的改造.

这里顺便交待一下我们的旧UI存在的问题吧.

旧UI采用viewport固定宽度的方式适应,把设计稿更改成320大小,然后我们按这个大小量取间隙,还原设计稿,这样会导致在浏览器整个页面变大,之前不考虑浏览器,所以问题还不大,但随着viewport在不同手机设备的表现,这种方式瓶颈越来越大,ifelse越来越多.

早期的时候,基于zepto的控件还要适应移动端,是少之又少,所以我们经常需要上网找或者自己写控件,这样就造成每个控件的使用方式不一,兼容不一,较难上手.

正是因为有了这些问题,才让我们的新BUI适应性越来越强.

场景1:客户指定要使用第三方平台打包;

我们的Bingotouch就派不上用场,即使我们很优秀,但是客户不放心,用第三方平台后面可以不依赖于某一家公司,可以很容易找到其他开发者,客户的担心也不无道理.

第三方平台的出现方便了开发者,但也带来了新的难题,一个第三方平台,会有自己的开发生态,工具,API,UI,开发者要学习的东西太多.

这样,客户不管指定哪个平台,都可以使用我们的UI来做开发交互,开发人员都不用再学习新的UI,能减少一点是一点啊.

围绕这个想法去设计,再分析了互联网上的一些UI的特点,我们的框架应该是这样子的:介于webapp跟混合app开发之间,大部分应用有80%以上的功能都是由UI实现的,这样通过学习一次BUI,你就可以游刃于不同平台之间.

在软件公司里面,开发者占多数以及人员的流动等因素,如果开发者愿意去学习使用,可以解决招不到合适的前端问题.所以学习要快,简单.

我们在技术上没有依赖于vue,react等先进理念,我们就是要简单,Dom是最基础也是最容易理解的,所以我们基于zepto或者jquery.

开发者习惯用什么工具,就用什么工具.习惯用什么webpack,gulp,sass,less完全由自己做主.但是如果使用我们推荐的sublimetext工具,我们有针对这个工具的一个插件,可以快速书写,事半功倍.

如图,其它UI的适配的高度是固定的,随着屏幕增高,底部的空白会越来越多,而BUI是整体等比缩放,像一张大图缩放到合适的屏幕一样.真正是一次开发,多平台适配.

前面我们也说过,旧UI我们需要经常找插件,找来的插件也不一定能用,调用系统原生的交互,在安卓跟ios会有不同的表现,为了避免这种情况,我们把互联网上常见的插件都统一开发出来,一致的交互,一致的使用方式,一致的API.

bui.slide是一个焦点图组件,它除了自身支持,横向,纵向,全屏,自动播放等功能以外,我们稍微改变了参数,它就变成了tab组件.

**(这里不能直接上传gif交互图,我把重要的交互展示一下,想看更多交互请直接点击预览交互效果)**

js:varuiSlide=bui.slide({id:"#uiSlide",height:200})html:

  • 图片标题
  • 1
TAB选项卡TAB初始化

js:varuiSlideTab=bui.slide({id:"#uiSlideTab",menu:".bui-nav",children:".bui-tab-mainul",scroll:true})html:Tab1

仔细观察下这两个的结构及交互,变的只是父层的样式,其它结构及操作都是一样的.我们把TAB的结构再拆分一下,就变成了TAB在顶部以及在底部的效果.

TAB在顶部

TAB在底部

TAB在侧边

这样是方便了,但是要记住的参数很多,怎么破这就要谈到我们的BUIFast插件了,一个快速书写的Sublimetext插件,这个后面篇幅再介绍.我们把比较重要的组件给大家介绍一下.

bui.list是基于bui.scroll扩展的一个加载分页及刷新的一个控件,默认把分页都处理好了,你只需要配置一个数据请求的地址,能返回一个数组就行了,如果返回的字段不一样,也是提供了字段映射的配置,开发一个加载及下拉刷新功能的列表,只要5分钟.如果这个满足不了你的需求,你可以再看bui.scroll及bui.pullrefresh这两个控件.

bui.dialog弹出层插件同样是一个扩展性特别强的插件,支持从不同方向进入,支持关闭打开,支持全屏等,支持动态创建以及静态渲染,这两者的区别例如,

选择控件,支持单选,多选,支持弹窗或者不弹窗,支持静态或者动态渲染.

bui.swipe也是很强大的一个控件,解决同一个页面的各种手势操作冲突.像bui.sidebar,bui.listview都是基于bui.swipe扩展的插件.

支持左边跟右边,支持同时,但还是建议同一个页面不要出现太多这类交互.

侧滑列表控件,支持菜单在左边或者右边

消息提醒自动消失,支持上中下等方向,并且支持自动关闭或者手动关闭,可以指定在某个容器内.

折叠菜单,显示隐藏,支持全部显示,或者一次只能显示一个.

下拉菜单,常用于搜索旁边的选择,选项不宜过多.

重头戏来了,前面这些都只是铺垫,只有简单的文档,丰富的组件,这些每个框架都有,不能算快.我们围绕着开发人员快速开发,做了很多事情,让你如虎添翼.

BUIFast是Sublimetext的一个插件,前面我们也说了,我们并不要求用户使用某个工具,但如果用户使用我们推荐的工具,那就是如虎添翼.Sublimetext是一个优秀的编辑器.安装好BUIFast插件以后,你可以使用BUI的快速书写.

规则如下:ui-生成结构,bui-生成脚本

ui-html生成BUI的标准引用ui-page生成BUI标准结构页面

ui-控件名生成控件的结构;bui-控件名生成控件的初始化;两个前呼后应.

后面我们新增了bu-控件名-demo直接生成示例代码.所以前面说的,你根本不需要去记住结构,你只需要记住有什么控件名.比方bui-slide-tab

全局安装buijs以后,每次创建如果有新版本都会从github获取,可以在任意地方创建,并且可以指定模板及打包平台.

安装

sudonpminstall-gbuijs简单创建工程包(默认webapp平台)

buijscreatedemo-tmain-tab指定dcloud平台指定平台以后,创建的工程可以直接覆盖到平台新创建的应用目录,默认bui绑定了物理后退按键的处理.

buijscreatedemo-pdcloud

bui的官方组件只是一些基本的组件,后续还会扩展.

从BUI出来诞生到现在,在品高内部已经两年了,服务了近百个项目,其中也暴露出来了一些问题.

1.第三方打包平台如雨后春笋般增长,我们的兼容何时才休

2.由于我们基于DOM开发,入门门槛低,带来的问题是开发过程中的代码质量无法保证;3.每个人喜欢用的模块化不一样,有人喜欢用requirejs,有人喜欢用seajs,同样的模块不能在项目之间共享;

在用第三方平台的原生跳转里面,也有一定的局限性,比方,后退刷新,后退多层到指定页面等,这些每个平台的处理都不一样,而且有的都不允许这么处理.我们需要更灵活的路由,支持效果自定义,支持后退刷新,支持后退到指定页面,支持物理后退等,这一切创建对应工程包的时候,你就已经拥有.

我们使用我们自己的模块化,跟路由一起配合使用,开发的模块在项目之间的共享成为了可能,我们还按照requirejs,seajs的接口设置,可以兼容之前的模块.

当你打开index.html的时候,就会自动加载main模块,模块的命名,除了main,其它匿名模块默认都是.html前面的路径名,比方:main模块有个按钮,按钮有个链接(注意不能使用a标签)

main模块,路径:pages/main/main.html

sidebar.js路径:pages/sidebar/sidebar.js

loader.define(function(require,exports,module){module.exports={};})这样,如果其它页面要调用sidebar的模块

loader.require("pages/sidebar/sidebar",function(sidebar){//})这是路由最简单的用法,当然他还有很多其它定义,具体需要自己查看API了.

与其说bui是一个交互框架,我觉得我们更像是一个移动快速开发解决方案,围绕开发过程中的效率,一点一点的进步优化,我们也针对了常用的平台的快速创建工程包,创建完覆盖到对应的平台应用包里面就能使用了,是不是开发最快的webapp框架我希望是,但我更希望整理的这些内容对别人有所帮助.

BUI的目的不是要成为一个很优秀的框架,而是可以帮助大家解决80%问题的框架.

THE END
1.理工光科:首次公开发行股票并在创业板上市招股说明书证券交易所的有关规定进行相应调整。 如违反本部分的承诺,擅自减持公司股份的, 违规减持公司股份所得归公司所有。如未将违规减 1 武汉理工光科股份有限公司 招股说明书 持所得在减持之日起 10 个交易日内交付公司,则 公司有权在应付现金分红时扣留与应上交公司的 违规减持所得金额相等的现金分红。 2、持有发行https://stock.stockstar.com/notice/JC2016101900000004_53.shtml
2.新手做视频运营,选短视频or长视频?详细解析,教你选对的2. 高竞争:短视频领域竞争激烈,需要更高水平的创意和独特性才能脱颖而出。 五、结合平台特性选择 上面已经给大家分析了短视频和场视频的运营特点,总的来看没有谁好运营谁不好运营一说。具体选择还需要结合平台特性和自身擅长方向选择。例如:做头条号、百家号、B站这些平台可以选择场视频运营,抖音、快手、视频号、小https://blog.csdn.net/Suxian503/article/details/132848105
3.高考志愿填报最全攻略(精选5篇)河南省普通高招考生填报志愿平台上为考生提供了近三年在河南省招生的各高校录取统计,考生填报志愿时可在线查询。《2018-2020年河南省普通高校招生报考及录取统计》刊载有近三年在河南省招生的各高校录取最低分、平均分和投档最低分位次信息,考生填报志愿时可参考。 https://www.ruiwen.com/edu/3741065.html
4.智慧树知到章节测试答案汇总智慧树知到创新创业基础心理降答案汇总近日北京大学智慧树共享课程还是很受大家喜欢的,不过在学习之后需要完成见面课和章节测试的,很多小伙伴不清楚答案,今天小编就给大家整理了一些,有关爱生命急救与自救技能,走进故宫,互联网与营销创新章节等测试答案的汇总,一起来看看。 智慧树知到互联网与营销创新章节测试答案 https://www.qqtn.com/article/article_319268_1.html
5.ios音视频编解码ios音视频编码davisl的技术博客6.3、特点 6.3、码率控制 1)调节编码的帧率 2)调节图像大小 3)调节量化参数 七、视频的硬编码和软编码 7.1、定义 7.2、优缺点 7.3、目前的主流GPU加速平台 7.4、目前主流的GPU平台开发框架 八、iOS视频开发 九、矩证 一、内容元素 一个视频文件的内容有哪些元素,通过下图可以表现出来: https://blog.51cto.com/u_12968/7325756
6.分享4个视频号赚钱技巧0成本0风险新手可操作视频号运营自媒体至于音乐素材,来源就更广泛了,可以去网易云、QQ音乐、虾米等音乐平台收集蜗牛网赚,重点看这些平台的音乐排行榜。 其实抖音上已经有很多同行在操作了,可以多去模仿他们的高赞视频,大概率也会在视频号上火。 三、名人语录视频号 名人语录号就是去剪辑一些有名气的教授讲座视频,再引流到个人微信,通过出售相关课程和资料变https://www.jb51.net/zimeiti/760210.html
7.微商推广引流秘笈——8个高效的引流策略找大V 大号微博转发,这是几乎是所有微博推广必用方式,微博里有广告系统(比如第三方平台微播易),你可以指定找哪些人来转发(现在微博有很多大号博主,就是靠转发广告赚钱的),不同粉丝数量,价格会有不同。 如果你想得到大咖的免费转发,那么你需要巴结一下这些大咖,经常购买使用他们的产品,给他们做产品反馈,感激他们对https://lusongsong.com/reed/9540.html
8.十大小视频平台排行短视频软件哪个好2024年小视频十大品牌最新发布,小视频排行榜前十名品牌有抖音、快手、视频号、西瓜视频、抖音火山版、微视、好看视频、央视频、美拍、皮皮虾。小视频10大品牌排行榜由品牌研究部门收集整理大数据分析研究得出,帮助你了解小视频软件有哪些。https://www.maigoo.com/maigoo/6277xsp_index.html
9.腾讯视频B站爱奇艺知乎微博这几大平台的弹幕评论,看今天讲解如何用python爬取芒果TV、腾讯视频、B站、爱奇艺、知乎、微博这几个常见常用的影视、舆论平台的弹幕和评论,这类爬虫得到的结果一般用于娱乐、舆情分析,如:新出一部火爆的电影,爬取弹幕评论分析他为什么这么火;微博又出大瓜,爬取底下评论看看网友怎么说,等等这娱乐性分析。 https://cloud.tencent.com/developer/article/1872409
10.胡华辉吴茜茜基于“长短视频之争”的二次创作类短视频侵权界定三、二次创作短视频所涉法律现状及分析 四、二次创作短视频合理使用分析与侵权界定 五、对二次创作短视频法律保护的思考 二次创作短视频行业具有巨大的商业潜力,引得大量创作者涌入,二次创作视频侵权问题也日益突出,原创“长视频”权利保护迫在眉睫。通过分析二次创作视频行业侵权现状,分类归纳二次创作视频特点,从著https://web.shobserver.com/sgh/detail?id=1091694
11.新媒体运营必备的50款工具,助你提高运营效率!先收藏再阅读~知乎是问答型的知识类型平台,聚集了比较多的各领域专业人员。这里的活跃度和内容质量都很高,有众多新媒体运营大神在知乎上分享经验贴。 如果在新媒体运营方面有困惑,直接在知乎上搜索关键词就能搜到相关的经验贴,或是关注相关的话题和专栏。 官网:https://www.zhihu.com/ https://www.jianshu.com/p/d0d3c076caea