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

2019/7/22 16:09:33 人评论 次浏览 分类:学习教程

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

图片描述

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->