【MUI】利用Native.js弹出软键盘打开WIFI

发布时间:2019-08-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【MUI】利用Native.js弹出软键盘打开WIFI脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

痛点

很多时候我们会遇到这样一个细节,需要打开一个webview时:
1)输入框自动获取焦点
2)系统弹出软键盘

准备

新建一个htML文件,我暂且命名为input.html

【MUI】利用Native.js弹出软键盘打开WIFI

新建一个js文件,我暂且命名为app.js

【MUI】利用Native.js弹出软键盘打开WIFI

要输入框自动获取焦点,js很简单,但是为了兼容ios以及android,我们加上setTimeout

            VAR iem;
            mui.ready(function(){
                iem = document.querySelector("input");
                setTimeout(function(){
                    iem.focus();    
                },200);
            })

Native.js自动弹出软键盘

ok,那么弹出软键盘怎么办?这里我们将用到native.js来编写代码映射来调用原生,什么是Native.js

我们在app.jS写上弹出软键盘函数

window.App = (function($) {
    var app = {};

    /**
     * Input获取焦点 弹出软键盘
     * @param {HTMLInputElement} inputElem 
     */
    app.showSoftInput = function(inputElem) {

        var nativeWebview, imm, InputMethodManager;
        var inITNativeObjects = function() {
            if($.os.andROId) {//android
                var main = plus.android.runtimeMainActivity();
                var Context = plus.android.importClass("android.content.Context");
                InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
                imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
                plus.android.importClass(nativeWebview);
                nativeWebview.requestFocusFromTouch();
                //显示软键盘
                imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);

            } else {//ios
                nativeWebview.plusCallMethod({
                    "setKeyboardDisplayRequireSUSErAction": false
                });
            }
        };

        $.plusReady(function() {
            nativeWebview = plus.webview.currentWebview().nativeinstanceObject();
            initNativeObjects();
            setTimeout(function() {
                inputElem.focus();
            }, 200);
        });

    }

    return app;
}(mui))

上面这个代码应该大家很熟悉了,在MUI问答社区有很多技问答,当然也包括以上这些代码,但是呢?在ios设备上确实挺快的弹出了键盘,然而在中端左右的android设备上,延迟总会延迟那么一两秒,带来不好的用户体验,甚至用户第一次使用时不知道是自动弹出的,往往会在input上按下她们的手指,这时键盘弹出来了,可是我们写的自动弹出也并发了,导致键盘又弹缩回去了,我擦,怎么办?

解决方案1)

去除android的弹出键盘功能

解决方案2)

如果input已经被用户点击,即Input已经获取到了焦点的话,直接return;不执行自动弹出

第二种方案看起来可以接受的样子

    /**
     * Input获取焦点 弹出软键盘
     * @param {HTMLInputElement} inputElem 
     */
    app.showSoftInput = function(inputElem) {
        if(!inputElem) {//如果没有传入input则return
            return;
        }
        if(!inputElem.id) {//如果当前input没有id,就给个默认的id
            this.input.id = inputElem.id = 'InputDefultId';
        }

        var nativeWebview, imm, InputMethodManager;
        var initNativeObjects = function() {
            if($.os.android) {
                var main = plus.android.runtimeMainActivity();
                var Context = plus.android.importClass("android.content.Context");
                InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
                imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
                plus.android.importClass(nativeWebview);
                nativeWebview.requestFocusFromTouch();
                //强制显示软键盘 
                //imm.showSoftInput(nativeWebview,InputMethodManager.SHOW_FORCED);
                imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);

            } else {
                nativeWebview.plusCallMethod({
                    "setKeyboardDisplayRequiresUserAction": false
                });
            }
        };

        $.plusReady(function() {
            if(document.activeElement.id === inputElem.id) {
                //如果当前活动,也就是获取到了焦点的是input的话,那么就不执行自动弹出键盘
                return;
            }
            nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
            initNativeObjects();
            setTimeout(function() {
                inputElem.focus();
            }, 200);
        });

    }

嘿嘿,在这里我将再安利大家一个小技巧

native调用的是原生,语法上是跟原生差不多的,这里用android来讲解,例如您要实现弹出软键盘的功能,我们打开百度搜索(android 弹出软键盘)

先看看native实现android弹出软键盘的代码

【MUI】利用Native.js弹出软键盘打开WIFI

再来看看我们百度的 android原生实现的代码

【MUI】利用Native.js弹出软键盘打开WIFI

是不是tm好像啊?哈哈

Native.js打开wifi

我们再来一个栗子

【MUI】利用Native.js弹出软键盘打开WIFI

百度一下 (android 打开wifi)

【MUI】利用Native.js弹出软键盘打开WIFI

楼主老实说,android我只入了个门,像打开wifi的代码我都还没写过

【MUI】利用Native.js弹出软键盘打开WIFI

但是并不要紧,我们开始造轮子!!!

编写js代码

    /**
     * 设置wifi状态
     */
    app.setWifi = function(isEnable){
        $.plusReady(function(){
            if($.os.android){
                isEnable = !!isEnable;
                //获取上下文
                var Context = plus.android.importClass("android.content.Context"),
                    //导入wifi管理模块
                    WifiManager = plus.android.importClass("android.net.wifi.WifiManager"),
                    //获取wifi服务
                    wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);
                    
                wifiManager.setWifiEnabled(isEnable);//false 为关闭
                
            }
        
            
        });
    }

对比一下,是不是很清真?哈哈,ios打开wifi的话,目前是这种解决方案
跳转到wifi设置状态下

if($.os.ios){
        plus.runtime.oPEnURL("PRefs:root=WIFI");//ios需要手动打开
    }

Native.js好玩吗?

好不好玩,您不试试怎么知道?

脚本宝典总结

以上是脚本宝典为你收集整理的【MUI】利用Native.js弹出软键盘打开WIFI全部内容,希望文章能够帮你解决【MUI】利用Native.js弹出软键盘打开WIFI所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。