Mini Program Framework

描述

框架是通过 gulp 进行简单配置搭建。
可使用预处理语言来书写小程序。
引入 async/await 处理异步。
通过对微信原生 Page 对象的扩展，可使用类似 VUE 的 mixin（混合器）功能。

规范

使用方法

> 安装依赖 npm install

> 新建页面 npm run create

> 开发环境 npm run dev

> 生产环境 npm run build

目前框架中包含组件

collapse 折叠面板: 将内容区域折叠/展开。
currency 价格显示: 显示价格，保留两位小数，当大于三位数时“,”分隔。
indexer 所引器: 可通过索引值快速查找，如城市列表，通讯录等。
loading 加载: 加载动画。
button 按钮: 功能性按钮，包含 formId 收集 && 防止双击。
grid 栅格: 行 row，列 col。将区域 24 等分，row 中 col 的 span 总和为 24。

自定义插件

validator 验证器: 表单验证 js 方法，可验证 len，range，phone，email。

框架中引用的三方

regenerator: 使用 facebook 的 regenerator 插件的 regenerator-runtime 模块，用来处理 async/await。
mapSDK: 腾讯地图 API。
utf8MD5: md5 加密。
barcode: 条形码生成器。
weapp-qrcode: 二维码生成器。

项目框架结构

.                                         //
├── generate                              // 页面生成插件
│   ├── generate.js                       //
│   ├── index.js                          //
│   └── templates                         // 生成模版
│       ├── html.js                       //
│       ├── jade.js                       //
│       ├── js.js                         //
│       ├── json.js                       //
│       ├── less.js                       //
│       ├── scss.js                       //
│       ├── wxml.js                       //
│       └── wxss.js                       //
├── gulpfile.js                           // gulp文件
├── logo.png                              //
├── package-lock.json                     // 依赖版本控制
├── package.json                          // 依赖
├── plugins                               // gulp插件
│   └── modifyJS                          // 向js插入“导入文件字符”
│       ├── index.js                      //
│       └── package.json                  //
├── src                                   // 项目文件管理
│   ├── api                               // 网络接口管理文件
│   │   ├── index.js                      //
│   │   └── module                        //
│   │       └── login.js                  // 程序入口
│   ├── app.js                            //
│   ├── app.json                          //
│   ├── app.wxss                          //
│   ├── assets                            // 资源管理文件
│   │   ├── data                          //
│   │   ├── icon                          //
│   │   └── image                         //
│   ├── components                        // 组件管理文件
│   │   ├── button                        // button（按钮）
│   │   ├── col                           // grid-col（栅格）
│   │   ├── collapse                      // collapse（折叠面板）
│   │   ├── currency                      // currencu（价格显示）
│   │   ├── indexer                       // index（索引器）
│   │   ├── indexer-item                  // index-item (索引器)
│   │   ├── loading                       // loading（加载）
│   │   └── row                           // grid-row（栅格）
│   ├── config                            // 项目配置管理文件
│   │   ├── apiConfig.js                  // 接口配置
│   │   ├── basisConfig.js                // 基础配置
│   │   ├── evnConfig.js                  // 环境配置
│   │   └── localConfig.js                // 本地存储配置
│   ├── libs                              // 三方底层文件
│   │   ├── regenerator                   //
│   ├── manager                           // 管理者管理文件
│   │   └── qrcode.js                     // 扫码逻辑管理
│   ├── mixins                            // 混合器
│   │   └── pages.js                      //
│   ├── pages                             // 页面管理文件
│   │   └── home                          //
│   │   │   └── _config.js                // 页面静态数据配置
│   │   │   └── _serves.js                // 网络请求管理拆分
│   │   │   └── home.jade                 //
│   │   │   └── home.js                   //
│   │   │   └── home.json                 //
│   │   │   └── home.less                 //
│   ├── plugins                           // 自定义插件
│   │   └── digi.validator.js             // 表单验证js插件
│   │   ├── third.barcode.js              // 条形码
│   │   ├── third.mapSDK.js               // 腾讯地图
│   │   ├── third.regenerator             // regenerator
│   │   ├── third.utf8MD5.js              // md5加密
│   │   ├── third.qrcode.js               // 二维码
│   ├── project.config.json               // 小程序配置文件
│   ├── style                             // 样式管理文件
│   │   ├── icon                          // 图标
│   │   │   └── index.less                //
│   │   ├── layout                        // 公共布局样式
│   │   │   ├── _base.less                //
│   │   │   └── index.less                //
│   │   └── themes                        // 肤色
│   │       ├── font.less                 //
│   │       └── index.less                //
│   ├── utils                             // 公共工具管理文件
│   │   ├── encrypt.js                    // 加密
│   │   ├── fetch.js                      // 网络请求
│   │   ├── mountExt                      // 原生扩展
│   │   │   ├── mountFunExt.js            //
│   │   │   └── pageExt.js                //
│   │   ├── system.js                     // 系统信息
│   │   ├── update.js                     // 小程序自动更新
│   │   └── util.js                       // 公共方法
│   └── wxs                               // wxs管理文件
│       └── timeFormat.wxs                //
└── web                                   // H5管理文件
    ├── assets                            //
    ├── index.css                         //
    ├── index.html                        //
    ├── index.js                          //
    └── zepto.min.js                      // 轻量级H5框架

技术交流 / city_mini_program

Mini Program Framework

简介

发行版

贡献者

近期动态

技术交流 / city_mini_program .gitee-modal { width: 500px !important; }

Mini Program Framework

简介

发行版

贡献者

近期动态

搜索帮助

技术交流 / city_mini_program