h5是可以一键打包小程序的_微信小程序一键生成web的H5

我一直认为因为‘懒’才促进社会的进步和科技的发展，就说现在的微信小程序，一套自己的规则，如果要写一套一样的H5页面还得重头来，这是在做重复的活，不是我们所要的结果。所以就产生了今天的主题，一键生成H5.

今天看到大佬做了这件事情，看着大佬的文档，兴趣勃勃的撸起袖子就开干了。特想分享一下，废话少说，马上进入正题。

实现过程

在命令行终端输入下列命令

$ npm i omi-cli -g //安装omi-cli

$ omi init-mp your_project_name //新建个文件进入初始化 your_project_name为自定义项目名

$ cd your_project_name //进入项目目录

$ npm start //运行项目

然后把小程序项目拷贝到 src-mp 目录，如果是新的小程序，可以在 src-mp 目录创建小程序。

大概整个目录结构这样

注意小程序目录结构一定要安照下面这个结构

├─ components //存放所有组件，每个组件一个文件夹，暂不支持乱放

├─ images

├─ pages //存放所有页面，每个页面一个文件夹，暂不支持乱放

│ ├─ index

│ └─ logs

├─ utils

├─ app.js

├─ app.json

├─ app.wxss

├─ project.config.json

最后可以在小程序工具打开src-mp目录文件编辑和查看，可以时时在网页生成的效果

效果

生成的H5

生成的H5

小程序

小程序页面

是不是很简单，生成开发环境，执行：npm run build