/weapp

:penguin: 微信小程序组件和功能封装

Primary LanguageJavaScriptMIT LicenseMIT

weapp

微信小程序组件和功能封装（持续更新中...）

解决的痛点：由于小程序和普通网页程序有所区别，组件的调用和使用相对有点麻烦。此处封装的组件和功能函数是为了使用起来更加的简单，减少麻烦的data设置、组件event事件绑定、组件的隔离与复用等问题。此处未使用任何第三方框架来构建，只使用了WeUI样式库和FontAwesome字体图标。几乎零学习成本，如果有什么问题，欢迎提个Issue。

注意需要开启微信开发者工具中的ES6转ES5功能，项目中的代码以最新的小程序基础库版本为主，低版本API不做兼容性考虑。如果使用有问题，请使用最新版本基础库，并将微信更新到最新版本。

项目预览

weapp组件 weapp组件

主要内容

目录结构

├─assets ---------- 静态资源文件
│  ├─images ---------- 公共图片
│  └─js -------------- 公共的JS
│     └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│  ├─libs ------------ 第三方库
│  └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│  ├─index ----------- 首页
│  ├─libs ------------ 第三方库页面
│  └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md

主要特点

  • 组件调用简单
  • 面向对象组件开发，可配置、可扩展、可复用
  • 使用ES6代码特性
  • 小程序API的二次封装，如转发分享
  • 公共方法的封装，如URL参数转换

使用注意

  • 每个组件都必须传入唯一一个id，不能与页面data中已经包含的字段相同
  • 组件模板数据统一使用data={{ _data_: componentId }}形式，componentId与组件参数id必须一致，默认每个组件都有一个id
  • 个别组件的模板template一个页面只需要使用一次，id参数可以省略（使用默认），目前此类组件有：Toast、Popover、Toptip

下面是展示Tab组件的简单使用，具体示例参考项目内部pages/weapp/tab中代码。其它类型组件使用基本和这种调用方式类似。

<!-- wxml -->
<import src="/components/weapp/tab/index.wxml" />

<template is="weapp-tab" data="{{ _data_: oTab1 }}"></template>
// js
import weapp from '../../../components/weapp/index';

Page({
  onReady() {
    // 初始化组件
    weapp.Tab({
      id: 'oTab1',
      list: ['选项1', '选项2', '选项3']
    });
  }
})

weapp组件

公共方法

weapp.Toast

浮动提示，普遍在移动开发中使用的Toast组件，与小程序的showToast不同

参数
  • title提示信息
  • delay自动关闭的延迟时间，单位毫秒，默认: 1500
  • onHide关闭之后回调
方法
  • show显示提示
  • hide关闭提示
使用
weapp.Toast.show([title], [delay], [onHide]);

weapp.Tab

选项卡

参数
  • list选项卡标题
  • activeIndex选中的索引，默认: 0
  • className主题样式，默认为空，可传入weapp-tab或其它自定义样式
  • onChange切换的回调，参数index索引
方法
  • select激活选项卡，传入参数index索引
使用
let ActivityTab = weapp.Tab({
  list: ['活动1', '活动2'],
  className: 'weapp-tab',
  onChange(idx) {
    console.log('活动-' + idx);
  }
});

// 选择第二个（索引为1）
ActivityTab.select(1);

weapp.CityPicker

城市选择

参数
  • region提示信息
  • onChange切换的回调，参数region选择的区域信息
  • onSetLabel修改显示的文字，必须返回要显示的字符串内容，参数region
使用
weapp.CityPicker({
  onChange(region){
    console.log(region)
  },
  onSetLabel(region){
    return '您选择的是：' + region.join(', ');
  }
});

weapp.Loader

加载更多、暂无数据提示，通常配合上拉数据列表使用

参数
  • iconType小程序icon组件的type类型，默认: search
  • status当前的状态，可选值: loading加载中、nomore没有更多、empty暂无数据，默认: loading
  • emptyTxt暂无数据提示文字，默认: 暂无数据
  • loadingTxt加载中提示文字，默认: 正在加载
  • noMoreTxt没有更多提示文字，默认: 没有更多数据了
方法
  • setStatus设置当前状态，传入参数status，可选值: loading、nomore、empty
使用
let oLoader = weapp.Loader({
  iconType: 'search',
  status: 'loading',
  emptyTxt: '暂无数据',
  loadingTxt: '正在加载',
  noMoreTxt: '没有更多数据了'
});

// 设置成暂无数据状态
oLoader.setStatus('empty');

weapp.Popover

弹出菜单，最多12个可支持的箭头方位，满足绝大部分场景

weapp.Popover

参数
  • list菜单列表
  • pageSelector整个页面最外层容器的CSS的选择器，默认为.page
  • onSelect选择每项的回调，参数index索引
  • dir箭头方位，可选值tl tc tr rt rc rb bl bc br lt lc lb，分别代表上右下左中，组合而成的12个方位
    • tl 对应 top-left
    • tc 对应 top-center
    • tr 对应 top-right
    • rt 对应 right-top
    • rc 对应 right-center
    • rb 对应 right-bottom
    • bl 对应 bottom-left
    • bc 对应 bottom-center
    • br 对应 bottom-right
    • lt 对应 left-top
    • lc 对应 left-center
    • lb 对应 left-bottom
方法
  • show显示对应Popover，第一个参数event事件对象（来源于点击的元素），或者传入元素的id（Popover组件根据此的元素位置定位）、第二个参数dir，可选（箭头显示方位）
  • hide隐藏对应Popover
使用

Popover组件会根据元素计算可以显示的箭头方位，优先级为：show方法的dir参数 -> 组件初始化默认的dir参数 -> 组件计算之后的第一个dir参数，如果传递的dir箭头方位不支持显示，那么默认使用第一个支持的方位，定位显示的元素需要有id属性。

let oPopover = weapp.Popover({
  list: ['选项1', '选项2', '选项3'],
  onSelect(idx){
    console.log(idx);
  }
});

// 显示弹出菜单，箭头方位：上右 top-right
oPopover.show('btnPopover', 'tr');

weapp.Toptip

顶部提示

参数
  • title提示信息
  • type提示类型，success成功、error失败、warn警告，默认: default
  • delay自动关闭的延迟时间，单位毫秒，默认: 1500
  • onHide关闭之后回调
方法
  • success显示成功提示，参数：title, delay, onHide
  • error显示失败提示，参数：title, delay, onHide
  • warn显示警告提示，参数：title, delay, onHide
  • show显示提示，参数：title, type, delay, onHide
  • hide关闭提示
使用
weapp.Toptip.success('提示信息');

weapp.CalendarPicker

日历选择，支持多个月份滑动切换展示，左右点击切换月份，切换到今天

weapp.CalendarPicker

参数
  • startDate开始日期
  • endDate结束日期
  • currentDate默认选择的日期
  • show是否一开始就显示，默认: false
  • current默认显示第几个月，从开始日期的月份为第一个月，默认: 0
  • onChange选中日期的回调函数
方法
  • show显示日历
  • hide隐藏日历
使用
let oCP = weapp.CalendarPicker({
  startDate: '2017-07-07',
  endDate: '2018-08-08',
  onChange: (date)  => {
    
  }
});

oCP.show();

common.share

页面转发分享，除去每个页面的繁杂配置，使用起来更加简单高效，支持页面传递参数 options

参数
  • title显示的标题
  • url转发的页面地址，默认为当前页面地址
使用
import common from '../../assets/js/common';

// common.share([title], [url])

Page({
  onShareAppMessage: common.share()
});

common.type

类型判断，返回Number、String、Boolean、Array、Object、Function等类型字符串

参数
  • value任意需要判断的参数
使用
import common from '../../assets/js/common';

// common.type([value])

common.type(1);            // Number
common.type('abc');        // String
common.type(true);         // Boolean
common.type([]);           // Array
common.type({});           // Object
common.type(function(){}); // Function
common.type(/\d/);         // RegExp
common.type(new Date());   // Date

common.param

将对象解析成url字符串

参数
  • urlObject参数对象，要转换成字符串参数的对象
  • unEncodeURI不使用编码，默认使用编码encodeURIComponent
使用
import common from '../../assets/js/common';

// common.param([urlObject], [unEncodeURI])

let obj = {
  name: 'weapp',
  uid: 8,
  age: 24
};

let params = common.param(obj);

console.log(params); // ?name=weapp&uid=8&age=24

common.unparam

将url字符串解析成对象，与common.param使用相反

参数
  • urlString地址，带url参数的地址
  • unDecodeURI不使用解码，默认使用解码decodeURIComponent
使用
import common from '../../assets/js/common';

// common.unparam([urlString], [unDecodeURI])

let str = '?name=weapp&uid=8&age=24';

let obj = common.unparam(str);

common.navigateTo

common.redirectTo

common.switchTab

common.reLaunch

页面跳转，优化防止快速点击打开两个页面，支持对象形式传url参数，分别对应小程序的wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch

参数
  • url页面地址
  • params页面参数对象
使用
import common from '../../assets/js/common';

// common.navigateTo([url], [params])

Page({
  onTapElem(){
    common.navigateTo('/pages/weapp/popover/popover', {
      userid: 123,
      info: 'Hello,weapp'
    });
  }
});

第三方UI库使用到

字体图标使用FontAwesome，CSS组件样式使用WeUI

项目截图

weapp组件

License

MIT，享受开源的乐趣。