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

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

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

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

2、android App

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

Android WebView - 简书

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

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

移动端 使用

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

android  WebView 代码示例

Android App 打开 H5 页面&＃xff08;使用 Android WebView 打开网址&＃xff09; 代码示例_zcc的博客-CSDN博客

3、ios App

用 WKWebView 加载 html 网页

4、windows&＃xff08;exe&＃xff09;、linux、mac、麒麟 桌面应用

都可以使用 electron 

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