angular-weui

weui的angular组件版本。同时封装微信jssdk接口为angular服务。依赖：

angular 1.x

weui: https://github.com/weui/weui

jquery

微信jssdk 1.1.0

TODO list

核心组件

浏览器检测组件

actionsheet 组件
dialog 组件

alert

confirm

toast 组件

loading

complete

show message

wu-click 组件：防止重复点击
进度条组件
图片预览组件
表单组件

图片上传

文本域

api说明

WuBrowserChecker

客户端检测.支持android/ios/window版本微信客户端,mac/linux/window平台上的各种浏览器检测. 同时会在window作用域中创建一个weui_client_browser_checker对象存放客户端信息

WuBrowserChecker.engine // 呈现引擎信息

WuBrowserChecker.browser // 浏览器信息

WuBrowserChecker.system // 系统平台信息

WuActionSheet

WuActionSheet是一个angular服务，只提供一个方法：open(options)

WuActionsSheet open 方法

options参数

btnGroups (Type: Array) - 按钮组配置列表。每个按钮组提供 action (Type:String, Default: cancel) 和 buttons参数：action指定点击过后执行结果通知时的通道，取值只能是ok或cancel；buttons指定一组中包含的按钮对象，每个对象包含的属性有title和value,title按钮显示信息，value按钮点击时的返回值
返回值：返回一个angular的 WuActionSheet 实例。提供有result，close等方法，对用户点击结果和 WuActionSheet 进行控制

Example

WuActionSheet.open({
    btnGroups:[
        {
            action: 'Ok',
            buttons:[
                {
                    title:'11',
                    value:'11'
                },
                {
                    title:'22',
                    value:'22'
                },
                {
                    title:'33',
                    value:'33'
                },
                {
                    title:'44',
                    value:'44'
                }
            ]
        },
        {
            action: 'Cancel',
            buttons:[
                { title: 'cancel1', value: 'cancel1'}
            ]
        },
        {
            action: 'Close',
            buttons:[
                { title: 'cancel11', value: 'cancel1'}
            ]
        }
    ]
}).result.then(function (btn) {
    console.log(btn)
}, function (cancel) {
    console.log(cancel)
});

WuDialog

WuDialog是个angular服务，提供弹框服务。提供的方法有：open(options)、alert(options)、confirm(options)

WuDialog open 方法

WuDialog.open({
    title:'自定义按钮',
    content:'自定义按钮测试',
    buttons:[
        { action:'ok', title:'btn1', class: 'default', value:'btn1' },
        { action:'ok', title:'btn2', class: 'primary', value:'btn2' },
        { action:'cancel', title:'btn3', class: 'default', value:'btn3' },
        { action:'cancel', title:'btn4', class: 'primary', value:'btn4' }
    ]
}).result.then(function () {
        console.log("OK: ", arguments[0])
    },function () {
        console.log("Cancel: ", arguments[0])
    })

WuDialog alert 方法

WuDialog.alert({
    title: '提示框',
    content: '<div style="color: red;">xxxx Alert内容<div>'
}).result.then(function () {
        console.log('ok');
    }, function () {
        console.log('close alert')
    });

WuDialog confirm 方法

WuDialog.confirm({
    title: '确认框',
    content: '<div style="color: red;">xxxx确认内容<div>'
}).result.then(function () {
        console.log('ok');
    }, function () {
        console.log('cancel')
    });

WuToast

WuDialog是个angular服务，提供消息提醒服务。提供的方法有：message(options)、complete(options)、loading(options)

WuToast message 方法

var loadingObj = WuToast.message({
    message:'test asdfasdf sdfasdf asdfsadfv sdfsad asfsadf sdfasfda sdfasfasdf message show'
    time: 2000
});

// 或者手多关闭
setTimeout(function () {
 loadingObj.close();
}, 1000)

WuToast complete 方法

WuToast.complete({
    time:1000
});

WuToast loading 方法

var loadingObj = WuToast.loading({
                message:'数据加载中'
            });
setTimeout(function () {
    loadingObj.close();
}, 1000)

wu-progress

wu-progress 是一个angular指令，提供进度条显示。

<h1>wuProgress </h1>
<input type="number" data-ng-model="wuProgress">

<div wu-progress="testCtrl.wuProgress">
    <i class="weui-icon-cancel" ng-if="testCtrl.wuProgress<100" data-ng-click="testCtrl.wuProgress=0;"></i>
    <i class="weui-icon-success" ng-if="testCtrl.wuProgress>=100" data-ng-click="testCtrl.wuProgress=0;"></i>
</div>
<div wu-progress="wuProgress" wu-color="'#ff33dd'" wu-height="12"></div>

wu-click

wu-click 是一个angular指令，提供事件点击服务，可以防止用户快速点击按钮。

<h1>button  wu-click test</h1>
<a href="javascript:;" class="weui-btn weui-btn_default" data-wu-click="testCtrl.wuButtonTest()">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_default" wu-interval="2000" wu-click="testCtrl.wuButtonTest1(testCtrl.testVar)">按钮</a>

angular-weui 开发

克隆 angular-weui 工程

git clone [email protected]:threeq/angular-weui.git

cd angular-weui

安装工程依赖库

# npm 环境依赖
npm intall

# 使用 bower 安装angular-weui依赖库
npm run bower

启动工程

npm run dev

这时会自动启动浏览器打开 demo 界面,如果没有打开可以自己打开浏览器输入地址: http://localhost:3002/test.html

工程打包

npm run dist

lurongkai / angular-weui Goto Github PK

angular-weui's Introduction