乐趣区

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

jiezi

继上一篇一张脑图看懂 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 入门指引

退出移动版