标签 - JavaScript 共找到结果 17 条

在微信小程序里,webviewH5向miniProgram通讯只能通过postMessage函数

然而这个函数却很鸡肋,小程序官方文档是这样描述的:向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件

而且小程序官方文档里没有提到miniProgram如何向webviewH5通讯

在这个demo中, 展示了我是如何让webviewH5和miniProgram互相通讯

其实原理很简单:

  • webviewH5 --> miniProgram

    • 通过js调用微信JSSDK的wx.miniProgram.navigateTo方法跳转到小程序的指定页面并且把参数当做query带给小程序原生页面
  • miniProgram --> webviewH5

    • webview组件存在一个src属性, 用于展示指定的h5页面,
    • webview组件上的src属性如果只是改变了hash值, 当前组件上的页面是不会刷新的. 所以我们可以利用这个特性在miniProgram页面把想要传递给webviewH5的信息带到当前webview组件的src上. 当然, 是操作当前src的hash值

运行使用

    小程序开发者工具导入微信小程序demo源码, 在/pages/index/index.js中修改webview组件访问地址指向webview.html的http地址

效果预览

success.gif: http://cdn.mrabit.com/webview_success.gif

failure.gif: http://cdn.mrabit.com/webview_failure.gif

cancel.gif: http://cdn.mrabit.com/webview_cancel.gif

文件目录

.
├── README.md
├── webview                     // 微信小程序demo源码
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── miniprogram_npm
│   │   └── qs
│   │       ├── index.js
│   │       └── index.js.map
│   ├── package-lock.json
│   ├── package.json
│   ├── pages
│   │   ├── index               // 存在webviewH5组件的页面
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── pay                 // miniProgram原生页面
│   │       ├── pay.js
│   │       ├── pay.json
│   │       ├── pay.wxml
│   │       └── pay.wxss
│   ├── project.config.json
│   ├── sitemap.json
│   └── utils                   // 工具类, miniProgram --> webviewH5的主要代码逻辑存放在这里
│       └── util.js
└── webview.html                // 微信小程序webviewH5组件所使用的的h5页面源码

相关代码:

阅读全文

custom-input

基于Vant-NumberKeyboard的自定义数字输入框

问题产生背景

  1. 移动端项目中需要用到数字输入框,html 自带的 input 标签设置[type=number]会默认调用系统输入法的数字键盘,可这样的话,minlength、maxlength 等属性就失效了,还无法禁止部分特殊字符的输入
  2. 利用 input 自带的 change 或者 input 事件在 js 进行判断,会导致 input 内造成闪动效果,光标会默认跑到尾部(可控制光标,兼容性不是很好)
  3. IOS 可利用 keypress 进行输入前的判断,Android 却不支持该事件,迫于无奈只能手动实现数字输入框 input

效果预览

8fa21aabgy1fz5chddbzpg207s0dytrf.gif

模拟光标实现原理

8fa21aabgy1fz5dkhkkl6g20fr05le81.gif

.cursor {
  position: relative;
  height: 35px;
  &::after {
    content: "";
    animation: blink 1s infinite steps(1, start);
    position: absolute;
    width: 2px;
    height: 30px;
    right: 0;
    top: 2.5px;
    background: rgb(0, 53, 237);
    border-radius: 2px;
  }
}
@keyframes blink {
  0%,
  100% {
    background: transparent;
  }
  50% {
    background: rgb(0, 53, 237);
  }
}

use 使用

在 main.js 中引入组件

import customInput from "./components/customInput";
Vue.use(customInput);

接下来,你就可以在页面中使用 custom-input 了

<template>
  <custom-input
    v-model="inputMoney"
    placeholder="最大值888.88,保留三位小数"
    max="888.88"
    :toFixed="3"
  ></custom-input>
</template>
<script>
  export default {
    data() {
      return {
        inputMoney: ""
      };
    }
  };
</script>
属性 说明 类型 默认值
value 当前输入的值 String -
placeholder 自定义 input 框占位符 String placeholder
transform 是否判断自定义 input 位置被自定义键盘覆盖 Boolean true
max 自定义 input 最大值设置 String, Number 9999999999.99
toFixed 小数点后保留位数 Number 2
事件 说明 返回值
onKeyboardOpen 自定义键盘展开事件 data
close 自定义键盘关闭事件 data
input 当前输入值改变时间 data

文件目录

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
└── src
    ├── App.vue // demo
    ├── components
    │   └── customInput // 自定义数字输入框组件
    │       ├── index.js
    │       ├── input.vue
    │       └── keyboard.vue
    └── main.js

相关代码:

阅读全文

前言:

一开始一个朋友发消息问我:

var a = ['123.JpG','123.jpg'];
var reg = /(jpg|png)$/ig;
a.forEach(v => {
    if(reg.test(v) === true){
        console.log(123)
    }
})

会输出什么。 我理所当然的说,当然是输出两个123了。

lastIndex:

QQ20181015090701.png

这时候你会发现,我们在连续使用一个正则匹配其他字符串的时候,第一次匹配是 true,而第二次匹配则是 false。

查看了一下 MDN文档 发现这样一个描述:

如果正则表达式设置了全局标志,test() 的执行会改变正则表达式 lastIndex属性。连续的执行test()方法,后续的执行将会从 lastIndex 处开始匹配字符串,(exec() 同样改变正则本身的 lastIndex属性值).

QQ20181015090907.png

解决方案:

  1. 方案1 既然文档说了是因为全局标志才会影响到lastIndex,于是可以把g去掉就可以了。
var reg = /(jpg|png)$/i;
console.log(reg.test(a[0])); //true
console.log(reg.test(a[0])); //true
  1. 方案2 有时候既然需要用到g,那就不能用到方案1的方法了。 其实,我们的lastIndex属性是可读可写的。 我们可以在下一次匹配的之前更改lastIndex的值来达到目的:
var reg = /(jpg|png)$/ig;
console.log(reg.test(a[0])); //true
console.log(reg.lastIndex); //7
reg.lastIndex = 0;
console.log(reg.test(a[0])); //true

最后:

再来回顾最开始的问题,我们只需要选择方案1或者方案2中的一个方法,即可实现输出两个123:

3.png

参考地址:

阅读全文

号码组成

中华人民共和国国家标准 GB 11643-1999《公民身份号码》中规定:公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成。

公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码。

  1. 地址码表示编码对象常住户口所在县(市、旗、区)的行政区划代码,按 GB/T 2260 的规定执行。

  2. 出生日期码表示编码对象出生的年、月、日,按 GB/T 7408 的规定执行。年、月、日代码之间不用分隔符。(例:某人出生日期为 1966 年 10 月 26 日,其出生日期码为 19661026。)

  3. 顺序码表示在同一地址码所标识的区域范围内,对同年、同月、同日出生的人编定的顺序号,顺序码的奇数分配给男性,偶数分配给女性。

  4. 校检码是根据前面十七位数字码,按照公式计算出来的检验码。

计算方法

  1. 将前面的身份证号码 17 位数分别乘以不同的系数,从第一位到第十七位的系数分别为:7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 ;

  2. 将这 17 位数字和系数相乘的结果相加;

  3. 用加出来和除以 11,看余数是多少;

  4. 余数只可能有 0 1 2 3 4 5 6 7 8 9 10 这11个数字,其分别对应的最后一位身份证的号码为 1 0 X 9 8 7 6 5 4 3 2;

  5. 通过上面得知如果余数是 2,就会在身份证的第18位数字上出现罗马数字的 X。如果余数是 10,身份证的最后一位号码就是 2。

JavaScript代码实现:

function check(code) {
    code = code.split('');

    var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2],
        sum = 0,
        ai = 0,
        wi = 0;

    for (var i = 0; i < 17; i++) {
        ai = code[i];
        wi = factor[i];
        sum += ai * wi;
    }

    var last = parity[sum % 11];

    return last == code[17];
}

问题:

这种方法只能做前端的简单校验,我们java后台进行的判断方式是根据省市县出身年月算出身份证后四位,比这种只对最后一位校验要精准得多,不过不是很清楚他们的做法

阅读全文

新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性

项目 UI 组件库为 iView, Element UI 可根据项目内代码进行适当修改达到适用

效果预览

image

image

image

运行使用

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

文件目录

.
├── README.md
├── build
├── config
├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── custom_form             //自定义表单组件
│   │   │   ├── FormList.js         //表单列表    
│   │   │   ├── ItemIcon.js         //表单图标配置
│   │   │   ├── Render.js           //表单列表渲染
│   │   │   ├── components          //表单公用组件
│   │   │   │   └── Uploads         //上传组件
│   │   │   │       └── upload.vue
│   │   │   ├── config              //配置文件
│   │   │   │   ├── area.js         //地区配置
│   │   │   │   └── trigger.js      //表单验证触发事件
│   │   │   ├── control             //表单控件列表
│   │   │       ├── Address.js      //地区选择
│   │   │       ├── Cascader.js     //多级联动
│   │   │       ├── CheckBox.js     //多选框
│   │   │       ├── DatePicker.js   //时间选择器
│   │   │       ├── Hr.js           //hr标签
│   │   │       ├── Input.js        //输入框
│   │   │       ├── P.js            //p标签
│   │   │       ├── Radio.js        //单选框
│   │   │       ├── Select.js       //下拉选择框
│   │   │       ├── Text.js         //文本域
│   │   │       ├── Title.js        //标题
│   │   │       └── Uploads.js      //上传控件
│   │   │   └── index.js            //控件注册
│   │   ├── index.vue               //自定义表单页面
│   │   └── render.vue              //表单渲染,数据回填页面
│   ├── main.js                     //入口文件
│   └── router                      //路由配置
│       └── index.js
└── static                          //静态数据模版
    ├── label.1.json
    ├── label.12.json
    ├── label.14.json
    ├── label.17.json
    ├── label.19.json
    ├── label.3.json
    ├── label.5.json
    ├── label.8.json
    └── label.json

相关代码:

相关链接:

阅读全文