开源免费的 LoRa App 设计原理和组件

为了帮助 LoRa 用户演示数据和调试开发，开源免费的 LoRa App 推出后深受好评。
下载与使用请链接《开源免费的手机版 LoRa App，演示和调试 LoRaWAN 数据的神器》 https://blog.csdn.net/jiangjunjie_2005/article/details/104901450

后续用户需要开发定制自己的 App，为此，本文解释 LoRa App 的设计原理。

1、排版

为了简化安卓的控件与布局操作，决定使用 WebView 与外框通信的方式，排版的事情交给 H5。

２、布局

将 WebView 覆盖主体部分。

    <WebView
        android:id="@+id/homewebview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/nav_host_fragment"
        tools:layout_editor_absoluteX="1dp" >
    </WebView>

3、本地网页存放位置

文件放应用的 \app\src\main\assets 下，以 Project 视图查看时才看得到，如下图，默认是 Android 视图：

4、在 WebView 里加载网页

关键点，路径写法为：file:///android_asset/*.*
加载语句：

        wv = (WebView)root.findViewById(R.id.homewebview);

        wv.getSettings().setDomStorageEnabled(true);
        wv.getSettings().setAppCacheMaxSize(1024*1024*8);
        String appCachePath = this.getContext().getApplicationContext().getCacheDir().getAbsolutePath();
        wv.getSettings().setAppCachePath(appCachePath);
        wv.getSettings().setAllowFileAccess(true);
        wv.getSettings().setAppCacheEnabled(true); 
        wv.getSettings().setUseWideViewPort(true);
        wv.getSettings().setLoadWithOverviewMode(true);
        wv.getSettings().setJavaScriptEnabled(true); 
        wv.loadUrl("file:///android_asset/Main.html");

5、WebView 与外框通信

定义供调用的类：
（1）最好把 Context 当参数带进去，用得着的地方多
（2）供调用的方法需要加注解 @JavascriptInterface

public class WebScript {
    Context mContxt;

    public WebScript(Context mContxt) {
        this.mContxt = mContxt;
    }

    @JavascriptInterface
    public String hello(String name) { 
        return "hi " + name;
    } 
}

然后 WebView 对象执行 addJavascriptInterface，实例化一个对象，并取一个网页 js 调用时使用的别名，如这里取名 ws。

wv.addJavascriptInterface(new WebScript(this.getContext()), "ws");

则，在网页中，可以这样使用它：

var s = window.ws.hello("girl");

而外框执行网页脚本则是如下方式：

wv.loadUrl("javascript:notify('" + s + "')");

实在不优雅，字符串也会有麻烦，得注意点。

6、引入 jar

以 Project 视图显示，将 jar 放入 /app/libs 下，右键菜单 as Library 即可。
有些函数对 minSDK 有要求，/app/build.gradle 里可以看到 minSdkVersion 的设置项。

7、读写文本文件

    public static void WriteSysFile(Context ctx, String filename, String content) {
        try {
            FileOutputStream fos = ctx.openFileOutput(filename, Context.MODE_PRIVATE);//openFileOutput函数会自动创建文件
            OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
            osw.write(content);
            osw.flush();
            fos.flush();  //输出缓冲区中所有的内容
            osw.close();
            fos.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static String ReadSysFile(Context ctx, String filename) {
        StringBuilder stringBuilder = new StringBuilder();
        try {
            FileInputStream fis = ctx.openFileInput(filename);
            InputStreamReader isr = new InputStreamReader(fis, "UTF-8");
            BufferedReader bf = new BufferedReader(isr);

            String line;
            while ((line = bf.readLine()) != null) {
                stringBuilder.append(line);
            }
            bf.close();
            isr.close();
            fis.close();
            return stringBuilder.toString();
        } catch (Exception e) {
            return readJSONText(ctx, filename);
        }
    }