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

概述

最近很多新来的开发者问到一个问题：我之前用过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产品与DCloud深度对比分析：大家可从本文中了解APICloud产品和DCoud产品的深层次差异；

了解一下基础概念后，接下来从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（分段选择），如下为两张效果图：

tabBar

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

界面布局

button

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

    <input type="button" class="mui-btn mui-btn-blue">

mui的按钮添加不同class即可实现更多风格，效果如如下：

citySelector

APICloud封装了一个原生citySelector组件，通过js调用生成；
DCloud公司则通过H5封装了一个popPicker组件，通过该组件，既可以实现城市选择，也可以实现日期时间选择;参考hello mui中对应示例，效果图如下：

listview

mui通过H5封装了列表组件，在HBuilder中输入mList并回车，就可以快速生成列表代码块，简单几行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示例；

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封装的滑块效果图如下：

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的规范重新开发。