Min小程序示例

• 示例项目是放在 min-cli 工程下的，首先需要通过 git 将仓库 clone 下来

$ git clone https://github.com/meili/min-cli

• 进入小程序示例项目，在工程的 example/min-weapp 目录下

$ cd ~/min-cli/example/min-weapp

• 安装项目依赖

$ npm install

• 开启本地调试。未安装 min 命令行工具？点击这里查看 安装教程

$ min dev

• 打开微信开发者工具，选择 dist 文件夹，浏览项目。

示例里默认有个首页

• 接下来进一步了解 Min设计的目录结构 与 原生小程序的目录结构 是如何关联生成的

首先我们看下 Min的目录结构

  min-weapp
  ├── dist                              微信开发者工具指定的目录
  ├── node_modules
  └── src                               代码编写的目录（该目录为使用 Min 后的开发目录）
      ├── pages                           Min 页面目录（属于完整页面）
      |   ├── home
      |   |   └── index.wxp                   home 页面
      └── app.wxa                         小程序配置项

用户通过 min dev 指令执行转换成原生小程序的目录结构

  min-weapp
  ├── dist                              微信开发者工具指定的目录
      ├── pages                           Min 页面目录（属于完整页面）
      |   ├── home
      |   |   ├── index.js                   页面逻辑
      |   |   ├── index.wxml                 页面结构
      |   |   ├── index.wxss                 页面样式
      |   |   └── index.json                 页面配置
      ├── app.js                         小程序逻辑
      ├── app.json                       小程序公共配置
      └── app.wxss                       小程序公共样式
  ├── node_modules
  └── src

注： dist目录 是微信开发者工具指定的目录，该目录由 Min 的 dev 指令自动编译生成，请不要直接修改该目录下的文件

• 请尝试修改首页代码

打开首页 ~/min-weapp/pages/home/index.wxp 文件

<template>
  <view>
    ...
    <view class="index-bd">
      Hello World
    </view>
    <!-- 修改此处 -start -->
    <view class="index-bd">
      这部分是刚刚新增的
    </view>
    <!-- 修改此处 -end -->
    ...
  </view>
</template>
<script> ... </script>
<style> ... </style>

修改保存后，切换到微信开发者工具，预览首页

• 请尝试新建一个页面

  • 进入到示例项目目录下

$ cd ~/min-weapp

• 使用 Min 设计的 new 指令，快速新增一个页面

$ min new about

• 请按照 Min 的交互式问答进行新建页面，你也可以点击这里了解更多 新建页面 使用说明

• 新建完成，在首页上增加一个跳转 about页面 的链接

打开首页 ~/min-weapp/pages/home/index.wxp 文件

<template>
  <view>
    ...
    <view class="index-bd">
      Hello World
    </view>
    <view class="index-bd">
      这部分是刚刚新增的
    </view>
    <!-- 修改此处 -start -->
    <navigator class="index-bd" url="/pages/about/index">点击跳转到 about页面</navigator>
    <!-- 修改此处 -end -->
    ...
  </view>
</template>
<script> ... </script>
<style> ... </style>

修改保存后，切换到微信开发者工具，预览首页。此时用户点击 点击跳转到 about页面 按钮将打开 about页面。

• 此时，您是否已经了解 Min设计的小程序开发方式呢? 有任何疑问或问题请提交 issues 或加入到微信群 Min 使用交流群 讨论，请描述您的问题并提供具体的异常截图，以便min-team快速判断解决。

接下来请进一步了解在 Min小程序项目 里常用的功能

• 新建页面
• 调试页面
• 编译项目如果您想要在已有的小程序里使用，请移步到 已有小程序项目 的使用介绍