资讯专栏INFORMATION COLUMN

weex手机端安全键盘

szysky / 2921人阅读

摘要:地址效果图技术依赖框架弹出层图标说明如果不想用到,可以把文件里的组件去掉,按自己的弹窗实现即可删除大小写空格图标用的是如不想用请自行替换本项目是放在本地,以安卓为例密码可见不可见图标按钮用的是里的方法获取的路径,请自行替换声明如有需要

github地址:weexSafeKeyboard

效果图:

技术依赖:
框架:weex+vue
弹出层:weex-ui
图标:iconfont

说明:
1、如果不想用到weex-ui,可以把inputkey.vue文件里的wxc-popup组件去掉,按自己的弹窗实现即可;
2、删除、大小写、空格图标用的是iconfont;如不想用请自行替换;
本项目是放在本地,以安卓为例:android/app/src/main/assets/iconfont
3、密码可见、不可见图标按钮用的是common.js里的getImageUrl方法获取的路径,请自行替换

声明:
如有需要,请参考实现的思路,消化成自己的东西,勿直接复制,会消化不良。

实际调用页面:index.vue 代码如下:



组件:components/inputkey.vue 代码如下:



  

公用方法:common/common.js 代码如下:

exports.bundleUrl = function (self) {
    var bundleUrl = self.$getConfig().bundleUrl;
    return bundleUrl;
};
//判断系统,安卓返回"android",ios返回"iOS",h5返回"web"
exports.androidOrIos = function (self) {
    return self.$getConfig().env.platform;
};
//获取图片完整路径前缀
exports.getImageUrl = function (self) {
    var androidOrIos = this.androidOrIos(self);
    var bundleUrl = this.bundleUrl(self);
    var isHttp = bundleUrl.indexOf("http://") >= 0;
    var imageUrl;
    if (isHttp) {
        var i = bundleUrl.indexOf("/dist/");
        if (androidOrIos == "android") {
           imageUrl = bundleUrl.slice(0, i) + "/images/"; 
        } else if (androidOrIos == "iOS") {
           imageUrl = bundleUrl.slice(0, i) + "/images.bundle/"; 
        }
    } else {
        if (androidOrIos == "android") {
            imageUrl = "assets:";
        } else if (androidOrIos == "iOS") {
            var i = bundleUrl.indexOf("XDPT.app");
            //vue语法中读取图片资源放在.bundle文件中
            //不然会出现The requested URL was not found on this server.
            imageUrl = bundleUrl.slice(0, i + 8) + "/images.bundle/";
        }
    }
    return imageUrl;
}

//对象类型判断,下面深,浅拷贝用 
//深浅拷贝来源百度,太懒没自己写
exports.util = (function () {
    var class2type = {};
    ["Null", "Undefined", "Number", "Boolean", "String", "Object", "Function", "Array", "RegExp", "Date"].forEach(function (item) {
        class2type["[object " + item + "]"] = item.toLowerCase();
    })

    function isType(obj, type) {
        return getType(obj) === type;
    }

    function getType(obj) {
        return class2type[Object.prototype.toString.call(obj)] || "object";
    }

    return {
        isType: isType,
        getType: getType
    }
})();
//对象深,浅拷贝
exports.copy = function (obj, deep) {
    if (obj === null || typeof obj !== "object") {
        return obj;
    }
    var i, target = this.util.isType(obj, "array") ? [] : {}, value, valueType;
    for (i in obj) {
        value = obj[i];
        valueType = this.util.getType(value);
        if (deep && (valueType === "array" || valueType === "object")) {
            target[i] = this.copy(value);
        } else {
            target[i] = value;
        }
    }
    return target;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107186.html

相关文章

  • 移动布局与适配

    摘要:实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配,不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网格中。 移动端页面适配—...

    Clect 评论0 收藏0
  • Weex——关于移动动态性的思考、实现和未来

    摘要:什么是动态性今天在移动端,尤其是像手机淘宝这样的中,动态性问题逐渐成为一个比较棘手的问题。在云端实现了天猫前端运营发布系统斑马的对接,在前端开发实现了主会场的界面模块和业务逻辑处理,同时在客户端上对接了手机天猫手机淘宝。 什么是动态性 今天在移动端,尤其是像手机淘宝这样的 App 中,动态性问题逐渐成为一个比较棘手的问题。所谓动态性,就是把移动应用本身的灵活性、迭代更新的周期和成本优化...

    heartFollower 评论0 收藏0
  • 整理2

    摘要:同理当该元素为时,那么其实际就是。使用处理全部软键盘事件,安卓部分可处理,但可加上的事件监听软键盘的打开与关闭。当调整浏览器窗口大小时,发生事件。移动微信端调整字体,样式乱掉的问题。 一: ES6篇 1: 箭头函数箭头函数就是一种函数的简写形式,用 => 符号来定义,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函...

    CKJOKER 评论0 收藏0
  • 开源中国专访:Chameleon原理首发,其它跨多统一框架都是假的?

    摘要:中国互联网络信息中心发布的中国互联网络发展状况统计报告显示,截至年月,我国网民规模达亿人,微信月活亿支付宝月活亿百度月活亿另一方面,中国手机占智能手机整体的比例超过,月活约亿。在年末正式发布了面向未来的跨端的。 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的? 原创: 嘉宾-张楠 开源中国 以往我们说某一功能跨多端,往往是指在诸如 PC、移动等不同类型的设备之...

    GraphQuery 评论0 收藏0

发表评论

0条评论

szysky

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<