knockout+weui+zepto

主文件wxapp.ts

1>在ts中,建议继承componentui

//操作菜单表 actionsheet

showactionsheet

{

title 上拉菜单标题

btns 操作组 建议不超过5个。

每个定义

{

btnname 名称

color 颜色

operation:()=>{} 操作方法

}

}
//对话框 dialog

showdialog

showactionsheet

{

title 上拉菜单标题

btns 操作组 建议不超过5个。

每个定义

{

btnname 名称

color 颜色

operation:()=>{} 操作方法

}

}
//信息 msg

showmsg

{

title:KnockoutObservable<string>, 标题
    msgtype:KnockoutObservable<number>,类型 0 成功 1失败
    desc:KnockoutObservable<string>,描述
    btnnext:KnockoutObservable<false>,下一步 绿色按钮是否显示
    nextoperation:()=>{},操作
    nextbtnname:KnockoutObservable<string>, 下一步名称
    btnclose:KnockoutObservable<false>, 关闭是否显示
    closeoperation:()=>{},操作
    closebtnname:KnockoutObservable<string>,关闭名称
    urltitle:KnockoutObservable<string>,url名称
    url:KnockoutObservable<string>,url
    footertext:KnockoutObservable<string>结尾名称

}
//时间选择 picker

showdatedialog

{

/*回调函数*/callbackdate: (pickerdataitem[]),
        /*开始日期*/begindate?: string,
        /*结束日期*/enddate?: string,
        /*默认选中日期*/defalutdate?:string

}

pickerdataitem

{

/*显示值*/displaytext: string;
    /*非显示值*/canotselected: KnockoutObservable<boolean>;
    /*主键*/datakey: string;
    /*值*/value: any

}
//地址选择 picker

showcitydialog

{

/*回调函数*/callbackdate: (pickerdataitem[]),
        /*默认选中'省-市-县/区'*/defalutdate?:string

}
//自动提示 toast

showtoast

{

/*toast标题*/toasttitle:string,
        /*自动关闭时间秒,0不关闭*/closetime: number=1,
        /*toast类型,0提示,1等待*/toasttype: number=0

}

closetoast 关闭toast

验证的问题

ko.validation.init({
            registerExtenders: true,
            messagesOnModified: true,
            insertMessages: false,/*如果messageTemplate有,就插入它,否则是<span*/
            //errorsAsTitle: true,
            parseInputAttributes: true,
            //messageTemplate: 'errorft-template',
            //errorClass: 'error',/*显示到input的class上面*/
            errorElementClass: 'weui-cell_warn'
            //decorateInputElement: true
        }, true);

  

页面结构

<div class="weui-cell" data-bind="validationElement: pointnum">
                    <div class="weui-cell-hd">
                        <label class="weui-label">授权站点</label>
                    </div>
                    <div class="weui-cell-bd weui-cell-primary">
                        <input class="weui-input" type="text" name="text" placeholder="请输入授权站点[0-99]" data-bind="textinput: pointnum" />
                    </div>
                   <div class="weui-cell-ft" data-bind="visible: pointnum.isModified() && !pointnum.isValid()">
                        <i class="weui-icon-warn"></i>
                    </div>
                </div>

显示上面错误红字的结构

<!--ko if:(errors.isAnyMessageShown() && errors().length > 0)-->
        <div class="weui-toptips weui-toptips_warn" data-bind="text: (errors().length > 0 ? errors()[0] : '')"></div>
        <!--/ko-->

原文地址:https://www.cnblogs.com/forhell/p/8488928.html