hbteam / Weex Droplet Ui
Licence: mit
水滴UI一个轻量级weex UI组件库,包含表单元素,tabbar,picker城市三级联动选择,actionsheet,switch等一系列常用组件
Stars: ✭ 177
Projects that are alternatives of or similar to Weex Droplet Ui
Mln
高性能、小巧、易上手的移动跨平台开发框架. A framework for building Mobile cross-platform apps with Lua
Stars: ✭ 1,343 (+658.76%)
Mutual labels: weex
Awesome Weex
A curated list of awesome Weex guides, articles, sites, tools, projects and resources.
Stars: ✭ 1,539 (+769.49%)
Mutual labels: weex
Vue Auto Puzzle
Jigsaw puzzle based on Vue(基于Vue的拼图小游戏,可自动拼图。还包含Weex版)
Stars: ✭ 127 (-28.25%)
Mutual labels: weex
Webpack
🔥 A full-featured , A Weex and Vue.js project,which is an awesome solution for building Dingtalk microapp with extremely high performanece.
Stars: ✭ 81 (-54.24%)
Mutual labels: weex
Amap Running App For Apache Weex
amap-running-app-for-apache-weex is a third party plugin, and is not developed nor maintained by Apache Weex.
Stars: ✭ 122 (-31.07%)
Mutual labels: weex
Weex Android Joke
A joke android app,powered by alibaba's weex.
Stars: ✭ 112 (-36.72%)
Mutual labels: weex
Weex Start Kit
A weex + vue template to build web/Android/iOS project
Stars: ✭ 155 (-12.43%)
Mutual labels: weex
Weex Eleme
The best practice of weex development guide, 仿饿了么V7.28
Stars: ✭ 82 (-53.67%)
Mutual labels: weex
Opensource
♨️ 分享GitHub优秀开源项目和主流开发使用的网站、解决问题方案收集以及学习网站或资料,涵盖了iOS, macOS X, Blockchain, Flutter, Weex, H5, Games, C++, Script等多方面的内容,其中iOS大致包涵以下内容:音视频;IM和直播;逆向开发;图像相关(OpenGL, Metal, GPUImage);内购(IAP), ApplePay和第三方支付;安全攻防和应用加固, 数据安全和算法;常用第三方库;导航栏和状态栏;侧边菜单;数据持久;蓝牙, 手势指纹面容ID解锁, 图片浏览器, 扫码, 下拉和上拉刷新, 指示器, Toast, Menu, Sensor, Privacy, WebView和进度条, 动画, 选择器, 搜索, 分享, 图片验证码, 设备相关信息, 广告, 高仿项目及Demo等。
Stars: ✭ 123 (-30.51%)
Mutual labels: weex
Gsygithubapp
超完整的React Native项目,功能丰富,适合学习和日常使用。GSYGithubApp系列的优势:我们目前已经拥有Flutter、Weex、ReactNative、kotlin 四个版本。 功能齐全,项目框架内技术涉及面广,完成度高,配套文章,适合全面学习,对比参考。开源Github客户端App,更好的体验,更丰富的功能,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验Σ( ̄。 ̄ノ)ノ。同款Weex版本 : https://github.com/CarGuo/GSYGithubAppWeex 、同款Flutter版本 : https://github.com/CarGuo/GSYGithubAppFlutter 、原生 kotlin 版本 https://git…
Stars: ✭ 2,168 (+1124.86%)
Mutual labels: weex
水滴UI
install
npm i weex-droplet-ui -S
playground扫一扫查看demo演示
HTML5 demo演示
https://hbteam.github.io/weex-droplet-ui/index/index.html
关于文档
https://houbank.github.io/dropletui-docs
联系我们
如您在使用我们的“水滴UI”,有任何问题可以添加微信号springalsky,或者给我们提issue。
配置
因未编译成ES5发布到npm,所以webpack.config.js需要配置排除node_modules下包含weex的文件。
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
}],
exclude: /node_modules(?!\/.*(weex).*)/
}
UI组件代码按需加载
- npm i babel-preset-stage-0 babel-plugin-component -D
- .babelrc配置如下
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-droplet-ui",
"libDir": "packages",
"style": false
},
...其他UI,如weex-ui
]
]
}
Usage
<template>
<div>
<wx-button @wxClick="handleClick">点击测试</wx-button>
</div>
</template>
<script>
import { WxButton } from 'weex-droplet-ui';
const modal = weex.requireModule('modal');
// import WxButton from 'weex-droplet-ui/packages/wx-button';
export default {
components: { WxButton },
methods: {
handleClick () {
modal.toast({
message: 'test'
});
}
}
};
</script>
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].