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

实现过程

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

$ 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

小程序

小程序页面

查看官方地址

02-17 20:26