Awesome Open Source
Awesome Open Source
weapp

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

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

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

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

项目预览

weapp组件 weapp组件

主要内容

目录结构

请用微信开发者工具打开 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组件

公共方法


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个可支持的箭头方位,满足绝大部分场景

weapp-popover

属性
  • 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

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

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

类型判断,返回NumberStringBooleanArrayObjectFunction等类型字符串

参数
  • 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,享受开源的乐趣。


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,351
component (569
wechat (489
weapp (103
wxapp (78
wechat-app (57
wxml (23
wx (20
wxss (20