资讯专栏INFORMATION COLUMN

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

hzx / 2856人阅读

摘要:例如改成例如改成以上两种开发方式都可以结合原生平台打包成独立应用。

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

大纲

在线查看大纲 思路更佳清晰

1. 框架设计 框架介绍 简介

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

用途

快速开发webapp应用

结合原生平台打包独立安装应用

快速开发微信公众号的应用

推广类的制作

……

特点

UI设计稿还原定制能力,移动端适配机制, 跟原生DPI缩放保持一致;

快速上手,学习几乎零成本;

快速融入各种平台,保持原平台的交互操作;

简单的路由,丰富的切换效果;

模块化开发,多人协作,按需加载;

开发一次,安卓IOS适用;

兼容requirejs,seajs模块;

可以结合数据驱动

支持不同平台打包

Cordova
DCloud
APICloud
AppCan
前海圆舟

开发运行效率快

……

适合

前端开发者

后端开发者

安卓开发者

IOS开发者

2. 开发方式

支持传统多页开发

优点

支持php,java等后端语言

与web开发保持一致,上手简单

可以结合 loader 模块化开发

打包状态,可以使用原生路由跳转

……

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

优点

解决多人协作问题

解决多页开发的问题

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

页面之间共享,可以相互访问

页面切换动画多以及可以定制

页面切换速度快,交互效果及体验佳

……

注意:

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

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

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

3. 设计稿还原方式

设计稿转换成750px宽度(1.5以下版本是540px)

量取页面的元素的大小,比如 宽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

钉钉

微信

……

打包注意事项

bui.isWebapp = false 时

请确保你的 bui.js 是对应的原生平台版本 bui.currentPlatform 可以查看, webapp 没有 false 状态;

BUI 1.5.1 以上版本,只切换多页开发的路由为原生

BUI 1.5.1 以下版本,切换多页开发的路由为原生,并且会影响数据请求,上传等切换为原生方法

10. 扩展能力

内部扩展 bui.extend

支持第三方相互配合

在线查看脑图

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105883.html

相关文章

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

    摘要:后续我们还会增加一些实战类的移动开发案例,欢迎关注专栏。进入官网新版预览在线预览需要使用开启设备模拟,效果更佳。 前言 之前写过一篇 2018开发最快的Webapp框架--BUI交互框架 ,如果你还没看过,可以简单看一下,主要介绍了BUI的基本功能,有多少控件,以及实现的思路,BUI 1.5版本以后变化很大,统一新的风格,新的规范750,新增基于Dom的数据驱动,完善了页面的生命周期等...

    wuyumin 评论0 收藏0
  • 好快, 1分钟开发好一个拉刷新,滚动加载列表

    摘要:但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。 好快, 1分钟写好下拉刷新,滚动加载自动分页列表 前言 欢迎关注BUI Webapp专栏 或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架 微信Webapp开发的各种变态路由需求及解决办法! ...

    wemall 评论0 收藏0
  • 好快, 1分钟开发好一个拉刷新,滚动加载列表

    摘要:但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。 好快, 1分钟写好下拉刷新,滚动加载自动分页列表 前言 欢迎关注BUI Webapp专栏 或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架 微信Webapp开发的各种变态路由需求及解决办法! ...

    468122151 评论0 收藏0
  • BUI Webapp 入门教程

    摘要:前言开发定制从未如此简单该文章发表在欢迎转载在线阅读简介框架是一个快速构建界面交互的框架高保真还原设计稿拿来即用开发者只需关注业务的开发界面的布局及交互交给最终开发出来的应用可以嵌入平台微信钉钉淘宝支付宝等亦可以跟其它第三方平台打包成独立应 前言 开发定制 Webapp, HybirdApp 从未如此简单! 该文章发表在Github,欢迎转载. 在线阅读 简介 BUI Webapp框...

    flybywind 评论0 收藏0

发表评论

0条评论

hzx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<