html5技术在移动端拥有很高的普及度，因为它具有良好的跨平台性和扩展性。而转化为小程序和app则会极大的提高用户体验和功能性，所以很多开发者希望将html5开发的web应用转化为小程序或app。下面我们将介绍将h5转化为小程序和app的原理和方法。
一、将h5转化为小程序
1. 原理
小程序是使用微信开发者工具提供的小程序开发框架进行开发，所以我们将h5转化为小程序时实质上就是使用微信小程序开发框架对h5进行重构，使其达到小程序的开发标准。
2. 方法
（1）新建一个小程序项目
在微信开发者工具中新建一个小程序项目，选定首屏路径和模板。
（2）引入原有的h5代码
将原有的h5代码复制到小程序项目中的相应位置。
（3）修改文件类型和标签
由于小程序中的文件类型和标签都和h5有所不同，我们需要修改原有的h5代码中的文件类型和标签，使其符合小程序的要求。
（4）重构代码
由于小程序中使用的api和h5中不同，我们需要对原有h5代码进行重构，以适应小程序的开发标准。
（5）测试
完成以上步骤后可以在微信开发者工具中进行测试，检查是否符合小程序的要求。
二、将h5转化为app
1. 原理
在转化h5为app时，我们需要将h5代码封装在一个webview容器中，通过与原生应用集成来实现对原生功能的调用。
2. 方法
（1）选择一个app开发框架
选择一个能够将h5封装到webview容器中，同时能够与原生应用集成的开发框架，比如cordova、phonegap等。
（2）引入h5代码
将原有的h5代码复制到该框架中的相应位置。
（3）添加原生插件
在app中需要调用原生的功能，比如获取地理位置、扫码等操作，就需要添加相应的插件，在cordova中可以使用cordova-plugin-xxx的方式添加插件。
（4）封装
通过cordova提供的cli工具进行打包，将h5代码封装在一个webview容器中。
（5）发布
将打包后的app发布到应用商店中即可。
总结：
将h5转化为小程序和app，本质上都是通过重新构造web应用实现的。在进行转化前，我们需要先了解小程序和app的开发规范，才能更好的进行重构。
编辑：林峰，如若转载，请注明出处：https://www.yimenapp.com/kb-yimen/26539/
部分内容来自网络投稿，如有侵权联系立删
