Discover ChanceYu/weapp Open Source project by 枪鱼 (@ChanceYu)

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

基于微信的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)
  }
})

公共方法

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，享受开源的乐趣。

ChanceYu/weapp

ChanceYu

Reviews

Repository Details