# MiniBricks

**Repository Path**: TowardsSoul/MiniBricks

## Basic Information

- **Project Name**: MiniBricks
- **Description**: 小程序快速开发组件，如有问题提Issues~
- **Primary Language**: 微信
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-04-08
- **Last Updated**: 2022-02-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 微信小程序

## README

<h2 align="center">Mini Bricks🧱</h2>
<h5 align="center">微信小程序原生开发框架</h5>

- [前言](#前言)    
- [文件说明](#文件说明)    
- [使用Mini Bricks开发](#使用MiniBricks开发)    
- [JS工具](#js工具)    
    - [网络请求](#网络请求)
    - [时间格式化](#时间格式化)
    - [toast提示](#toast提示)
    - [字符占位符填充](#字符占位符填充)
    - [规则检验](#规则检验)
- [组件](#组件)
    - [ColorUI UI库](#ColorUI)
    - [parser  富文本组件](#parser)
    - [collection-tips 首次进入收藏提示](#collection-tips)
    - [imgsUpload 图片上传](#imgsUpload)

## 前言
- 基于微信小程序,纯原生!
- 极简、组件式开发风格统一编码风格、网络请求封装，避免坏味道的出现。
- 开源代码，可根据个人需求修改内部代码。

## 文件说明
- ColorUI-Demo：ColorUI的演示项目
- project：项目文件夹
    - common 公用目录
    - components 通用组件
    - core 主要代码
    - pages 页面目录
    - utils 工具目录

## 使用MiniBricks开发
- 将项目克隆到本地
```bash
# 克隆仓库到指定的文件夹
$ git clone https://gitee.com/TowardsSoul/MiniBricks.git
# 使用微信小程序 选中project打开即可
```
- 初始化项目
  - 修改config.js 项目相关配置
  - 修改http.interceptor.js 网络请求拦截器
    - 接口添加统一在 /utils/api/index.js 中添加

## JS工具
- #### 网络请求
    ```
        /**
        * @param {String} url:请求地址
        * @param {Object} data: 请求参数
        * @param {Object} header: 请求头参数
        */
        wx.$g.get(wx.$g.apiPath.xxx).then(res =>{
            // 服务器响应参数
            console.log(res);
        })
        // POST 请求
        wx.$g.post(wx.$g.apiPath.xxx).then(res =>{
            // 服务器响应参数
            console.log(res);
        })
        
        // PUT 请求
        wx.$g.put(wx.$g.apiPath.xxx).then(res =>{
            // 服务器响应参数
            console.log(res);
        })
        // DELETE 请求
        wx.$g.delete(wx.$g.apiPath.xxx).then(res =>{
            // 服务器响应参数
            console.log(res);
        })
    ```
- #### 时间格式化
    - *js中*：
        ```
            /**
            * @param {number} timestamp 时间戳
            * @param {string} matter 格式化格式, 默认'yyyy-MM-dd'
            */
            1. 时间格式化：
                wx.$g.timeFormat(1599622277, 'yyyy-MM-dd');
            2. 多久以前：
                wx.$g.timeFormat(1599622277, 'yyyy-MM-dd');
        ```
        
    - *wxml中*：
        1. 在需要使用的wxml文件中添加(根据页面路径)
        ```
                <wxs src="../../utils/wxs/dateTools.wxs"module="dateTools" />
        ```
        2. 在.wxml中使用，默认为yyyy-mm-dd
        ```
            /**
            * 日期 formatDate
            * @param {string|date} date 日期字符串 或 日期Date类型
            * @param {string} matter 格式化格式, 默认'yyyy-MM-dd'
            */
            <view>
                日期：{{dateTools.formatDate('2020-09-18 10:20:10','yyyy-MM-dd')}}
            </view>
        ```
        ```
            /**
            * 时间戳 formatTime
            * @param {number} timestamp 时间戳
            * @param {string} matter 格式化格式, 默认'yyyy-MM-dd'
            */
            <view>
                日期：{{dateTools.formatTime(1599622277, 'yyyy-MM-dd')}}
            </view>
        ```
- #### toast提示
    - 使用方式
        ```
            /**
            * @param {string} title 提示内容
            * @param {number} duration 提示的延迟时间(毫秒)
            */
            示例：
            wx.$g.toast('提示内容');
        ```
- #### 字符占位符填充
    - 使用方式
        ```
            /**
            * placeholder
            * @param {string} value 字符串
            *
            * format
            * @param {stirng | object} values 占位符参数
            */
            示例：
            var str = wx.$g.placeholder("js实现用{two}自符串替占位符{two} {three}  {one} ").format({one: "I",two:"LOVE",three: "YOU"});

            var str2 = wx.$g.placeholder("js实现用{1}自符串替换位符{1} {2}  {0} ").format("I","LOVE","YOU");
        ```
- #### 规则检验
    - 使用方式
        ```
            示例：
                var str = '1234';
                wx.$g.validate.number(str);// 验证整数
            可选参数:
                email,          // 验证电子邮箱格式
                mobile,         // 验证手机格式
                url,            // 验证URL格式
                date,           // 验证日期格式
                dateISO,        // 验证ISO类型的日期格式
                number,         // 验证十进制数字
                digits,         // 验证整数
                idCard,         // 验证身份证号码
                carNo,          // 是否车牌号
                amount,         // 金额,只允许2位小数
                chinese,        // 中文
                letter,         // 只能输入字母
                enOrNum,        // 只能是字母或者数字
                contains,       // 验证是否包含某个值
                range,          // 验证一个值范围[min, max]
                rangeLength,    // 验证一个长度范围[min, max]
                isEmpty: empty, // 判断是否为空
                jsonString,     // 是否json字符串
                landline,       // 是否固定电话
                object,         // 是否对象
                array           // 是否数组
        ```


## 组件
- ### ColorUI
    - GitHub库：[ColorUI](https://github.com/weilanwl/ColorUI)
    - 使用微信开发工具打开ColorUI-Demo文件（ColorUI框架中提供的组件，粘贴复制即可使用）
- ### parser
    - GitHub库：[parser](https://github.com/jin-yufeng/Parser)
    - 组件使用：
        1. *json*文件中添加
        ```
            "usingComponents": {
                "parser":"/components/parser/parser"
            }
        ```
        2. *wxml*：
        ```
            <parser html="{{html}}" />
        ```
        3. *js*：
        ```
            data: {
                html:"<div>Hello World!</div>"
            }
        ```
- ### collection-tips
    - 组件使用：
        1. *json*：
        ```
            "usingComponents": {
                "showTips":"/components/collection-tips/collection-tips"
            }
        ```
        2. *wxml*：
        ```
            <showTips content="自定义提示内容" />
        ```
    - 组件参数：
        | 参数 | 说明 | 类型 | 可选值 | 默认值 |
        | --- | --- | --- | --- | --- |
        | content | 提示内容 | String | -- | 添加到我的小程序，下次使用更便捷! |
- ### imgsUpload
    - 组件使用
        1. *json*：
        ```
            "usingComponents": {
		        "imgsUpload":"/components/imgsUpload/imgsUpload"
            }
        ```
        2. #### 示范代码
            >*注意* 一定要给组件 **id** 如下（示范代码）
            
            *wxml*:
            ```
            <imgsUpload id="imgsUpload" imgArr="{{imgArr}}" url="xxxxxx"></imgsUpload>
            <button bindtap="submit"></button>
            ```

            *js*：

            ```
            submit(){
                const imgsUpload = this.selectComponent("#imgsUpload");
                imgsUpload.upload(res=>{
                    if(res.code==0){
                            // 正常的返回code=0 将回调的线上图片数组 赋值给需要提交的表单里
                            // res.result 线上路径图片数组
                            // 如code != 0 则将整个返回参数返回
                            // TODO
                            
                    }else{
                        //没有上传图片的返回 code=400
                    }
                })
            }
            ```
    - 组件参数
        | 属性名            | 类型     | 介绍          | 默认值              |
        |----------------|--------|-------------|------------------|
        | url            | String | 文件上传路径    | '' |
        | haeder         | String | 文件上传请求头    | {} |
        | formData       | String | 文件上传携带参数    | {} |
        | imgArr         | Array  | 图片展示列表      | \[\]             |
        | uploadImgCount | Number | 一次可选多少张图片   | 9                |
        | imgCount       | Number | 一共可以上传多少张图片 | 9                |
        | imgSize        | Number | 上传图片的大小     | 5 \(M\)          |
        | closeTip       | Boolean| 关闭小提示    | false |
        | showDelete     | Boolean| 显示删除按钮    | true |
    - 组件配置
        - 响应参数处理
            > 进入imgsUpload.js文件 搜索 TODO

## License
MIT