前端js 兼容 pc、androidApp、iosApp、exe等桌面应用 方案思路（webView、electron）

         一个项目，既要兼容pc 端、移动端（android、ipad）网页，又要有app、exe等桌面应用。我是前端开发，所以想使用 B/S 架构，有浏览器就可以打开，pc 移动都可以，问题是app。

        之前想着用hunbuder打包页面，但项目不是一个固定的地址，是可以部署到多个IP地址，在浏览器输入IP地址 即可打开项目主页，要是想打包 用于 app，那就需要在js 项目 加个登录页填上地址，但在浏览器打开时 我不又不需要登录页面（如果在js 项目里写登录页的话，就需要判断在什么端打开，要跳转到登录页还是直接到首页）。

1、pc、移动端浏览器就h5

2、android App

     我找到了 Android WebView。WebView是Android系统中的原生控件，其主要功能与前端页面进行响应交互，快捷省时地实现如期的功能，相当于增强版的内置浏览器，webView是一个模块调用H5页面。

Android WebView - 简书

        于是我用 android 原生写了一页登录页，填入地址，再调用 webView 打开填写的地址 即可 打开主页面，和浏览器输入地址一样。这样，一套代码，App和网页端都可以维护到，不用考虑App更新问题，打包好App的壳子，更新网页就是App。

PC端 为了适应各个分辨率，宽高都改百分比布局。

移动端 使用 <meta name="viewport" content="width=1366,user-scalable=0"/>

把当前viewport的宽度设为1366px ，在移动端进行缩放，以适应不同的 android 设备

android  WebView 代码示例

Android App 打开 H5 页面（使用 Android WebView 打开网址） 代码示例_zcc的博客-CSDN博客

 

3、ios App

用 WKWebView 加载 html 网页

4、windows（exe）、linux、mac、麒麟 桌面应用

都可以使用 electron 

这样，我一套js 代码 成功实现 即可应用于 浏览器，也可以构建 安卓App、ios App、exe 等桌面应用