Hybird混合开发APP初学体验

引用别人的Hybird经验链接

以下为结合自己的项目经验总结

一、react native 它最大的特点就是完全用 JavaScript 进行应用的开发,但是最终会渲染成原生的组件。多端代码复用。 因为所有的业务都用 JavaScript 开发完之后只有一份代码,然后通过编译打包机制直接部署到不同的平台,如 Android、iOS 甚至 Windows 平台。

二、Webview+vue:自己公司项目开发步骤
1、下载工程 git clone
2、项目右击 git bash
yarn install
cd vue/
yarn install
3.有报错,说镜像有问题
nrm安装与配置链接
npm install -g nrm
nrm ls
nrm use taobao
4.安卓打包见总结

三、真实实战
1.npm start,vue 用浏览器打开开发调试。此方式优点,跟web开发一样,最方便快速,缺点,不能调试原生app功能

2.通过修改 java代码,loadwebview的地址是本地webpack的地址,然后打包。本地再起vue,热更新调试,其实也挺方便,效果在手机或模拟器上显示。可以调试原生+web所有功能
在这webView.loadUrl("file:///android_asset/web/index.html");webView.loadUrl("file:///android_asset/web/index.html");webView.loadUrl("file:///android_asset/web/index.html");里插入图片描述
A、此截图如果打包给产品或者测试,则用webView.loadUrl(“file:///android_asset/web/index.html”);
B、如果本地调试,则用webView.loadUrl(“http://192.168.2.20:9000”);
这里的192.168.2.20是本机IP地址(在命令行敲:ipconfig即可看到)

3.在开发调试是,用B、webView.loadUrl(“http://192.168.2.20:9000”);地址,先打个包,安装到手机上,再npm start ,vscode每次改动代码,手机会实时更新。原因是在同一个局域网内访问。
就想react native用adb conect 模拟器或者真机一样。react native开发还需要在摇一摇后,点击setting,设置本机的IP地址,原理一样,都是要在同一个局域网内访问。
在这里插入图片描述
在这里插入图片描述
4.如果不涉及到原生APP交互,如打开摄像头,打开手电筒等,则跟web开发一样。

四、小结
简单的理解Hybird混合开发APP:
A、webView即移动终端web壳,是一个容器,真实DOM,它提供了原生APP的功能。
B、vue:前端交互js:包括基础功能js和业务功能js。
C、前端适配器:适配不同的终端:Pad、android、ios、web

猜你喜欢

转载自blog.csdn.net/wangbaobao512/article/details/120000241
今日推荐