微信小程序一键生成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

查看官方地址