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

痛点

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

准备

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

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

要输入框自动获取焦点，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弹出软键盘的代码

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

是不是tm好像啊？哈哈

Native.js打开WIFI

我们再来一个栗子 u=1556826177,1292336595&fm=116&gp=0.jpg

百度一下（android 打开wifi）

楼主老实说，android我只入了个门，像打开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好玩吗？

好不好玩，您不试试怎么知道？