Mini Bricks🧱

微信小程序原生开发框架

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

前言

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

文件说明

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

使用MiniBricks开发

• 将项目克隆到本地

# 克隆仓库到指定的文件夹
$ 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
  • 使用微信开发工具打开ColorUI-Demo文件（ColorUI框架中提供的组件，粘贴复制即可使用）

• parser

  • GitHub库：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