一张脑图看懂BUI Webapp移动快速开发框架【下】--快速入门指引

继上一篇一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源

大纲

在线查看大纲

1. 框架设计

框架介绍

简介

BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( Link, 微信, 小程序, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圆舟 等), 最终可以全跨平台展示.

用途

1. 快速开发webapp应用
2. 结合原生平台打包独立安装应用
3. 快速开发微信公众号的应用
4. 推广类的制作

……

特点

1. UI设计稿还原定制能力，移动端适配机制, 跟原生DPI缩放保持一致;
2. 快速上手，学习几乎零成本;
3. 快速融入各种平台，保持原平台的交互操作;
4. 简单的路由，丰富的切换效果;
5. 模块化开发，多人协作，按需加载;
6. 开发一次，安卓IOS适用;
7. 兼容requirejs，seajs模块;
8. 可以结合数据驱动
9. 支持不同平台打包

Cordova
DCloud
APICloud
AppCan
前海圆舟

1. 开发运行效率快

……

适合

• 前端开发者
• 后端开发者
• 安卓开发者
• IOS开发者

2. 开发方式

1. 支持传统多页开发

   • 优点

     1. 支持php，java等后端语言
     2. 与web开发保持一致，上手简单
     3. 可以结合 loader 模块化开发
     4. 打包状态，可以使用原生路由跳转
     5. ……

2. 支持单页路由模块化开发(推荐)

   • 优点

     1. 解决多人协作问题

     2. 解决多页开发的问题

        问题1：滑动列表到很多页，进去详情，回来以后页面回到第一页
        问题2：模块的访问只能局限于当前页，无法实现页面之间互通
        问题3：缓存问题，比方微信默认会有缓存静态文件，那你列表进去详情或者表单，处理以后想要后退刷新那是很困难的
        ……

     3. 页面之间共享，可以相互访问
     4. 页面切换动画多以及可以定制
     5. 页面切换速度快，交互效果及体验佳
     6. ……

   • 注意：

     1. 单页开发里面的事件绑定，需要使用 router.$ 替换 $选择器，这样才不会导致操作到其它页面的相同选择器。
        例如1： $("#id").on("click",function(){}) 改成 router.$("#id").on("click",function(){})

        例如2： $("#id").height(300) 改成 router.$("#id").height(300)

3. BUI+Hybrid = Hybrid App; 以上两种开发方式都可以结合原生平台打包成独立应用。

3. 设计稿还原方式

1. 设计稿转换成750px宽度（1.5以下版本是540px）
2. 量取页面的元素的大小,比如 宽100px高360px 那么写成 1rem, 3.6rem，精确到小数点后2位

4. 规范

• 目录规范
• 页面结构规范
• 样式规范
• 开发规范
• 模块化规范

5. 数据交互

• 数据请求
• 数据存储

6. 页面交互

特点：多页单页保持一致的API，如果某一需求无法实现，可以用最少的成本切换成另外一种开发模式

7. Dom操作能力

基于H5原生Dom操作,Zepto或jQuery，跟Web开发保持一致

8. 调试方式

• chrome PC调试

• 移动端调试

  注意：移动端调试必须使用 npm run dev 工程，并且配置了 app.json 才行，又或者接口自行解决跨域问题

• debugtool 安装在手机调试

  适用于Bingotouch, Link, cordova 平台

• 微信调试

9. 打包及原生能力

来源于打包平台或运行平台环境，需要引入对应的脚本

• Bingotouch
• Link
• Dcloud
• APICloud
• Appcan
• 钉钉
• 微信

……

打包注意事项

1. bui.isWebapp = false 时
2. 请确保你的 bui.js 是对应的原生平台版本 bui.currentPlatform 可以查看， webapp 没有 false 状态；
3. BUI 1.5.1 以上版本，只切换多页开发的路由为原生
4. BUI 1.5.1 以下版本，切换多页开发的路由为原生，并且会影响数据请求，上传等切换为原生方法

10. 扩展能力

1. 内部扩展 bui.extend
2. 支持第三方相互配合

在线查看脑图

在线查看脑图-BUI入门指引