ldm-taro-frc

拉旦木微信小程序-功能组件(基于taro以及taro-ui)

PS: 需要node > 8的node版本

搭建

    npm install -g @tarojs/cli
    npm install taro-ui

    npm install 
    #或者
    npm i
    #或者
    yarn

开发环境

    yarn run dev:weapp
    #或者
    npm run dev:weapp

生产环境

直接在微信开发者工具里面,点击上传即可

微信开发者工具

Api

微信官方文档

taro官方文档

两套文档基本上是一致的

文档

登录

Login

| 属性名 | 属性类型 | 属性描述 | 默认值 | |:---------:|:--------:|:----------------:| :----: | | canClick | boolean | 是否以按钮点击登录,否则立即登录 | false | | url | string | 匹配token登录的url | '' | | method | string | 匹配token登录的请求方式 | 'get' | | header | object | 匹配token登录的请求头部 | {'content-type': 'application/json'} | | timeout | number | 登录超时时间 | '' | | callBack | function | 登录之后的回调函数 | (res) => void | | className | string | 外部传入样式表 | '' | | done | function | 登录完全完成的回调函数 | (res) => void |

使用

    import Taro, {Component} from '@tarojs/taro';
    import {
      View,
      Button
    } from '@tarojs/components';
    import {
        LdmLogin,
        LdmOutLogin
    } from 'ldm-taro-frc';
    
    
    class LoginDemo extends Component {
      static options = {
        addGlobalClass: true
      };
    
      state = {};
    
      config = {
        navigationBarTitleText: '登录'
      };
    
      componentDidMount() {
      }
    
      render() {
        return (
          <View className='ldm-login'>
            直接登录:
            <LdmLogin
              canClick={false}
              url='https://hupu.com/public/index.php/program/login'
              method='post'
              header={{
                'content-type': 'application/x-www-form-urlencoded'
              }}
              callBack={(data, header) => {
                console.log(data);
              }}
              done={(res) => {
                console.log(res);
              }}
            />
            点击按钮登录:
            <LdmLogin
              canClick
              className='ldm-login-button'
              url='https://hupu.com/public/index.php/program/login'
              method='post'
              header={{
                'content-type': 'application/x-www-form-urlencoded'
              }}
              callBack={(data, header) => {
                console.log(data);
              }}
              done={(res) => {
                console.log(res);
              }}
            >
              <Button>
                点击登录
              </Button>
            </LdmLogin>
          </View>
        )
      }
    }
    
    export default LoginDemo;

外部登录

OutLogin

| 属性名 | 属性类型 | 属性描述 | 默认值 | |:--------:|:--------:| :----: | :----: | | url | string | 匹配token登录的url | '' | | method | string | 匹配token登录的请求方式 | 'get' | | header | object | 匹配token登录的请求头部 | {'content-type': 'application/json'} | | timeout | number | 登录超时时间 | '' | | callBack | function | 登录之后的回调函数 | (res) => void | | done | function | 登录完全完成的回调函数 | (res) => void |

使用

    import Taro, {Component} from '@tarojs/taro';
    import {
      View
    } from '@tarojs/components';
    import {
        LdmOutLogin
    } from 'ldm-taro-frc';
    
    
    class OutLoginDemo extends Component {
      static options = {
        addGlobalClass: true
      };
    
      state = {};
    
      config = {
        navigationBarTitleText: '登录'
      };
    
      componentDidMount() {
          LdmOutLogin({
            url: 'https://hupu.com/public/index.php/program/login',
            method: 'post',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            callBack: (data, header) => {
              console.log(data);
            },
            done: (res) => {
              console.log(res);
            }
          });
      }
    
      render() {
        return (
          <View className='ldm-login'>
           
          </View>
        )
      }
    }
    
    export default OutLoginDemo;

获取个人信息

UserInfo

| 属性名 | 属性类型 | 属性描述 | 默认值 | |:------------------:| :----: |:--------------------------------------------------:|:-------------:| | url | string | 判断当前用户是否需要更新信息的后端接口 | '' | | lang | string | 返回用户信息的语言 | 'zh_CN' | | buttonType | string | 按钮类型 | 'primary' | | size | string | 按钮尺寸 | 'default' | | type | string | 选择个人信息的类型('userInfo' or 'phone') | 'userInfo' | | visible | boolean | 是否显示点击获取个人信息的按钮 | true | | callBack | function | 保存或者获取用户个人信息成功之后的回调 | (res) => void | | text | string | 点击获取用户个人信息按钮的文案 | '' | | renderButtonDetail | ReactElement | 是否自定义获取用户个人信息按钮的文案信息 | {} | | className | string | 外部传入样式表 | '' | | done | function | 保存或者获取用户个人信息完成之后的回调 | (res) => void |

使用

    import React, {Component} from 'react';
    import {
        View
    } from '@tarojs/components';
    import UserInfo from '../../components/UserInfo';
    
    
    class UserInfoDemo extends Component {
        state = {
            //用户昵称
            nickName: '',
            //用户头像
            avatar: '',
            //获取的手机号或者异常信息
            phone: '',
            //是否显示获取个人信息按钮
            show: true,
            //是否显示获取个人手机号码的按钮
            showPhone: true,
        };
    
        componentDidMount() {
            // 个人手机号码通过后台去判断是否已经存在这个手机号,然后去操作是否显示获取个人手机号码的按钮
            // this.setState({
            //   showPhone: false
            // });
        }
    
        /**
         * 获取用户的个人信息
         */
        getUserInfoHandler = (res = {}) => {
            const {detail = {}} = res;
            const {userInfo} = detail;
            if (userInfo) {
                const {nickName = '', avatarUrl = ''} = userInfo;
                this.setState({
                    nickName,
                    avatar: avatarUrl,
                    show: false
                });
            }
        };
    
        /**
         * 获取用户的手机号码
         */
        getPhoneNumberHandler = (res = {}) => {
            const {detail = {}} = res;
            const {errMsg} = detail;
            if (errMsg) {
                this.setState({
                    showPhone: false,
                    phone: errMsg
                });
            }
        }
    
        render() {
            const {
                getUserInfoHandler = () => {
                },
                getPhoneNumberHandler = () => {
                }
            } = this;
            const {nickName = '', avatar = '', show = true, showPhone = true, phone = ''} = this.state;
            return (
                <View className='ldm-userInfo'>
                    <UserInfo
                        url='https://pet.api.1jtec.com/users/needUpdateUserInfo'
                        visible={show}
                        type='userInfo'
                        text='获取个人信息'
                        callBack={getUserInfoHandler}
                    >
                        用户名: {nickName}
                        头像: {avatar}
                    </UserInfo>
                    <UserInfo visible={showPhone} type='phone' text='获取手机号码' callBack={getPhoneNumberHandler}>
                        手机号码: {phone}
                    </UserInfo>
                </View>
            )
        }
    }
    
    export default UserInfoDemo;

顶部自定义导航

NavBar

| 属性名 | 属性类型 | 属性描述 | 默认值 | | :----: | :----: | :----: | :----: | | title | string | 自定义顶部导航栏的标题 | '' | | className | string | 外部传入样式表 | '' | | color | string | 链接文字跟图标颜色,不包括标题 | '' | | leftIconPrefixClass | string | 左边图标className 前缀,用于第三方字体图标库,比如'iconfont' | '' | | leftIconType | string | 左边图标类型,与leftIconPrefixClass关联,如果leftIconPrefixClass设置的为iconfont,那么此值设置后,结果就是iconfont-xxx | '' | | onClickLeftIcon | function | 左边第一个图标类型点击事件 | (event) => void ) | | imgs | any | 是否传入的是图片，而不是icon，如果为图片就使用图片，否则使用icon | '' |

使用

    import Taro, {Component} from '@tarojs/taro';
    import {
      View
    } from '@tarojs/components';
    import {
        LdmNavBar
    } from 'ldm-taro-frc';
    
    import {imgs} from '../../assets';
    
    import 'taro-ui/dist/style/components/icon.scss';
    import 'taro-ui/dist/style/components/flex.scss';
    
    
    class NavBarDemo extends Component {
      static options = {
        addGlobalClass: true
      };
    
      state = {};
    
      config = {
        navigationBarTitleText: '',
        navigationStyle: 'custom'
      };
    
      componentDidMount() {
    
      }
    
      /**
       * 回到上一主页页面
       */
      onBackHandler = (e) => {
        Taro.navigateBack({
          delta: 1
        });
        e.stopPropagation();
      };
    
      render() {
        const {
          onBackHandler = () => {
          }
        } = this;
        return (
          <View className='ldm-navBar'>
            <LdmNavBar
              title='自定义导航'
              imgs={imgs.back}
              onClickLeftIcon={onBackHandler}
            />
            <View>
              你好,我叫尹文楷
            </View>
          </View>
        )
      }
    }
    
    export default NavBarDemo;

底部自定义导航

TabBar

| 属性名 | 属性类型 | 属性描述 | 默认值 | | :----: | :----: | :----: | :----: | | className | string | 外部传入样式表 | '' | | tabList | array | tab 静态配置列表,必填 | [] | | fontSize | number | 字体大小 | 14 | | iconSize | number | 图标大小 | 24 | | backgroundColor | string | 背景颜色 | '#fff' | | fixed | boolean | 是否固定底部 | false | | selectedColor | string | 选中标签字体与图标颜色 | #6190E8 | | color | string | 未选中标签字体与图标颜色 | #333 | | current | number | 当前选中的标签索引值，从0计数 | 0 | | onChange | function | 点击触发事件，开发者需要通过 onClick 事件来更新 current 值变化,必填 | (current) => void |

使用

    import Taro, {Component} from '@tarojs/taro';
    import {
      View
    } from '@tarojs/components';
    import {
        LdmTabBar
    } from 'ldm-taro-frc';
    
    import 'taro-ui/dist/style/components/tab-bar.scss';
    import 'taro-ui/dist/style/components/badge.scss';
    
    
    class TabBarDemo extends Component {
      static options = {
        addGlobalClass: true
      };
    
      state = {
        //当前选中的标签索引值，从0计数
        current: 0
      };
    
      config = {
        navigationBarTitleText: '底部自定义导航栏'
      };
    
      componentDidMount() {
      }
    
      /**
       * 切换tab时进行监听的方法
       */
      onChangeHandler = (current) => {
        this.setState({
          current
        });
      };
    
      render() {
        const {onChangeHandler} = this;
        const {current = 0} = this.state;
        return (
          <View className='hupu-tabBar'>
            <LdmTabBar
              fixed
              tabList={[{
                          title: '首页',
                          image: 'https://hupu-soccer.oss-cn-hangzhou.aliyuncs.com/huya/smallprogram/footer/home.png',
                          selectedImage: 'https://hupu-soccer.oss-cn-hangzhou.aliyuncs.com/huya/smallprogram/footer/home-selected.png'
                        }, {
                          title: '课程',
                          image: 'https://hupu-soccer.oss-cn-hangzhou.aliyuncs.com/huya/smallprogram/footer/course.png',
                          selectedImage: 'https://hupu-soccer.oss-cn-hangzhou.aliyuncs.com/huya/smallprogram/footer/course-selected.png'
                        }, {
                          title: '我的',
                          image: 'https://hupu-soccer.oss-cn-hangzhou.aliyuncs.com/huya/smallprogram/footer/me.png',
                          selectedImage: 'https://hupu-soccer.oss-cn-hangzhou.aliyuncs.com/huya/smallprogram/footer/me-selected.png'
                        }
              ]}
              current={current}
              onChange={onChangeHandler}
            />
          </View>
        )
      }
    }
    
    export default TabBarDemo;

图片选择器

ImagePicker

| 属性名 | 属性类型 | 属性描述 | 默认值 | | :----: | :----: | :----: | :----: | | action | string | 上传图片的url | '' | | name | string | 文件对应的 key,开发者在服务端可以通过这个 key获取文件的二进制内容 | '' | | header | object | HTTP请求 Header,Header中不能设置Referer | {'content-type': 'multipart/form-data'} | | data | object | HTTP请求中其他额外的form data | {} | | className | string | 外部传入样式表 | '' | | files | array | 图片文件数组,元素为对象,包含属性 url（必选) | [] | | mode | enum | 图片预览模式,详见(微信开发者文档) | 'scaleToFill' | | showAddBtn | boolean | 是否显示添加图片按钮 | true | | multiple | boolean | 是否支持多选 | false | | count | number | 最多可以选择的图片张数,2.0.2版本起支持 | 9 | | sizeType | array | 所选的图片的尺寸,2.0.2版本起支持 | [] | | sourceType | array | 选择图片的来源,2.0.2版本起支持 | [] | | length | number | 单行的图片数量 | 3 | | onAdd | function | files 值发生添加触发的回调函数,operationType 操作类型有添加,移除,如果是移除操作,则第三个参数代表的是移除图片的索引 | (data: {}, statusCode: number, {key: number, value: {}, total: number}) => void | | onAddBefore | function | files 值发生添加触发前的回调函数 | () => void | | onAddUploadBefore | function | files 值发生添加触发上传文件前的回调函数 | (file) => void | | onRemove | function | files 值发生移除触发的回调函数,operationType 操作类型有添加,移除,如果是移除操作,则第三个参数代表的是移除图片的索引 | (file, index) => {} | | onRemoveBefore | function | files 值发生移除触发前的回调函数 | (file, index) => void | | onImageClick | function | 点击图片触发的回调 | (index: number, file: Object) => void | | onFail | function | 选择失败触发的回调 | (msg: string) => void |

使用

    import Taro, {Component} from '@tarojs/taro';
    import {
      View
    } from '@tarojs/components';
    import {
        LdmImagePicker
    } from 'ldm-taro-frc';
    
    import 'taro-ui/dist/style/components/image-picker.scss';
    import 'taro-ui/dist/style/components/icon.scss';
    import './index.less';
    
    
    class ImagePickerDemo extends Component {
      static options = {
        addGlobalClass: true
      };
    
      state = {
        files: []
      };
    
      config = {
        navigationBarTitleText: '图片选择器'
      };
    
      componentDidMount() {
      }
    
      /**
       * 图片组添加时所触发的事件
       * @param file
       */
      onAdd = (data, statusCode, {key, value: fileItem, total: length}) => {
      }
    
      /**
       * 图片组添加触发前所触发的事件
       */
      onAddBefore = () => {
      }
    
      /**
       * 图片组添加触发上传文件前的回调函数
       * @param file
       */
      onAddUploadBefore = (file) => {
      }
    
      /**
       * 图片组移除文件的回调函数
       */
      onRemove = (file, index) => {
      }
    
      /**
       * 图片加载失败时所触发的事件
       * @param mes
       */
      onFail(mes) {
        console.log(mes)
      }
    
      /**
       * 点击预览图片时所触发的事件
       * @param index
       * @param file
       */
      onImageClick(index, file) {
        console.log(index, file)
      }
    
      render() {
        const {files = []} = this.state;
        const {
          onFail = () => {
          },
          onImageClick = () => {
          },
          onAdd = () => {
          },
          onAddBefore = () => {
          },
          onAddUploadBefore = () => {
          },
          onRemove = () => {
          }
        } = this;
        return (
          <View className='hupu-imagePicker'>
            <LdmImagePicker
              action='https://pet.api.1jtec.com/tinyStatics/uploadImg/v2'
              name='file'
              files={files}
              data={{type: 'ORMAL'}}
              onFail={onFail}
              onImageClick={onImageClick}
              onAdd={onAdd}
              onAddBefore={onAddBefore}
              onAddUploadBefore={onAddUploadBefore}
              onRemoveBefore={() => {}}
              onRemove={onRemove}
            />
          </View>
        )
      }
    }
    
    export default ImagePickerDemo;

消息功能发送

InputPanel

| 属性名 | 属性类型 | 属性描述 | 默认值 | | :----: | :----: | :----: | :----: | | className | string | 外部传入样式表 | '' | | hasPanel | boolean | 是否存在面板浮层按钮 | true | | onGetMoreFunc | function | 获取更多的功能(发送图片以及商品详情链接等等) | () => void | | inputDistanceBoard | number | input消息功能发送输入框距离手机底部的距离 | 0 | | isPanel | boolean | 是否存在弹出面板浮层 | false | | isFocus | boolean | 是否输入咨询框聚焦 | false | | renderPanel | function | 面板浮层渲染的内容 | () => void | | value | string | 输入框当前值,开发者需要通过 onChange 事件来更新 value 值,必填 | '' | | placeholder | string | 占位符 | string | | onChange | function | 输入框值改变时触发的事件 | (event) => void | | onConfirm | function | 点击完成按钮时触发,可以获取 event 参数 | () => void | | onFocus | function | 输入框被选中时触发的事件 | () => void | | onBlur | function | 输入框失去焦点时触发的事件 | (event) => void | | onKeyboardChange | function | 键盘高度发生变化的时候触发此事件 | (height) => void |

使用

    import Taro, {Component} from '@tarojs/taro';
    import {
      View
    } from '@tarojs/components';
    import {
        LdmInputPanel
    } from 'ldm-taro-frc';
    
    import './index.less';
    
    import 'taro-ui/dist/style/components/flex.scss';
    import 'taro-ui/dist/style/components/button.scss';
    import 'taro-ui/dist/style/components/icon.scss';
    import 'taro-ui/dist/style/components/input.scss';
    import 'taro-ui/dist/style/components/loading.scss';
    
    
    class InputPanelDemo extends Component {
      static options = {
        addGlobalClass: true
      };
    
      state = {
        //是否输入咨询框聚焦
        isFocus: false,
        //是否存在弹出面板浮层
        isPanel: false,
        //获取手机键盘的高度转变为输入框底部的距离
        inputDistanceBoard: 0,
        //输入框当前值
        value: '',
      };
    
      config = {
        navigationBarTitleText: '消息功能发送'
      };
    
      componentDidMount() {
    
      }
    
      /**
       * 输入框值改变时触发的事件
       * @param val
       */
      onChangeValueHandler = (val) => {
        val = val.target ? val.target.value : val;
        this.setState({
          value: val
        });
      };
    
      /**
       * 输入框聚焦时触发
       * @尹文楷
       */
      onFocusHandler = (value) => {
        this.setState({
          isFocus: true,
          isPanel: false
        });
      };
    
      /**
       * 输入框失焦时触发
       * @尹文楷
       */
      onBlurHandler = (event) => {
        const {isPanel} = this.state;
        let new_state = Object.assign({}, {isFocus: false}, isPanel ? {} : {inputDistanceBoard: 0});
        this.setState(new_state);
      };
    
      /**
       * 监听键盘高度发生变化的时候触发此事件
       */
      onKeyboardChangeHandler = (height = 0) => {
        this.setState({
          inputDistanceBoard: height
        });
      };
    
      /**
       * 获取更多的功能(发送图片以及商品详情链接等等)
       */
      onGetMoreFuncHandler = () => {
        const {isPanel = false} = this.state;
        this.setState({
          inputDistanceBoard: !isPanel ? 180 : 0,
          isPanel: !isPanel
        });
      };
    
      /**
       * 输入进行咨询
       * @尹文楷
       */
      onPostMessageHandler = () => {
      };
    
      /**
       * 将面板隐藏
       */
      onPanelHide = (e = {}) => {
        this.setState({
          isPanel: false,
          isFocus: false,
          inputDistanceBoard: 0
        });
        //取消冒泡事件
        e.stopPropagation && e.stopPropagation();
      };
    
      render() {
        const {
          isPanel = false,
          isFocus = false,
          inputDistanceBoard = 0,
          value = ''
        } = this.state;
        const {
          onChangeValueHandler = () => {
          },
          onFocusHandler = () => {
          },
          onBlurHandler = () => {
          },
          onKeyboardChangeHandler = () => {
          },
          onPostMessageHandler = () => {
          },
          onGetMoreFuncHandler = () => {
          },
          onPanelHide = () => {
          }
        } = this;
        return (
          <Block>
            <View className='ldm-inputPanel'
                  onClick={onPanelHide}
            >
            </View>
            <View className='ldm-inputPanel-detail'>
              <LdmInputPanel
                inputDistanceBoard={inputDistanceBoard}
                isPanel={isPanel}
                isFocus={isFocus}
                value={value}
                placeholder='请输入内容'
                onFocus={onFocusHandler}
                onBlur={onBlurHandler}
                onChange={onChangeValueHandler}
                onConfirm={onPostMessageHandler}
                onKeyboardChange={onKeyboardChangeHandler}
                onGetMoreFunc={onGetMoreFuncHandler}
                renderPanel={<View>
                </View>}
              />
            </View>
          </Block>
        )
      }
    }
    
    export default InputPanelDemo;

样式

    page {
      height: 100%;
    
      .ldm-inputPanel {
        position: relative;
        height: calc(100% - 52PX);
        z-index: 1;
      }
    
      .ldm-inputPanel-detail {
    
        .ldm-communications-communicationsBar {
          &-communicationsValue {
            &.at-input {
              &:after {
                border: none;
              }
            }
    
            .at-input {
    
              &__container {
                width: 100%;
              }
    
              &__input {
                padding: 16px 16px 16px 28px;
                margin-left: 16px;
                background-color: #f7f7f7;
                border-radius: 36px;
              }
    
              &__children {
                &:after {
                  border: none;
                }
              }
            }
          }
    
          &-post {
            &-button {
              width: 48PX;
              height: 36PX;
              line-height: 36PX;
              background-color: #fb2a5d;
              border-color: #fb2a5d;
              color: #fff;
            }
          }
    
    
          //.at-search-bar__input-cnt {
          //
          //    height: 36PX;
          //
          //  .at-search-bar__placeholder-wrap {
          //
          //
          //      height: 36PX;
          //      justify-content: flex-start;
          //      padding-left: 4PX;
          //
          //    .at-icon {
          //      display: none;
          //    }
          //  }
          //
          //  .at-search-bar__input {
          //    height: 36PX !important;
          //    font-size: 16PX !important;
          //    padding-left: 8PX;
          //  }
          //
          //  .at-search-bar__clear {
          //    height: 36PX;
          //    font-size: 16PX;
          //  }
          //}
          //
          //.at-search-bar__action {
          //  height: 36PX;
          //  line-height: 36PX;
          //  background-color: #fb2a5d;
          //}
          //
          //&-focus {
          //  .at-search-bar__action {
          //    margin-left: 10PX;
          //  }
          //}
        }
      }
    }

上传图片或者视频

Upload

| 属性名 | 属性类型 | 属性描述 | 默认值 | | :----: | :----: | :----: | :----: | | className | string | 外部传入样式表 | '' | | count | number | 类型为图片时,最多可以选择的图片张数 | 9 | | compressed | boolean | 类型为视频时,是否压缩所选择的视频文件 | true | | maxDuration | number | 类型为视频时,拍摄视频最长拍摄时间,单位秒 | 60 | | camera | string | 类型为视频时,默认拉起的是前置或者后置摄像头。部分 Android 手机下由于系统 ROM 不支持无法生效 | 'back' | | type | string | 选择上传文件的类型,'image' or 'video',必传 | '' | | sourceType | array | 选择图片 or 视频的来源,必传 | ['album'] | | sizeType | array | 所选的图片的尺寸 | ['original'] | | text | string | 上传文件组件内部文案 | '' | | callBack | function | 上传文件成功或者失败之后的回调,必传 | (tempFilePath, size, duration, height, width) => void | | done | function | 上传文件完成之后的回调,必传 | (res) => void |

使用

import Taro, {Component} from '@tarojs/taro';
import {
  View
} from '@tarojs/components';
import {
    LdmUpload
} from 'ldm-taro-frc';

import 'taro-ui/dist/style/components/icon.scss';
import './index.less';


class UploadDemo extends Component {
  static options = {
    addGlobalClass: true
  };

  state = {};

  config = {
    navigationBarTitleText: '上传图片视频'
  };

  componentDidMount() {
  }

  render() {
    const {} = this;
    return (
      <View className='ldm-upload'>
        <View>
          上传图片:
          <LdmUpload
            className='ldm-upload-image'
            count={6}
            text='upload image'
            type='image'
            sourceType={['album', 'camera']}
            callBack={(path = '', size = 0) => {
              console.log(path);
            }}
            done={(res = {}) => {
              console.log(res);
            }}
          />
        </View>
        <View>
          上传视频:
          <LdmUpload
            className='ldm-upload-video'
            text='upload video'
            type='video'
            sourceType={['album', 'camera']}
            maxDuration={40}
            camera='back'
            callBack={(path = '', size = 0) => {
              console.log(path);
            }}
            done={(res = {}) => {
              console.log(res);
            }}
          />
        </View>
      </View>
    )
  }
}

export default UploadDemo;

样式

.ldm-upload {
  &-image,
  &-video {
    width: 280px;
    border: 2px solid #333;
    margin: 20px 0;
    border-radius: 8px;
  }

  &-add {
    margin-right: 4px;
  }
}