Dcloud开发引用第三方sdk的app小程序扫盲---Native.js

最新推荐文章于 2022-09-06 16:24:28 发布

EK306

最新推荐文章于 2022-09-06 16:24:28 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/EK306/article/details/78717131

版权

Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。
刚开始接触h5 的app的时候，我还在想这h5 无非是css+js+html标记  他怎么就能变身成app了呢。android里面那么多要引入的包 他是怎么解决的呀。。。
看了官方的文档和案例后眼见大开。官方文档有相应的介绍还有实例代码可以看。
废话不多说，举个栗子：
写个app获取手机wifi的列表（页面我就不放出代码了，偷个懒 就放js代码吧）这个例子参考了官方的获取wifi列表的文档 结合了自身的情况
首先js中必不可少的初始化语句

//页面初始化调用
document.addEventListener('plusready', function() {
	//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
	
	accquireWifiList()
});

接下来写一个获取wifi列表的js function() 叫accquireWifiList

function accquireWifiList() {
	
	// 主窗体
    var MainActivity = plus.android.runtimeMainActivity()
    // 上下文
    var Context = plus.android.importClass('android.content.Context');
    // 导入WIFI管理 和 WIFI 信息 的class
    plus.android.importClass("android.net.wifi.WifiManager");
    plus.android.importClass("android.net.wifi.WifiInfo");
    plus.android.importClass("android.net.wifi.ScanResult");
    plus.android.importClass("java.util.ArrayList");
    // 获取 WIFI 管理实例
    var wifiManager = MainActivity.getSystemService(Context.WIFI_SERVICE);
	    
    //声明一个数组 用来接收去除隐藏ssid的wifi集合
    var result=new Array();
    //取得扫描结果
    var resultList = wifiManager.getScanResults();
    len = resultList.size();
    ....
}

学过Android的同学肯定觉得这个引用的类很眼熟。没错这就是Android里面的类。

当你需要引入包的时候就要用到plus.xx.importClass(packageName);语句。xx的位置要根据你app的运行环境决定，将Android或者ios替换xx的位置。

作为一个屌丝没钱买ios 我就直接弄Android了。ios开发的同学对不住了。

首先，获取到wifimanager的对象。MainActivity.getSystemService(Context.WIFI_SERVICE)就是取得wifimanager的对象

在Android里面wifimanager类有getScanResult方法，这里也要调用这个方法。在这里需要提醒一下，hbuilder本身并不会根据plus引入的包而动态加载Android的包，所以你按下“.”后是不会有这个方法的提示的。而且它大小写是敏感的。开发的时候我纳闷了半天。

说一下我这里的环境，很大的一个房间有一堆路由器 wifi信号超多。这个时候发现扫描到的wifi信号有很多都是重复的而且有的还是隐藏ssid的。将结果集放在页面上的时候就会出现没有名字的wifi 而且还站着一行（这怎么能行，这不符合基本法呀）。那么这时候就要手动将结果集合去重复和过滤掉隐藏ssid的wifi。

js去重的代码网上都有我就不贴出来了，那么继续完善获取wifi的方法。我的wifi列表是放在<li><ul></ul></li>标记里面的

var ul=document.getElementById("list");
	//step1：过滤掉隐藏ssid的wifi
    for(var i = 0; i < len; i++) {
    	//扫描结果集中有隐藏ssid的wifi 在此将其过滤掉
    	//将ssid为空的wifi过滤掉 只显示ssid公开的wifi
    	//去除为空的集合 添加到result数组里
    	if(resultList.get(i).plusGetAttribute('SSID')!=null&&resultList.get(i).plusGetAttribute('SSID')!=""){
    		result.push(resultList.get(i).plusGetAttribute('SSID'));    		
    	}
    }
    
    //step2：result结果集中有许多频率不同但ssid相同的wifi 在此要过滤掉重复的wifi
    var uniqueList=unique(result);
    
    //step3：循环生成ul标记    
    for(i=0;i<uniqueList.length;i++){
      	ul.innerHTML+='<li class="mui-table-view-cell" style="font-size: 20;">'+uniqueList[i]+'</li>';
    	console.log(uniqueList[i]);
    }

wifi的信息是很长的，有很多的属性，这里用到最多的就是ssid了。如果在js中获取里面的属性可以用plusGetAttribute语句，里面填上属性名称。

此时页面上就可以动态获得wifi列表并显示在页面上了。

平常我们连接wifi都是点击wifi名称然后输入密码。这里我做了个跳转页面，顺便使用下mui的跳转方法。但是首先要先添加点击跳转的事件

//step4：为所有动态生成的li标签添加tap监听器，获取每个的值 跳转并传递给下一个页面
    var lis=document.getElementsByTagName('li');      
    //这里注意循环的次数是获取的li标记数量 而不是扫描结果集的数量
    for(var j=0;j<lis.length;j++){
    	lis[j].addEventListener('tap',function(){
		var wifiname=this.innerHTML;			
			mui.openWindow({
				id: 'wifidetail',
				url: 'wifidetail.html',
				extras:{
					wifiname:wifiname
				}
			});
		})
    }

mui.openWindow里面extras里面就是你要传到下个页面的值。