Native.js学习：利用Native.js实现Android与HTML数据的交互

本文链接：https://blog.youkuaiyun.com/lhg_55/article/details/53437476

本文介绍了一种在不使用WebView的情况下实现HTML与Android应用间的数据交互方法。利用DCloud公司的5+SDK集成的HybridApp及Native.js技术，详细演示了如何在Android原生代码中设置数据，并在HTML页面中读取这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一个项目由于需求需要在html中获取到Android代码里的数据，很多人一看到”html与Android数据交互”可能都会想到WebView作为桥梁，是的，我一开始也是这个念头，可遗憾的是这个项目并没有用到WebView,也没法用。因为这个项目用的是DCloud公司5+SDK集成的Hybrid App,思来想去，我决定就用这个公司的Native.js这个技术(DCloud官网介绍可以在HTML通过Native.js调用Android原生API)，所以决定先用一个Demo来打通这一过程。

本次项目是从《AndroidStudio 创建 Hybrid App工程》项目修改而来，把《AndroidStudio 创建 Hybrid App工程》没有用到的MainActivity加上，因为要从原生代码传数据给html页面嘛，MainActivity修改代码如下：

public class MainActivity extends ListActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //存放一些数据到SharePreferences
        initData();
        setListAdapter(new MyListAdapter());
        getListView().setTextFilterEnabled(true);
    }

    private void initData() {
        SharedPreferences sharedPreferences = getSharedPreferences("data", Context.MODE_PRIVATE);
        SharedPreferences.Editor edit = sharedPreferences.edit();
        edit.putString("data1","aaaa").putString("data2","bbbb").apply();
    }

    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
        super.onListItemClick(l, v, position, id);
        Intent intent = new Intent(this,activityInfos[position].clazz);
        startActivity(intent);
    }

    ActiviyInfo[] activityInfos = new ActiviyInfo[]{
            new ActiviyInfo("SDK_APP",SDK_Runtime.class),
            new ActiviyInfo("SDK_WEBAPP",SDK_WebApp.class)
    };
    class ActiviyInfo{
        String title;
        Class<? extends Activity> clazz;

        public ActiviyInfo(String title, Class<? extends Activity> clazz) {
            this.title = title;
            this.clazz = clazz;
        }
    }
    class MyListAdapter extends BaseAdapter{

        @Override
        public int getCount() {
            return activityInfos.length;
        }

        @Override
        public Object getItem(int position) {
            return activityInfos[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            TextView tv = new TextView(parent.getContext());
            tv.setHeight(100);
            tv.setGravity(Gravity.CENTER);
            tv.setText(activityInfos[position].title);
            convertView = tv;
            return convertView;
        }
    }
}

第一个步骤我这里借鉴了5+SDK Demo中的代码，MainActivity中的SDK_Runtime和SDK_Webapp直接拷贝过来的
这里写图片描述

当然，在Manifest.xml中要加上activity

<activity
            android:name=".SDK_Runtime"
            android:configChanges="orientation|keyboardHidden|screenSize|keyboard|navigation|mcc|mnc|fontScale"
            android:screenOrientation="sensor" >
        </activity>
        <activity
            android:name=".SDK_WebApp"
            android:configChanges="orientation|keyboardHidden|screenSize|keyboard|navigation|mcc|mnc|fontScale"
            android:screenOrientation="user"
            android:theme="@android:style/Theme.Translucent" >
        </activity>

4.接下来就是在html中取值了
(1).首先找到调用native.js的那部分html页面
这里写图片描述
(2).根据DCloud提供的如何使用native.js语法来写了

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Hello H5+</title>
    <link rel="stylesheet" href="../css/common.css">
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript">
            function njsAlertForAndroid(){
                var mainActivity = plus.android.runtimeMainActivity();
                var Toast = plus.android.importClass("android.widget.Toast");
                var Context = plus.android.importClass("android.content.Context");
                var SharedPreferences = plus.android.importClass("android.content.SharedPreferences");
                var sp = mainActivity.getSharedPreferences("data",Context.MODE_PRIVATE);
                <!--var a = sp.getString("a","");-->//这种写法不行
                <!--var b = sp.getString("b","");-->
                var value1 = plus.android.invoke(sp,"getString","data1","");
                var value2 = plus.android.invoke(sp,"getString","data2","");
                var toast = Toast.makeText(mainActivity,"data1:"+value1+"\n"+"data2："+value2,Toast.LENGTH_SHORT);
                toast.show();
            }
    </script>
</head>
<body>
<header id="header">
    <div class="nvbt iback" onclick="back(true);"></div>
    <div class="nvtt">Native.JS</div>
    <div class="nvbt idoc" onclick="openDoc('Native.JS Document','/doc/native.js.html')"></div>
</header>
<div id="dcontent" class="dcontent">
    <br/>
    <ul class="dlist">
        <li class="ditem" onclick="njsAlertForAndroid()">native.js调用Android原生代码数据</li>
        <li class="ditem" onclick="clicked('njs_efficient.html')">native.js高级API</li>
    </ul>
    <br/>
    <div class="button button-waring"
         onclick="plus.runtime.openURL('http://ask.dcloud.net.cn/article/114');">更多示例...
    </div>
</div>
<div id="output">
    Native.JS一种把操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。可通过plus.android.*和plus.ios.*提供的API分别调用Android和iOS平台的Native
    API。
</div>
</body>
<script type="text/javascript" src="../js/immersed.js"></script>
</html>