DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2015-06-11 21:02
  • 更新:2022-08-10 18:21
  • 阅读:38592

APICloud项目如何快速迁移到DCloud下

分类:MUI

概述

最近很多新来的开发者问到一个问题:我之前用过APICloud,现在想改用DCloud产品,我原来的App是否可方便迁移?
迁移肯定是可以的,这里我们系统的讲下产品的区别和迁移的思路。

首先大家需要了解DCloud的产品,包括:
HBuilder:快速编码、调试、打包的IDE。它可以开发各种HTML5类程序,pc网站或app都可以开发,前端常见的less、sass等程序也可以开发。还可以通过插件开发php等语言。
5+ Runtime:基于webview的增强runtime,扩展了大量的js api,打通原生api和js api的桥梁。
5+ Runtime包括2部分,HTML5plus规范和Native.js。体验该产品请点这里下载手机demohttp://www.dcloud.io/helloh5
相比于APICloud的客户端,5+Runtime的能力更强大、开放性更好。
mui:一个开源、适用于手机App的、高性能前端框架。在App开发中是属于可选但推荐使用的框架。mui大部分基于HTML5实现,一些HTML5实现起来体验不好的地方,会调用5+ runtime的原生扩展能力实现。同时mui也可用于开发手机浏览器web app或微信app。体验该产品请点这里下载手机demohttp://www.dcloud.io/hellomui
更多了解这3个产品,请仔细阅读:

  • DCloud产品概述
  • mui概述:从本文中大家可以了解mui的设计理念,理解mui仅偏重ui组件、不封装各种util方法的“有所为、有所不为”的思想;

然后大家应该仔细阅读如下这篇产品设计对比文章:

了解一下基础概念后,接下来从APICloud开发者的既有认知角度出发,介绍从APICloud向DCloud技术迁移的注意事项。

标准H5部分可直接迁移

所有基于标准HTML5开发的js、css、html,两个平台一致,可无缝迁移;所有基于H5封装的第三方组件(注意这里是第三方H5组件,不是APICloud官方封装的标准组件),均可平滑迁移;

扩展API对象--UI部分

APICloud的api都是以api.开头,是其公司的私有api。
DCloud的5+ runtime,命名以plus.开头;
DCloud的mui前端框架的api以mui.开头。
举个例子,打开窗口,APICloud是api.OpenWin;5+是plus.webview.open;mui是mui.openWindow。
当然mui.openWindow也是对plus.webview.open的一种封装,并且在里面处理了各种常见业务,比如显示/关闭waiting雪花。

窗口系统

两家的窗口都是基于原生的webview的,封装的命名略有不同;
APICloud在api命名层面就区分主窗口和子窗口,分别封装了api.OpenWin和api.OpenFrame两个方法;
而DCloud的5+ runtime是统一的plus.webview对象处理;通过plus.webview.create方法可创建webview,在该方法中通过参数控制webview显示位置;如果是要把一个子窗口嵌入父窗口,使用webview对象的append方法

mui为了简化书写,封装了mui.openWindow方法,通过该方法可以创建并显示webview对象;通过mui.init方法中的subpages参数,可以创建子webview;

APICloud特意封装了api.openSlidLayout、api.openSlidPane等方法来实现侧滑导航;
mui的侧滑实现更为自由,就是滑动一个webview或一个div,不需要单独的方法。

  • webview模式:移动整个webview;
  • div模式:移动div区域;

每种模式下又有不同的动画效果,主要有3类:

  • 主窗口不动、菜单移动;
  • 菜单不动、主窗口移动;
  • 主窗口、菜单同时移动;

mui封装的div模式侧滑菜单,用户无需任何js干预,仅需按照特定结构书写html即可,详细规范参考mui官网

UI组件

APICloud原生封装的alert、confirm、prompt、actionSheet、toast、showProgress(对应DCloud公司的showWaiting)等,DCloud公司的5+ runtime也对应做了原生封装,参考nativeUI规范
此时把api.alert改为plus.nativeUI.alert或mui.alert极客。
另外,DCloud公司的mui前端框架,还针对部分组件实现了更易个性化定制的H5版本,比如:actionSheet、toast、openPicker(对应mui中的dtPicker),可直接从hello mui中查看示例;
APICloud还封装了原生的按钮、输入框等控件,这些控件HTML自己就有,而且也没有性能问题,我们认为这些封装没有意义,并且原生控件会导致很难定位排版及无法个性化样式。

导航菜单

navigationBar

APICloud通过原生封装navigationBar对象,实现可滑动的导航条效果;DCloud则通过标准H5实现的分段选择,具有同等效果,且样式更为丰富;参考hello mui示例中的segment(分段选择),如下为两张效果图:

segment(分段选择)

tabBar

tabBar是一个底部选项卡组件,APICloud通过js动态生成该组件;mui同样封装了选项卡组件,但通过简单html即可生成,在HBuilder中输入mtab即可生成选项卡的代码块;同时hello mui提供了多种选项卡模式,例如:webview模式选项卡、div模式选项卡、仅文字选项卡、二级选项卡;
image{.mobile-screenshot}

界面布局

button

APICloud封装了原生的按钮,其实HTML自己就有按钮,封装原生按钮多此一举。
mui对HTML的按钮做了样式美化,提供各种颜色风格的按钮,只需如下简单一行html即可生成一个蓝色按钮:

	<input type="button" class="mui-btn mui-btn-blue">
```	  
mui的按钮添加不同class即可实现更多风格,效果如如下:  
  
![image](http://img-cdn-qiniu.dcloud.net.cn/mui_btn_1.jpg){.mobile-screenshot}  
	  
#### citySelector  
APICloud封装了一个原生citySelector组件,通过js调用生成;  
DCloud公司则通过H5封装了一个popPicker组件,通过该组件,既可以实现城市选择,也可以实现日期时间选择;参考hello mui中对应示例,效果图如下:  
  
![listPicker(列表选择)](http://img-cdn-qiniu.dcloud.net.cn/mui-popPicker-all-1.png)  
  
#### listview  
mui通过H5封装了列表组件,在HBuilder中输入mList并回车,就可以快速生成列表代码块,简单几行html,实现一个列表组件,代码如下:
```html  
	<ul class="mui-table-view">  
		<li class="mui-table-view-cell">  
			<a class="mui-navigate-right">  
				Item 1  
			</a>  
		</li>  
	</ul>

mui同样支持左右滑动列表项显示功能按钮;同时,mui还封装了各种其它组件,比如二级列表、图文列表等,详细参考hello mui示例;

mui列表组件

scrollPicture

APICloud封装的图片联播器,对应着mui封装的gallery slider(图片轮播)组件,按照特定格式写一段标准的html,就会自动生成图片轮播组件;关于图片轮播的详细介绍,参考mui官网

slider

APICloud原生封装的滑动器,对应着mui框架中的range(滑块),好的前端一样可以写出媲美原生体验的滑块组件,且使用更简单,仅需如下3行代码:

	<div class="mui-input-row mui-input-range">  
		<input type="range" id='block-range' value="50" min="0" max="100" >  
	</div>
```	  
mui封装的滑块效果图如下:  
![image](http://img-cdn-qiniu.dcloud.net.cn/mui_range.jpg){.mobile-screenshot}  
  
#### timeSelector  
参考citySelector,对应mui封装的popPicker组件;hello mui中也单独针对时间,给出了原生和H5两种示例;  
  
### DCloud公司的mui框架封装的其它组件  
mui封装了更多灵活的mobile前端组件,如下:  
  
* accordion(折叠面板)  
* switch(开关)  
* popover(弹出菜单)  
* radio(单选框)  
* checkbox(复选框)  
* input(输入框) -- 支持清空操作、语音输入  
* grid(9宫格)  
  
  
## 更新:uni-app项目迁移  
以上文档讲述的是apicloud项目迁移到5+app。如果是喜欢uni-app,那没法迁移,需要按uni-app的规范重新开发。
4 关注 分享
哈哈尼 haha2021a Trust sonicsunsky

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 我可爱的app :
太对了,dcloud社区真尼玛比的操蛋。
2022-08-10 18:21
我可爱的app

我可爱的app

回复 w***@yeah.net :
你说的很对,dcloud社区一潭死水,我刚想从apiclou转过来,还在学习,但是社区发的提问无人回答,至少人家apicloud的有官方及时解答,希望dcloud能正视自己的不足。
2022-02-09 20:38
7***@qq.com

7***@qq.com

文章中不少链接点不进去了,麻烦官方维护下
2020-06-08 10:34
7***@qq.com

7***@qq.com

这篇帖子看起来没有那么详细,没那么简单,还望官方给一个详细的教程下,谢谢了
2020-06-08 10:22
DCloud_heavensoft

DCloud_heavensoft

回复 w***@yeah.net :
更新:看uni-app的插件市场,比apicloud更好
2019-12-04 05:57
w***@yeah.net

w***@yeah.net

总给人感觉,dcloud和apicloud比较不喜欢重视自己的不足,你都说了,apicloud封装了很多多余的api,但我想问,这么简单的问题,你都知道这是多余的,apicloud是个傻子,他不知道。我最开始是接触dcloud,但是比较下来,考虑项目 从开发到运维,从运维到运营,我选择apicloud,就因为能省去很多麻烦事情。可能后期app 运营不错了,我会选择迁移到dcloud,毕竟不想依赖第三方,受制于apicloud,这点dcloud相对来说让开发者比较放心,希望dcloud 能重视一下自己的不足,不要觉得apicloud是抄袭你的,除了气愤,更应该选择弥补不足。
2017-12-05 16:37
w***@sina.com

w***@sina.com

为数字天堂加油,文章不错。
2017-01-19 12:23
1***@qq.com

1***@qq.com

回复 DC初学者 :
文档写得其实不错,要静下心来看,Hbuilder那么多内置的Example效果很好啊
2016-10-01 07:33
1***@qq.com

1***@qq.com

回复 Sunfire :
没用过Hbuilder/MUI就不要乱讲,performance都是一流的。因为是html所以APP体积更小,好处太多了。
2016-10-01 07:31
DB11

DB11

是SQLite,你那里多了个l。@DCloud_MUI_CHB
2016-07-21 10:28