微信小程序组件和功能封装，简洁的组件化编程

基于微信的Component自定义组件封装，简洁的组件化编程，关于Component自定义组件参考 Component API。

注意需要开启微信开发者工具中的ES6转ES5功能，请使用大于1.6.3版本的小程序基础库，并将微信更新到最新版本。

如果你需要一套代码开发微信小程序和支付宝小程序，那么 mpapi 插件 也许能协助你（微信小程序和支付宝小程序 API 兼容插件）

项目预览

主要内容

• weapp组件，自定义封装和优化的组件
• common.js，对公共功能函数和小程序API的封装
• 第三方UI展示，方便预览查找，基本不做修改

目录结构

请用微信开发者工具打开 src 目录

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

主要特点

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

组件使用

• 需要在使用组件的页面json配置文件中加入以下字段，配置组件的引用声明usingComponents

// page.json
{
  "usingComponents": {
    "weapp-toast": "/components/weapp/toast/toast",
    "weapp-tab": "/components/weapp/tab/tab"
  }
}

• 使用组件，引入组件模板

<!-- page.wxml-->
<weapp-toast title="{{ toastTitle }}" bind:hide="onToastHide" />
<weapp-tab list="{{ list1 }}" active-index="{{activeIndex}}" bind:change="onTabChange" />

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

// tab.json
{
  "navigationBarTitleText": "Tab",
  "usingComponents": {
    "weapp-tab": "/components/weapp/tab/tab"
  }
}

<!-- tab.wxml -->
<weapp-tab list="{{ list1 }}" active-index="{{activeIndex}}" bind:change="onTabChange" />

// tab.js
Page({
  data: {
    list1: ['选项1', '选项2', '选项3']
  },
  handlerSelect(){
    this.setData({
      activeIndex: 1
    });
  },
  onTabChange(event){
    console.log(event.detail.activeIndex)
  }
})

weapp组件

• Toast 浮动提示
• Tab 选项卡
• CityPicker 城市选择
• Loader 加载更多-暂无数据
• Popover 弹出菜单
• Toptip 顶部提示
• CalendarPicker 日历选择

公共方法

• share 页面转发分享
• type 类型判断
• param 将对象解析成url字符串
• unparam 将url字符串解析成对象
• navigateTo 保留当前页面，跳转到应用内的某个页面
• redirectTo 关闭当前页面，跳转到应用内的某个页面
• switchTab 跳转到tabBar页面，并关闭其他所有非tabBar页面
• reLaunch 关闭所有页面，打开到应用内的某个页面

---

weapp-toast

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

属性

• title提示信息
• delay自动关闭的延迟时间，单位毫秒，默认: 1500

事件

• hide关闭之后回调

使用

<weapp-toast title="{{ toastTitle }}" bind:hide="onToastHide" />

weapp-tab

选项卡

属性

• list选项卡标题
• active-index选中的索引，默认: 0
• theme主题样式，默认为空，可传入weapp-tab或其它自定义样式

事件

• change切换的回调，参数event，其中event.detail.activeIndex为选中的当前索引

使用

<weapp-tab list="{{ list1 }}" active-index="{{activeIndex}}"  bind:change="onTabChange" />

weapp-city-picker

城市选择

属性

• region提示信息

事件

• change切换的回调，参数event，其中event.detail.region为选择的区域信息

使用

<weapp-city-picker show="{{isCityPickerShow}}" bind:change="onChangeCity" />

weapp-loader

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

属性

• icon-type小程序icon组件的type类型，默认: search
• status当前的状态，可选值: loading加载中、nomore没有更多、empty暂无数据，默认: loading
• empty-txt暂无数据提示文字，默认: 暂无数据
• loading-txt加载中提示文字，默认: 正在加载
• nomore-txt没有更多提示文字，默认: 没有更多数据了

使用

<weapp-loader status="{{status}}" />

weapp-popover

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

属性

• list菜单列表
• page-selector整个页面最外层容器的CSS的选择器，默认为.page
• elem-id根据哪个元素定位，元素的ID
• 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

事件

• select选择每项的回调，参数event，其中event.detail.item为选中的当前项
• show显示的回调
• hide隐藏的回调

使用

<weapp-popover list="{{list}}" dir="{{dir}}" elem-id="{{elemId}}" show="{{show}}" bind:select="onSelectPopover" />

weapp-toptip

顶部提示

属性

• title提示信息
• type提示类型，success成功、error失败、warn警告，默认: default
• delay自动关闭的延迟时间，单位毫秒，默认: 1500

事件

• hide关闭之后回调

使用

<weapp-toptip type="{{ type }}" title="{{ title }}" />

weapp-calendar-picker

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

属性

• start-date开始日期
• end-date结束日期
• current-date默认选择的日期
• show是否一开始就显示，默认: false
• current默认显示第几个月，从开始日期的月份为第一个月，默认: 0

事件

• change选中日期的回调函数，参数event，其中event.detail.currentDate为选中的当前日期

使用

<weapp-calendar-picker start-date="2017-07-07" end-date="2018-08-08" show="{{ isCalendarPickerShow }}" bind:change="onChangeDate" />

---

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

• font-awesome (4.7) https://github.com/FortAwesome/Font-Awesome
• weui-wxss https://github.com/Tencent/weui-wxss

项目截图

License

MIT，享受开源的乐趣。