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

痛点

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

准备

新建一个html文件&＃xff0c;我暂且命名为input.html

新建一个js文件&＃xff0c;我暂且命名为app.js

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

var iem;mui.ready(function(){iem &＃61; document.querySelector("input");setTimeout(function(){iem.focus(); },200);})

Native.js自动弹出软键盘

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

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

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

解决方案1&＃xff09;

去除android的弹出键盘功能

解决方案2&＃xff09;

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

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

/*** Input获取焦点弹出软键盘* &＃64;param {HTMLInputElement} inputElem */app.showSoftInput &＃61; function(inputElem) {if(!inputElem) {//如果没有传入input则returnreturn;}if(!inputElem.id) {//如果当前input没有id&＃xff0c;就给个默认的idthis.input.id &＃61; inputElem.id &＃61; &＃39;InputDefultId&＃39;;}var nativeWebview, imm, InputMethodManager;var initNativeObjects &＃61; function() {if($.os.android) {var main &＃61; plus.android.runtimeMainActivity();var Context &＃61; plus.android.importClass("android.content.Context");InputMethodManager &＃61; plus.android.importClass("android.view.inputmethod.InputMethodManager");imm &＃61; 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 &＃61;&＃61;&＃61; inputElem.id) {//如果当前活动&＃xff0c;也就是获取到了焦点的是input的话&＃xff0c;那么就不执行自动弹出键盘return;}nativeWebview &＃61; plus.webview.currentWebview().nativeInstanceObject();initNativeObjects();setTimeout(function() {inputElem.focus();}, 200);});}

嘿嘿&＃xff0c;在这里我将再安利大家一个小技巧

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

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

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

是不是tm好像啊&＃xff1f;哈哈

Native.js打开WIFI

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

百度一下 &＃xff08;android 打开wifi&＃xff09;

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

但是并不要紧&＃xff0c;我们开始造轮子&＃xff01;&＃xff01;&＃xff01;

编写js代码

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

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

if($.os.ios){plus.runtime.openURL("prefs:root&＃61;WIFI");//ios需要手动打开}