文章 - DCloud问答

最全的常用正则表达式（转）

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。
校验数字的表达式
1 数字：^[0-9]$
2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,}$
4 m-n位的数字：^\d{m,n}$
5 零和非零开头的数字：^(0|[1-9][0-9])$
6 非零开头的最多带两位小数的数字：^([1-9][0-9])+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$
8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$
9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]$
12 非零的负整数：^-[1-9][]0-9"$ 或 ^-[1-9]\d$
13 非负整数：^\d+$ 或 ^[1-9]\d|0$
14 非正整数：^-[1-9]\d|0$ 或 ^((-\d+)|(0+))$
15 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$
16 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$
17 正浮点数：^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$
18 负浮点数：^-([1-9]\d.\d|0.\d[1-9]\d)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$
19 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$
校验字符的表达式
1 汉字：^[\u4e00-\u9fa5]{0,}$
2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 长度为3-20的所有字符：^.{3,20}$
4 由26个英文字母组成的字符串：^[A-Za-z]+$
5 由26个大写英文字母组成的字符串：^[A-Z]+$
6 由26个小写英文字母组成的字符串：^[a-z]+$
7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9]+$
10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+
特殊需求表达式
1 Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：<[a-zA-z]+://[^\s] 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$<
4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7 身份证号(15位、18位数字)：^\d{15}|\d{18}$
8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9]{4,15}$
10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$
12 日期格式：^\d{4}-\d{1,2}-\d{1,2}
13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15 钱的输入格式：
16 1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]$
17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9])$
18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9])$
19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
20 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})(.[0-9]{1,2})?$
23 8.1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3}))(.[0-9]{1,2})?$
24 备注：这就是最终结果了,别忘了"+"可以用""替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
26 中文字符的正则表达式：[\u4e00-\u9fa5]27 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
28 空白行的正则表达式：\n\s\r (可以用来删除空白行)
29 HTML标记的正则表达式：<(\S?)[^>]>.?|<.? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
30 首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
31 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
32 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
33 IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用)
34 IP地址：((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))

过滤空字符串"abc 123 def".replace(/\s/g, "")

继续阅读 »

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。
校验数字的表达式
1 数字：^[0-9]$
2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,}$
4 m-n位的数字：^\d{m,n}$
5 零和非零开头的数字：^(0|[1-9][0-9])$
6 非零开头的最多带两位小数的数字：^([1-9][0-9])+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$
8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$
9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]$
12 非零的负整数：^-[1-9][]0-9"$ 或 ^-[1-9]\d$
13 非负整数：^\d+$ 或 ^[1-9]\d|0$
14 非正整数：^-[1-9]\d|0$ 或 ^((-\d+)|(0+))$
15 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$
16 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$
17 正浮点数：^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$
18 负浮点数：^-([1-9]\d.\d|0.\d[1-9]\d)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$
19 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$
校验字符的表达式
1 汉字：^[\u4e00-\u9fa5]{0,}$
2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 长度为3-20的所有字符：^.{3,20}$
4 由26个英文字母组成的字符串：^[A-Za-z]+$
5 由26个大写英文字母组成的字符串：^[A-Z]+$
6 由26个小写英文字母组成的字符串：^[a-z]+$
7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9]+$
10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+
特殊需求表达式
1 Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：<[a-zA-z]+://[^\s] 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$<
4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7 身份证号(15位、18位数字)：^\d{15}|\d{18}$
8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9]{4,15}$
10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$
12 日期格式：^\d{4}-\d{1,2}-\d{1,2}
13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15 钱的输入格式：
16 1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]$
17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9])$
18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9])$
19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
20 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})(.[0-9]{1,2})?$
23 8.1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3}))(.[0-9]{1,2})?$
24 备注：这就是最终结果了,别忘了"+"可以用""替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
26 中文字符的正则表达式：[\u4e00-\u9fa5]27 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
28 空白行的正则表达式：\n\s\r (可以用来删除空白行)
29 HTML标记的正则表达式：<(\S?)[^>]>.?|<.? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
30 首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
31 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
32 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
33 IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用)
34 IP地址：((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))

过滤空字符串"abc 123 def".replace(/\s/g, "")

收起阅读 »

NView模板绘制原生列表教程

列表 NView模板

NView模板封装了list组件，可以绘制原生列表，本文详细介绍list组件的用法。

模板结构

<list>是列表容器标签，<item>是列表项标签，列表组件的模板结构如下：

<list>  
    <item>  
        <!-- 第一个列表项内容 -->  
    </item>  
    <item>  
        <!-- 第二个列表项内容 -->  
    </item>  
</list>

<list>标签必须嵌套在<nview>标签下，默认和父容器<nview>具备相同的宽高；<list>标签支持id、onclick、style通用属性，style属性中支持设置background、position样式。<list>标签内部仅允许嵌套<item>子标签。

<item>表示列表项，默认也和父容器<list>具备一样的宽高，因此实际使用中，需要设置每个列表项的宽高。<item>标签支持id、onclick、style通用属性，style属性中支持设置background、position样式。<item>下允许使用<canvas>、<richtext>两个布局标签，在<canvas>、<richtext>布局容器下，可以绘制图片、文字、按钮等元素。

如下是一个简单的纯文本列表示例：

<nview id="nview1" style="height: 150px;">  
    <list id="list">  
        <item style="height: 30px;">  
            <canvas>  
                <font style="align: left;left: 15px;top:15px;">Item 1</font>  
            </canvas>  
        </item>  
        <item style="height: 30px;">  
            <canvas>  
                <font style="align: left;left: 15px;top:15px;">Item 2</font>  
            </canvas>  
        </item>  
        <item style="height: 30px;">  
            <canvas>  
                <font style="align: left;left: 15px;top:15px;">Item 3</font>  
            </canvas>  
        </item>  
    </list>  
</nview>

运行结果如下：

n-for指令

除了拼凑静态NView标签外，NView模板也支持通过n-for指令将数组中的数据渲染成原生列表，n-for指令需使用item in items的特殊语法，如下是一个示例：

<template>  
    <nviews cachemaxage="86400">  
        <nview style="height: 200px;">  
            <list style="top:10px;">  
                <item style="height: 50px;" n-for="item in data.items">  
                    <canvas>  
                        <!--Logo图片-->  
                        <img src={item.icon} style="left: 15px;width: 35px;height: 35px;"  />  
                        <!--产品名称-->  
                        <font style="align: left;left: 65px;height:35px;">  
                            {item.name}  
                        </font>  
                    </canvas>  
                </item>  
            </list>  
        </nview>  
    </nviews>  
</template>  
<script>  
    module.exports = {  
        data: {  
            items: [  
                {name: "HBuilder",icon: "icon1.png"},  
                {name: "5+Runtime",icon: "icon2.png"},  
                {name: "mui",icon: "icon3.png"}  
            ]  
        }  
    };  
</script>

点击事件

<list>标签支持onclick事件属性，参考模板事件。

<item>标签也支持onclick事件属性，不同于其它标签的是，若列表是通过n-for指令渲染生成的，则<item>标签的点击回调中，可以获得当前列表项对应的数据及当前列表项索引值，如下是一个示例：

<template>  
    <nviews cachemaxage="86400">  
        <nview style="height: 200px;">  
            <list style="top:10px;">  
                <!--列表项增加onclick点击事件-->  
                <item style="height: 50px;" n-for="item in data.items" onclick={this.clickItem}>  
                    <canvas>  
                        <!--Logo图片-->  
                        <img src={item.icon} style="left: 15px;width: 35px;height: 35px;"  />  
                        <!--产品名称-->  
                        <font style="align: left;left: 65px;height:35px;">  
                            {item.name}  
                        </font>  
                    </canvas>  
                </item>  
            </list>  
        </nview>  
    </nviews>  
</template>  
<script>  
    module.exports = {  
        data: {  
            items: [  
                {name: "HBuilder",icon: "icon1.png"},  
                {name: "5+Runtime",icon: "icon2.png"},  
                {name: "mui",icon: "icon3.png"}  
            ]  
        },  
        methods: {  
            //item：当前列表项的数据对象  
            //index：当前列表项索引  
            clickItem:function(item,index,event){  
                plus.nativeUI.alert("name:"+item.name+",index:"+index);  
            }  
        }  
    };  
</script>

继续阅读 »

NView模板封装了list组件，可以绘制原生列表，本文详细介绍list组件的用法。

模板结构

<list>是列表容器标签，<item>是列表项标签，列表组件的模板结构如下：

<list>  
    <item>  
        <!-- 第一个列表项内容 -->  
    </item>  
    <item>  
        <!-- 第二个列表项内容 -->  
    </item>  
</list>

<list>标签必须嵌套在<nview>标签下，默认和父容器<nview>具备相同的宽高；<list>标签支持id、onclick、style通用属性，style属性中支持设置background、position样式。<list>标签内部仅允许嵌套<item>子标签。

<item>表示列表项，默认也和父容器<list>具备一样的宽高，因此实际使用中，需要设置每个列表项的宽高。<item>标签支持id、onclick、style通用属性，style属性中支持设置background、position样式。<item>下允许使用<canvas>、<richtext>两个布局标签，在<canvas>、<richtext>布局容器下，可以绘制图片、文字、按钮等元素。

如下是一个简单的纯文本列表示例：

<nview id="nview1" style="height: 150px;">  
    <list id="list">  
        <item style="height: 30px;">  
            <canvas>  
                <font style="align: left;left: 15px;top:15px;">Item 1</font>  
            </canvas>  
        </item>  
        <item style="height: 30px;">  
            <canvas>  
                <font style="align: left;left: 15px;top:15px;">Item 2</font>  
            </canvas>  
        </item>  
        <item style="height: 30px;">  
            <canvas>  
                <font style="align: left;left: 15px;top:15px;">Item 3</font>  
            </canvas>  
        </item>  
    </list>  
</nview>

运行结果如下：

n-for指令

除了拼凑静态NView标签外，NView模板也支持通过n-for指令将数组中的数据渲染成原生列表，n-for指令需使用item in items的特殊语法，如下是一个示例：

<template>  
    <nviews cachemaxage="86400">  
        <nview style="height: 200px;">  
            <list style="top:10px;">  
                <item style="height: 50px;" n-for="item in data.items">  
                    <canvas>  
                        <!--Logo图片-->  
                        <img src={item.icon} style="left: 15px;width: 35px;height: 35px;"  />  
                        <!--产品名称-->  
                        <font style="align: left;left: 65px;height:35px;">  
                            {item.name}  
                        </font>  
                    </canvas>  
                </item>  
            </list>  
        </nview>  
    </nviews>  
</template>  
<script>  
    module.exports = {  
        data: {  
            items: [  
                {name: "HBuilder",icon: "icon1.png"},  
                {name: "5+Runtime",icon: "icon2.png"},  
                {name: "mui",icon: "icon3.png"}  
            ]  
        }  
    };  
</script>

点击事件

<list>标签支持onclick事件属性，参考模板事件。

<item>标签也支持onclick事件属性，不同于其它标签的是，若列表是通过n-for指令渲染生成的，则<item>标签的点击回调中，可以获得当前列表项对应的数据及当前列表项索引值，如下是一个示例：

<template>  
    <nviews cachemaxage="86400">  
        <nview style="height: 200px;">  
            <list style="top:10px;">  
                <!--列表项增加onclick点击事件-->  
                <item style="height: 50px;" n-for="item in data.items" onclick={this.clickItem}>  
                    <canvas>  
                        <!--Logo图片-->  
                        <img src={item.icon} style="left: 15px;width: 35px;height: 35px;"  />  
                        <!--产品名称-->  
                        <font style="align: left;left: 65px;height:35px;">  
                            {item.name}  
                        </font>  
                    </canvas>  
                </item>  
            </list>  
        </nview>  
    </nviews>  
</template>  
<script>  
    module.exports = {  
        data: {  
            items: [  
                {name: "HBuilder",icon: "icon1.png"},  
                {name: "5+Runtime",icon: "icon2.png"},  
                {name: "mui",icon: "icon3.png"}  
            ]  
        },  
        methods: {  
            //item：当前列表项的数据对象  
            //index：当前列表项索引  
            clickItem:function(item,index,event){  
                plus.nativeUI.alert("name:"+item.name+",index:"+index);  
            }  
        }  
    };  
</script>

收起阅读 »

根据mui 的提供的索引列表，修改为通讯录2

之前写过一篇类似的文章，最近重启这个项目，又琢磨了一个新的方法，自认为这个比之前的方法简单一点。这次这个方法不需要修改自带的js啦。

mui提供的例子中：
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>
.....................
</ul>
</div>
</div>
</div>
所以按照数据是这种格式去添加，即可很容易的实现索引列表。
再js中还是按照官方的例子写，
mui.ready(function() {

            var header = document.querySelector('header.mui-bar');  
            var list = document.getElementById('list');  
            //calc hieght  
            list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';  
            //create  
            window.indexedList = new mui.IndexedList(list);  
            setdata(0);  
        });

setdata(0); 是我请求网络数据的方法。
然后根据你后台返回的数据格式进行想对应的修改即可。
function setdata(noDepartment){
console.log("通讯录走这了url" + url+"///tag"+noDepartment);
mui.ajax(url, { //
data: {
noDepartment: noDepartment
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var table = document.body.querySelector('.mui-table-view');
var htmla = document.createElement('li');
.....
var a = 0,
b = 0,
......

                for(var i = 0; i < data.length; i++) {  
                    //插入数据                                                        
                    var s = makePy(data[i].cRealName) + ""; //将名字 转化为首字母缩写  
                    var shouzimu = s.substr(0, 1); //获取首字母                                                        
                    //首字母 为 Ａ的  
                    if(shouzimu == "A") {  
                        if(a == 0) {  
                            htmla.innerHTML += '<li data-group="A" class="mui-table-view-divider mui-indexed-list-group active">A</li><li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item"><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name">' + data[i].cRealName + '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>';  

                            a = a + 1;  
                        } else {  
                            htmla.innerHTML += '<li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item active" "><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name" >' + data[i].cRealName +  
                                '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>'  
                        }  
                    }  
                        table.appendChild(htmla);  
                              .....  
                                   .....

.},
error: function(xhr, type, errorThrown) {
console.log(type);
mui.toast(type + "请求服务超时，请重新请求")
}
});
}
makePy(data[i].cRealName) + ""; //将名字转化为首字母缩写
这个方法是因为后台返回的数据格式全是汉字所以需要这样一个方法，如果你的后台已经给你返回 A ，B 的标签直接添加到htmla 。。。上面即可.
这样你的界面就会出现数据了，如果没法滑动和索引的联动屏蔽掉mui.IndexedList.js 里面一些方法即可。
我因为没有搜索功能对应搜索功能的 html代码和js全部屏蔽

        这个方法屏蔽了 里面的内容  
        var findEnd = function(event) {

// self.el.alert.classList.remove('active');
// self.el.bar.classList.remove('active');
// if (pointElement) {
// pointElement.classList.remove('active');
// pointElement = null;
// }
};
这个全部屏蔽
// bindSearchEvent: function() {
// var self = this;
// self.el.searchInput.addEventListener('input', function() {
// var keyword = this.value;
// self.search(keyword);
// }, false);
// $(self.el.search).on('tap', classSelector('icon-clear'), function() {
// self.search('');
// }, false);
// },
这个屏蔽一个
bindEvent: function() {
var self = this;
self.bindBarEvent();
// self.bindSearchEvent();
}
});

继续阅读 »

之前写过一篇类似的文章，最近重启这个项目，又琢磨了一个新的方法，自认为这个比之前的方法简单一点。这次这个方法不需要修改自带的js啦。

mui提供的例子中：
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>
.....................
</ul>
</div>
</div>
</div>
所以按照数据是这种格式去添加，即可很容易的实现索引列表。
再js中还是按照官方的例子写，
mui.ready(function() {

            var header = document.querySelector('header.mui-bar');  
            var list = document.getElementById('list');  
            //calc hieght  
            list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';  
            //create  
            window.indexedList = new mui.IndexedList(list);  
            setdata(0);  
        });

setdata(0); 是我请求网络数据的方法。
然后根据你后台返回的数据格式进行想对应的修改即可。
function setdata(noDepartment){
console.log("通讯录走这了url" + url+"///tag"+noDepartment);
mui.ajax(url, { //
data: {
noDepartment: noDepartment
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var table = document.body.querySelector('.mui-table-view');
var htmla = document.createElement('li');
.....
var a = 0,
b = 0,
......

                for(var i = 0; i < data.length; i++) {  
                    //插入数据                                                        
                    var s = makePy(data[i].cRealName) + ""; //将名字 转化为首字母缩写  
                    var shouzimu = s.substr(0, 1); //获取首字母                                                        
                    //首字母 为 Ａ的  
                    if(shouzimu == "A") {  
                        if(a == 0) {  
                            htmla.innerHTML += '<li data-group="A" class="mui-table-view-divider mui-indexed-list-group active">A</li><li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item"><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name">' + data[i].cRealName + '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>';  

                            a = a + 1;  
                        } else {  
                            htmla.innerHTML += '<li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item active" "><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name" >' + data[i].cRealName +  
                                '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>'  
                        }  
                    }  
                        table.appendChild(htmla);  
                              .....  
                                   .....

.},
error: function(xhr, type, errorThrown) {
console.log(type);
mui.toast(type + "请求服务超时，请重新请求")
}
});
}
makePy(data[i].cRealName) + ""; //将名字转化为首字母缩写
这个方法是因为后台返回的数据格式全是汉字所以需要这样一个方法，如果你的后台已经给你返回 A ，B 的标签直接添加到htmla 。。。上面即可.
这样你的界面就会出现数据了，如果没法滑动和索引的联动屏蔽掉mui.IndexedList.js 里面一些方法即可。
我因为没有搜索功能对应搜索功能的 html代码和js全部屏蔽

        这个方法屏蔽了 里面的内容  
        var findEnd = function(event) {

// self.el.alert.classList.remove('active');
// self.el.bar.classList.remove('active');
// if (pointElement) {
// pointElement.classList.remove('active');
// pointElement = null;
// }
};
这个全部屏蔽
// bindSearchEvent: function() {
// var self = this;
// self.el.searchInput.addEventListener('input', function() {
// var keyword = this.value;
// self.search(keyword);
// }, false);
// $(self.el.search).on('tap', classSelector('icon-clear'), function() {
// self.search('');
// }, false);
// },
这个屏蔽一个
bindEvent: function() {
var self = this;
self.bindBarEvent();
// self.bindSearchEvent();
}
});

收起阅读 »

popover时让某一个Input自动获取焦点

popover focus

当popover时，让弹出窗体的某一个input自动得到焦点，直接下$('').focus(),第一次是可以的，但是第二次再弹窗就不行了，
这个时候要加一个settimeout,把设置焦点的代码放到settimeout里面，这样就可以了

标签通用属性 - NView模板 - wap2app教程

wap2app NView模板

NView模板标签属性赋予元素意义和语境，下面的属性可用于绝大部分的模板标签，因此我们单独抽离出来，称为通用标签。

id

规定模板元素的唯一id，可选；

style

定义NView模板的控件样式，可选；除template/script标签外，其它NView模板标签均支持style属性。style属性可定义的样式参考模板样式。

注意：每个控件可定义的样式不同，具体参考模板标签教程中的说明。

onclick

事件属性，可选；用户点击时触发，使用方式参考模板事件教程中的onclick章节。

NView模板中的大部分标签均支持onclick点击事件，只有如下几个标签存在特殊性：

imageslider：不支持，用户点击后默认触发轮播图片的全屏预览
br/hr：不支持
richtext标签下的font：不支持，但canvas标签下的font支持onclick事件属性

继续阅读 »

阿里百川插件集成，离线打包闪退等各种坑指导

外包

阿里百川插件集成，或其他插件集成，离线打包微信闪退等各种问题解决 QQ：37894663

DIV 模拟数字键盘输入，实现禁用软键盘的作用

禁止软盘

以前有写过一个例子，还有待完善，分享给大家，可以有点灵感，有好的想法，大家也可以分享出来。

下图片，是动态效果图，

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <meta name="apple-mobile-web-app-status-bar-style" content="white">  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
    <title></title>  
        <style>   
        *{ margin: 0px; padding: 0;}  
        .txt{ position: relative; padding-left: 10px; padding-right: 10px;}  
        .input{    
            width:97%;    
            height:34px;    
            line-height:34px;    
            font-size:14px;    
            border:1px solid #ddd;  
            padding-left: 10px;   
        }    
        .setNumber{display: inline-block; position: relative;top:0px;font-size: 16px;}  
        .cursor-blink   
        {  
             animation: blink 1s infinite steps(1, start);   
            -webkit-animation:blink 1s infinite steps(1, start);   
            -moz-animation:blink 1s infinite steps(1, start);   
            width:1px; height:20px;  display: inline-block;  
            position: relative;top:5px;  left:-70px; display: none;  

        }  
        @keyframes blink {  
            0%, 100% {  
                background-color: #000;  
                color: #aaa;  
            }  
            50% {  
                background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */  
                color: #000;  
            }  
        }  

    .footer{position: fixed; bottom:0px;  padding:10px; padding-bottom: 10px; background-color:#999999; display: none;}  
    .footer .number b,.footer .del_close b{ width:80px; height:50px; display: inline-block; background-color: white; border:1px solid #ddd; text-align: center; line-height:40px; margin-bottom: 10px;  }  
    .footer .number{ width:80%; float: left;}  
    .footer .del_close b{width:65px; width:18%;}  
        </style>  
    </head>  
    <body style=" padding:0px; padding-top: 50px; ">  

    <div class="txt">  

    <div class="input" ><span class="setNumber">输入编号</span> <span class="cursor-blink"><span></div>    

    </div>  
    <div class="footer">  
    <div class="number">  
    <b>1</b>  
    <b>2</b>   
    <b>3</b>  
    <b>4</b>  
    <b>5</b>   
    <b>6</b>   
    <b>7</b>  
    <b>8</b>  
    <b>9</b>  
    </div>    
    <div class="del_close">  
    <b id="close">关闭</b>  
    <b id="del">回删</b>  
    </div>  
    </div>  

    <script>  

            //点击DIV输入框  
        var input_txt=document.querySelector(".input");  
            input_txt.addEventListener('click',function()  
            {  
                document.querySelector(".cursor-blink").style.display="inline-block";  
                document.querySelector(".footer").style.display="block";  
            },false);  

            //给每个数字，添加点击事件  
         var b_num=document.querySelectorAll(".number>b");   
         var setNumber=document.querySelector(".setNumber");  

             for(var i=0;i<b_num.length;i++)  
             {  
                b_num[i].addEventListener('click',function()  
                {  
                    var num=this.innerText;  
                    document.querySelector(".cursor-blink").style.left="0px";  
                    var txt=setNumber.innerHTML; //获得DIV文本  
                        if(isNaN(txt))  
                        {  
                        setNumber.innerHTML=""; //删掉输入编号文字  
                                        txt=""; //  
                        }  
                       setNumber.innerHTML=txt+""+num;   

                },false);     
             }  
            ///  

            //回删数字  
        var del=document.querySelector("#del");  
            del.addEventListener('click',function()  
            {  
                 var setNumber=document.querySelector(".setNumber");  
                 var txtnum=setNumber.innerText;  
                     if(isNaN(txtnum))  
                     {  
                        return;  
                     }  
                 var news_num="";  
                     for(var i=0;i<txtnum.length-1;i++)  
                     {  
                     news_num+=""+txtnum[i];      
                     }  
                     setNumber.innerText=news_num;  
                     if(news_num=="")  
                     {  
                        setNumber.innerText="输入编号";  
                        document.querySelector(".cursor-blink").style.left="-70px";  
                     }  
            },false);     

         //关闭数字键盘  
        var close=document.querySelector("#close");  
            close.addEventListener('click',function()  
            {  
                 document.querySelector(".cursor-blink").style.display="none";  
                 document.querySelector(".footer").style.display="none";  

            },false);     
    </script>  

    </body>  
</html>

继续阅读 »

以前有写过一个例子，还有待完善，分享给大家，可以有点灵感，有好的想法，大家也可以分享出来。

下图片，是动态效果图，

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <meta name="apple-mobile-web-app-status-bar-style" content="white">  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
    <title></title>  
        <style>   
        *{ margin: 0px; padding: 0;}  
        .txt{ position: relative; padding-left: 10px; padding-right: 10px;}  
        .input{    
            width:97%;    
            height:34px;    
            line-height:34px;    
            font-size:14px;    
            border:1px solid #ddd;  
            padding-left: 10px;   
        }    
        .setNumber{display: inline-block; position: relative;top:0px;font-size: 16px;}  
        .cursor-blink   
        {  
             animation: blink 1s infinite steps(1, start);   
            -webkit-animation:blink 1s infinite steps(1, start);   
            -moz-animation:blink 1s infinite steps(1, start);   
            width:1px; height:20px;  display: inline-block;  
            position: relative;top:5px;  left:-70px; display: none;  

        }  
        @keyframes blink {  
            0%, 100% {  
                background-color: #000;  
                color: #aaa;  
            }  
            50% {  
                background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */  
                color: #000;  
            }  
        }  

    .footer{position: fixed; bottom:0px;  padding:10px; padding-bottom: 10px; background-color:#999999; display: none;}  
    .footer .number b,.footer .del_close b{ width:80px; height:50px; display: inline-block; background-color: white; border:1px solid #ddd; text-align: center; line-height:40px; margin-bottom: 10px;  }  
    .footer .number{ width:80%; float: left;}  
    .footer .del_close b{width:65px; width:18%;}  
        </style>  
    </head>  
    <body style=" padding:0px; padding-top: 50px; ">  

    <div class="txt">  

    <div class="input" ><span class="setNumber">输入编号</span> <span class="cursor-blink"><span></div>    

    </div>  
    <div class="footer">  
    <div class="number">  
    <b>1</b>  
    <b>2</b>   
    <b>3</b>  
    <b>4</b>  
    <b>5</b>   
    <b>6</b>   
    <b>7</b>  
    <b>8</b>  
    <b>9</b>  
    </div>    
    <div class="del_close">  
    <b id="close">关闭</b>  
    <b id="del">回删</b>  
    </div>  
    </div>  

    <script>  

            //点击DIV输入框  
        var input_txt=document.querySelector(".input");  
            input_txt.addEventListener('click',function()  
            {  
                document.querySelector(".cursor-blink").style.display="inline-block";  
                document.querySelector(".footer").style.display="block";  
            },false);  

            //给每个数字，添加点击事件  
         var b_num=document.querySelectorAll(".number>b");   
         var setNumber=document.querySelector(".setNumber");  

             for(var i=0;i<b_num.length;i++)  
             {  
                b_num[i].addEventListener('click',function()  
                {  
                    var num=this.innerText;  
                    document.querySelector(".cursor-blink").style.left="0px";  
                    var txt=setNumber.innerHTML; //获得DIV文本  
                        if(isNaN(txt))  
                        {  
                        setNumber.innerHTML=""; //删掉输入编号文字  
                                        txt=""; //  
                        }  
                       setNumber.innerHTML=txt+""+num;   

                },false);     
             }  
            ///  

            //回删数字  
        var del=document.querySelector("#del");  
            del.addEventListener('click',function()  
            {  
                 var setNumber=document.querySelector(".setNumber");  
                 var txtnum=setNumber.innerText;  
                     if(isNaN(txtnum))  
                     {  
                        return;  
                     }  
                 var news_num="";  
                     for(var i=0;i<txtnum.length-1;i++)  
                     {  
                     news_num+=""+txtnum[i];      
                     }  
                     setNumber.innerText=news_num;  
                     if(news_num=="")  
                     {  
                        setNumber.innerText="输入编号";  
                        document.querySelector(".cursor-blink").style.left="-70px";  
                     }  
            },false);     

         //关闭数字键盘  
        var close=document.querySelector("#close");  
            close.addEventListener('click',function()  
            {  
                 document.querySelector(".cursor-blink").style.display="none";  
                 document.querySelector(".footer").style.display="none";  

            },false);     
    </script>  

    </body>  
</html>

收起阅读 »

新版Hbuilder运行浏览器时自动带上一个GET参数

浏览器运行

软件是新装的，也还原过配置，都没用，新版运行时带了参数，各种浏览器都会带上参数，老版的没有这个问题
图片中带参数的是8.8版本的
不带参数的是7.3版本的
虽然不影响测试，但是我这种强迫症根本受不了呀，希望有人能告诉我怎么去掉那个参数，谢谢

mui编写的全静态网站源码，完美解决下拉刷新。宣传可赚钱

下拉刷新

这是一套，可以使用了的mui网站源码。调用的API稳定可靠，也是开源的商业公司出品！大家可以上传到自己的服务器上面
修改config.js文件将
var myuid=1;/分红账号ID，唯一要修改的地方，否则无法赚钱/
替换成您的myuid
如果有人在上面消费就可以赚钱10%的佣金。
测试地址：点我查看效果

继续阅读 »

h5+ 跨平台 app开发学习路线【附教程】

App

《JavaScript 快速提高视频教程》 js基础快速提高课程【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 + 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------

MUI、H5+ APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5+ 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

继续阅读 »

强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送

个推的传透消息很难用，小米推送的ios很不稳定。
强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送强烈建议官方接入极光推送，强烈建议官方接入极光推送，强烈建议官方接入极光推送。

继续阅读 »

模板结构

n-for指令

点击事件

模板结构

n-for指令

点击事件

id

style

onclick

id

style

onclick

热门文章