![

](http://qiniu.betweenfriends.cn/blog/20170824/Hdl-NLsa68f5Q_QBsqlrQC5u.png)### 理想状态下的跨平台
我们之所以选择WEBAPP，最大的原因应该就是可以实现一套代码在多个平台上的复用。

理想状态下，一套代码就可以同时打包成android和ios的app,并且可以作为手机站和PC站直接使用。

当然，之所以说是理想状态，是因为由于PC浏览器和移动浏览器支持的事件和操作差异都比较大，如tap和click事件，以及移动设备上的拖动操作等。而且从mui的定位上来说，主要也是针对移动设备进行的封装。另外，从应用场景的发展趋势来说，移动设备使用率越来越高，PC端则是下降趋势，因此除非必要，可以忽略PC端的兼容性，只考虑移动设备上的兼容性。

移动设备的一站式开发

因此，我们这里讨论的一站式开发，主要是指一套代码同时可以部署成移动网站，并打包成Android和iosAPP

所需环境

1. MUI
2. HBuilder

原理

在开发时，利用js和H5在各个平台上的共性，实现在各个平台上的公用部分A，并针对不同的环境开发必要的补充部分B C D...

运行时，首先加载公共部分A，通过技术手段检测当前的运行环境，并根据当前环境加载补充部分B C D...，这样就实现了一套代码在多个平台上的自适应，也就实现了所谓的跨平台一站式开发。

实现

实现跨平台的关键就是剥离公共部分并根据需要定制不同平台上的个性部分。一般来说，公共部分就是手机站的代码，然后在手机站的基础上，进行必要的代码覆盖，比如在APP中把mui的弹窗替换成系统原生的弹窗。

公共部分代码

根据自己的业务需要，定义一个页面初始化的架子，包含页面的初始化，组件的加载，事件的监听等。同时包含各个方法的基本实现。一般来说，这个架子本身就是一个完整可用的页面框架，在不需要其他环境适配的代码补充的情况下，就可以独立完成手机站的初始化。

定制代码适配不同的环境

具体需要补充几个版本的代码需要根据自己的需求，比如需要针对微信，或者针对IOS，Android等进行定制。
定制的方法是在公共部分代码的基础上，只针对性的实现在当前要适配的环境下需要定制的部分。然后在页面初始化的时候，利用JS的继承用定制版的代码替换掉公共部分的代码，从而实现对当前定制环境的定制开发。
以下示例即通过对公共部分的代码的一部分进行覆盖从而在APP环境中可以体现出和手机站不一样的效果。

完整的代码框架

其中PcPage是基础的框架,WapPage包含手机站的适配代码。WxPage包含微信环境内的手机站适配代码，AppPage则是针对App打包环境下的环境适配代码。

当然，根据需要，适配代码的补充可以有更多或者更少的版本，比如如果不需要考虑微信环境，那么就可以跳过WxPage的开发，如果需要针对App环境区分IOS和Android并实现不同的效果，那么甚至可以在AppPage之后分别实现IOSPage和AndroidPage。一切随你心意。

环境检测代码

即 initPage方法的实现，在对一个页面进行初始化时，通过调用initPage方法，并传入必要的页面初始化参数，initPage会根据当前运行的环境，选择和环境适配的代码，然后根据传入的页面初始化参数来完成页面的初始化操作。

initPage的调用完成，标志着一个页面的初始化完成。
水平有限，代码有点乱，能看得懂实现原理就好，具体实现可以自己去做。initPage的核心功能，就是完成环境检测，然后根据环境检测结果，加载和环境适配的代码。

完整内容(原文链接):https://blog.betweenfriends.cn/post/crossdomaindev.html