ChanceYu / Weapp
Licence: mit
🐧 微信小程序组件和功能封装,基于微信Component自定义组件开发
Stars: ✭ 235
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Weapp
Weixin Java Miniapp Demo
基于Spring Boot 和 WxJava 实现的微信小程序Java后端Demo
Stars: ✭ 779 (+231.49%)
Mutual labels: wechat-app, wechat, wx, wxapp
Wuss Weapp
🐳wuss-weapp 一款高质量,组件齐全,高自定义的微信小程序UI组件库
Stars: ✭ 338 (+43.83%)
Mutual labels: wxml, wechat, weapp, wxss
Wxappunpacker
wxml被“编译“后”压缩“一下多好!😀
Stars: ✭ 4,487 (+1809.36%)
Mutual labels: wxml, wechat, wxapp, wxss
Alaweb
一套 Vue 代码,多端可用(H5、小程序、苹果App、安卓App、头条等)。系统含150+页面,200+组件(5端通用),30+元件(每个终端独立完成)
Stars: ✭ 837 (+256.17%)
Mutual labels: wechat-app, weapp, wxapp, wxss
Mina Webpack
🍱 Mina single-file-component meets Webpack
Stars: ✭ 77 (-67.23%)
Mutual labels: wxml, wechat, wxss
Weapp Qrcode Base64
微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas
Stars: ✭ 100 (-57.45%)
Mutual labels: wechat, weapp, wxapp
Weapp Fontawesome Component
微信小程序的 fa 图标模块
Stars: ✭ 21 (-91.06%)
Mutual labels: weapp, wxapp, component
Wxapp Redux Starter
微信小程序,集成redux,并且提供了方便快捷的开发环境;内置好奇心日报Demo...
Stars: ✭ 205 (-12.77%)
Mutual labels: wxml, wxapp, wxss
Wechat Weapp Grouputils
微信小程序群应用,包括群通知、群接龙、群投票、群通讯录4大功能
Stars: ✭ 222 (-5.53%)
Mutual labels: wechat-app, wechat, wxapp
Masterwechatapp
『微信小程序』优秀教程、轮子、开源项目 资源汇总
Stars: ✭ 826 (+251.49%)
Mutual labels: wechat-app, wechat, weapp
基于微信的Component自定义组件封装,简洁的组件化编程,关于Component自定义组件参考 Component API。
注意需要开启微信开发者工具中的ES6转ES5功能,请使用大于1.6.3
版本的小程序基础库,并将微信更新到最新版本。
如果你需要一套代码开发微信小程序和支付宝小程序,那么 mpapi 插件 也许能协助你(微信小程序和支付宝小程序 API 兼容插件)
项目预览
主要内容
目录结构
请用微信开发者工具打开 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组件
公共方法
- 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
属性
-
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,享受开源的乐趣。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].