小东子的个人技术专栏

发表于   |   字数统计: 538(字)   |   阅读时长: 2(分)

使用ssl模块配置同时支持http和https并存

一，生成证书

1、首先，进入你想创建证书和私钥的目录，例如：

1
cd /etc/nginx/

2、创建服务器私钥，命令会让你输入一个口令：

1
openssl genrsa -des3 -out server.key 1024

3、创建签名请求的证书（CSR）：

1
openssl req -new -key server.key -out server.csr

4、在加载SSL支持的Nginx并使用上述私钥时除去必须的口令：

1
2
cp server.key server.key.org
openssl rsa -in server.key.org -out server.key

5、最后标记证书使用上述私钥和CSR：

1
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

二，配置nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
cd /etc/nginx
vim nginx.conf
#
# HTTPS server configuration
#
server {
    listen       443;
    server_name  本机的IP地址;
    ssl                  on;
    ssl_certificate      /etc/nginx/server.crt;
    ssl_certificate_key  /etc/nginx/server.key;
    ssl_session_timeout  5m;
#    ssl_protocols  SSLv2 SSLv3 TLSv1;
#    ssl_ciphers  ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
#    ssl_prefer_server_ciphers   on;
    location / {
        #root   html;
        #index  testssl.html index.html index.htm;
     proxy_redirect off;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_pass http://IP地址/ssl/;
    }
}

重启nginx，在浏览器输入：https://IP地址 会跳转到 http://IP地址/ssl/ 这个地址（后期调整为webservice接口地址即可）

三、受浏览器信任的StartSSL免费SSL证书：

跟VeriSign一样，StartSSL（网址：http://www.startssl.com，公司名：StartCom）也是一家CA机构，

它的根证书很 久之前就被一些具有开源背景的浏览器支持（Firefox浏览器、谷歌Chrome浏览器、苹果Safari浏览器等）。

四、项目需要，将访问目录 \services\ 由http访问 重定向到 https （解决方法：nginx rewrite 加上 location 方式实现）

1
2
3
4
5
6
7
8
location ~ /services/.*$ {
        if ($server_port ~ "^80$"){
            set $rule_0 1$rule_0;
        }
        if ($rule_0 = "1"){
            rewrite /(.*) https://IP地址/$1 permanent;                       break;
        }
    }

五，配置结束上传以后用nginx -t 测试下配置无误 就reload一下nginx服务 检查443端口是否在监听

1
2
3
4
5
6
7
/usr/local/nginx/sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok  
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful (显示表示配置文件没有错误)
service nginx reload (重新加载nginx服务)  
netstat -lan | grep 443 (查看443端口)  
tcp 0 0 0.0.0.0:443 0.0.0.0:* LISTEN (有看到这一行 就表示HTTPS已经在工作了)

小东子的个人技术专栏

发表于   |   字数统计: 849(字)   |   阅读时长: 5(分)

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:【李东的博客】

最近Google在自己推出的Material design中增加了Bottom Navigation导航控制。Android一直没有官方的导航控制器，自己实现确实是五花八门，有了这个规定之后，就类似苹果的底部Toolbar，以后我们的APP就会有一致的风格，先看一张效果：

这里写图片描述

这是官方在Material design中给出一张图，确实很不错。

1.BottomNavigationBar的下载地址

https://github.com/Ashok-Varma/BottomNavigation

2.使用的方法

2.1在Gradle中添加

compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5’

2.2布局实现

1
2
3
4
5
<com.ashokvarma.bottomnavigation.BottomNavigationBar
       android:layout_gravity="bottom"
       android:id="@+id/bottom_navigation_bar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>

2.3类中Activity中添加BottomNavigationItem

1
2
3
4
5
6
7
8
9
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();

2.4设置事件监听器TabChangeListener

1
2
3
4
5
6
7
8
9
10
11
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
           @Override
           public void onTabSelected(int position) {
           }
           @Override
           public void onTabUnselected(int position) {]
           }
           @Override
           public void onTabReselected(int position) {
           }
       });

3.案例的实现

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_navigation_view_demo"
    tools:context="com.lidong.demo.navigation_view.BottomNavigationBarDemoActivity">
    <LinearLayout
        android:id="@+id/tb"
        android:layout_width="match_parent"
         android:layout_height="match_parent"
        android:orientation="vertical" />
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"/>
</RelativeLayout>

Activity的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
package com.lidong.demo.navigation_view;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.lidong.demo.R;
/**
 * BottomNavigationBar实现
 */
public class BottomNavigationBarDemoActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
    private BottomNavigationBar bottomNavigationBar;
    int lastSelectedPosition = 0;
    private String TAG = BottomNavigationBarDemoActivity.class.getSimpleName();
    private LocationFragment mLocationFragment;
    private FindFragment mFindFragment;
    private FavoritesFragment mFavoritesFragment;
    private BookFragment mBookFragment;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view_demo);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.mipmap.ic_location_on_white_24dp, "位置").setActiveColor(R.color.orange))
                .addItem(new BottomNavigationItem(R.mipmap.ic_find_replace_white_24dp, "发现").setActiveColor(R.color.blue))
                .addItem(new BottomNavigationItem(R.mipmap.ic_favorite_white_24dp, "爱好").setActiveColor(R.color.green))
                .addItem(new BottomNavigationItem(R.mipmap.ic_book_white_24dp, "图书").setActiveColor(R.color.blue))
                .setFirstSelectedPosition(lastSelectedPosition )
                .initialise();
        bottomNavigationBar.setTabSelectedListener(this);
        setDefaultFragment();
    }
    /**
     * 设置默认的
     */
    private void setDefaultFragment() {
        FragmentManager fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        mLocationFragment = LocationFragment.newInstance("位置");
        transaction.replace(R.id.tabs, mLocationFragment);
        transaction.commit();
    }
    @Override
    public void onTabSelected(int position) {
        Log.d(TAG, "onTabSelected() called with: " + "position = [" + position + "]");
        FragmentManager fm = this.getFragmentManager();
        //开启事务
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position) {
            case 0:
                if (mLocationFragment == null) {
                    mLocationFragment = LocationFragment.newInstance("位置");
                }
                transaction.replace(R.id.tb, mLocationFragment);
                break;
            case 1:
                if (mFindFragment == null) {
                    mFindFragment = FindFragment.newInstance("发现");
                }
                transaction.replace(R.id.tb, mFindFragment);
                break;
            case 2:
                if (mFavoritesFragment == null) {
                    mFavoritesFragment = FavoritesFragment.newInstance("爱好");
                }
                transaction.replace(R.id.tb, mFavoritesFragment);
                break;
            case 3:
                if (mBookFragment == null) {
                    mBookFragment = BookFragment.newInstance("图书");
                }
                transaction.replace(R.id.tb, mBookFragment);
                break;
            default:
                break;
        }
        // 事务提交
        transaction.commit();
    }
    @Override
    public void onTabUnselected(int position) {
        Log.d(TAG, "onTabUnselected() called with: " + "position = [" + position + "]");
    }
    @Override
    public void onTabReselected(int position) {
    }
}

fragment的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package com.lidong.demo.navigation_view;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.lidong.demo.R;
public class LocationFragment extends Fragment {
    public static LocationFragment newInstance(String param1) {
        LocationFragment fragment = new LocationFragment();
        Bundle args = new Bundle();
        args.putString("agrs1", param1);
        fragment.setArguments(args);
        return fragment;
    }
    public LocationFragment() {
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_location, container, false);
        Bundle bundle = getArguments();
        String agrs1 = bundle.getString("agrs1");
        TextView tv = (TextView)view.findViewById(R.id.tv_location);
        tv.setText(agrs1);
        return view;
    }
}

代码实现起来很简单，就加载布局，添加BottomNavigationItem，设置TabChangeListener就这三步搞定底部导航控制器。

代码下载地址

效果实现：
这里写图片描述 这里写图片描述

小东子的个人技术专栏

发表于   |   字数统计: 1,517(字)   |   阅读时长: 7(分)

好长时间没有写关于Android方面的学习文章了，今天给大家带来的是堪称是一个可以替代SQLite以及ORMlibraries的轻量级数据库—Realm移动端数据库。

相比SQLite，Realm更快并且具有很多现代数据库的特性，比如支持JSON，流式api，数据变更通知，以及加密支持，这些都为安卓开发者带来了方便。

Ream提供了五种编程方式的实现。分别是Java，Objective C，Swift，React-Native，tamarin。在这里我着重介绍在Android中的使用。后面也会介绍在Swift中得使用。

1.先介绍一下打开数据Realm数据库的工具：Realm Browser可视化工具

Realm资源包中包含了一个很有用的实用工具，可以帮助我们更好地管理Realm数据库，那就是Realm Browser。Realm Browser可以让您轻松地读写Realm数据库（以.realm结尾），因此我们无需头疼如何去查看Realm专有数据库的逻辑结构以及其中的数据，可视化的操作就如同SQLite的其他数据库查看工具一样，十分简单、易用（虽然Realm Browser的功能还十分简陋，真的只能读写而已）。

这里写图片描述

2.Realm支持的数据类型

  • 支持基本数据结构：boolean, byte, short, ìnt, long, float, double, String, Dateand byte[]
  • 支持JSON等复杂的数据类型

    3.Realm的官方名词

这里写图片描述

  • Realm：Realm是框架的核心所在，是我们构建数据库的访问点,使用建造者模式构建对象。
  • RealmObject：这是我们自定义的realm数据模型。创建数据模型的行为将会影响到数据库的结构。要创建一个数据模型，我们只需要继承RealmObject，然后设计我们想要存储的属性即可。
  • RealmQuery（查询）：要在数据库中检索信息，我们需要用到“检索”操作。如果需要检索更复杂的数据，那么还可以使用复合查询以及结果排序等等操作。
  • RealmResults：这个类是执行任何查询请求后所返回的类，其中包含了一系列的Object对象。和List类似，我们可以用下标语法来对其进行访问，并且还可以决定它们之间的关系。不仅如此，它还拥有许多更强大的功能，包括排序、查找等等操作。

4、Realm在Android中的使用

4.1在项目的build.grade中配置下载库文件

在本案例中我使用的最新版本的1.0.0版本。

1
2
3
4
5
6
7
8
9
10
11
apply plugin: 'realm-android'
buildscript {
    repositories {
        jcenter()
        maven { url 'https://jitpack.io' }
    }
    dependencies {
        classpath "io.realm:realm-gradle-plugin:1.0.0"
    }
}

4.2创建数据库，获取去Realm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package com.lidong.demo.realm;
import android.content.Context;
import io.realm.Realm;
import io.realm.RealmConfiguration;
/**
*
*@className:RealmUtil
*@desc:RealmUtil工具类
*@author:lidong
*@datetime:16/6/10 下午9:55
*/
public class RealmUtil {
    
    
    private static  RealmUtil sIntance;
    public final Context mContext;
    private String realmName = "realm_demo.realm";
    public RealmUtil(Context mContext) {
        this.mContext = mContext;
    }
    /**
     * 双检索单例
     * @param context
     * @return
     */
    public  static  RealmUtil getIntance(Context context){
        if (sIntance == null) {
            synchronized (RealmUtil.class) {
                if (sIntance == null) {
                    sIntance = new RealmUtil(context);
                }
            }
        }
        return  sIntance;
    }
    /**
   * 获取realm对象
     * @return
     */
     public  Realm getRealm(){
Realm realm =Realm.getInstancenew RealmConfiguration.Builder(mContext)                             .name(realmName) .build());
        return  realm;
    }
}

4.3创建一个RealmObject

只要继承了RealmObject类，任意JavaBean都能存储在Realm中。必须有一个默认构造器，成员变量有相应的getter/setter方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
package com.lidong.demo.realm;
import io.realm.RealmObject;
import io.realm.annotations.PrimaryKey;
/**
 * Person
 */
public class Person extends RealmObject {
    @PrimaryKey
    private String code;//编号
    private String name;//姓名
    private int age;//年龄
    public Person() {
    }
    public Person(int age, String code, String name) {
        this.age = age;
        this.code = code;
        this.name = name;
    }
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    @Override
    public String toString() {
        return "Person{" +
                "code='" + code + '\'' +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

4.4对数据Person进行增删改查操作

PersonDao.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package com.lidong.demo.realm;
import java.util.List;
/**
 * Created by lidong on 16/6/9.
 */
public interface PersonDao {
    /**
     * 插入Person
     * @param person
     * @throws Exception
     */
   void insert(Person person)throws  Exception;
    /**
     * 获取所有的用户
     * @return
     * @throws Exception
     */
   List<Person> getAllPerson()throws Exception;
    /**
     *  更新用户
      * @throws Exception
     */
   Person  updatePerson(Person person)throws Exception;
    /**
     * 删除用户
     * @param code
     * @throws Exception
     */
    void   deletePerson(String code)throws Exception;
    /**
     * 异步插入Person
     * @param person
     * @throws Exception
     */
    void insertPersonAsync(Person person)throws  Exception;
}

PersonDaoImp.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
package com.lidong.demo.realm;
import android.content.Context;
import java.util.List;
import io.realm.Realm;
/**
*
*@className:PersonDaoImpl
*@desc:
*@author:lidong
*@datetime:16/6/10 下午10:01
*/
public class PersonDaoImpl implements PersonDao {
    private Context context;
    private Realm mRealm;
    public PersonDaoImpl(Context context){
        mRealm = RealmUtil.getIntance(context).getRealm();
    }
    /**
     * @同步插入用户
     * @param person
     * @throws Exception
     */
    @Override
    public void insert(Person person) throws Exception {
        mRealm.beginTransaction();
        Person person1 = mRealm.copyToRealm(person);
        mRealm.commitTransaction();
        mRealm.close();
    }
    /**
     * 获取所有的用户
     *
     * @return
     * @throws Exception
     */
    @Override
    public List<Person> getAllPerson() throws Exception {
        List<Person> mlist = null;
        mlist =  mRealm.where(Person.class).findAll();
        mRealm.close();
        return mlist;
    }
    /**
     * @param person
     * @throws Exception
     */
    @Override
    public Person updatePerson(Person person) throws Exception {
        mRealm.beginTransaction();
        Person person1 = mRealm.copyToRealmOrUpdate(person);
        mRealm.commitTransaction();
        mRealm.close();
        return  person1;
    }
    @Override
    public void deletePerson(String code) throws Exception {
        Person person = mRealm.where(Person.class).equalTo("code",code).findFirst();
        mRealm.beginTransaction();
        person.deleteFromRealm();
        mRealm.commitTransaction();
    }
    /**
     * 异步插入Person
     *
     * @param person
     * @throws Exception
     */
    @Override
    public void insertPersonAsync(final Person person) throws Exception {
       //一个Realm只能在同一个线程中访问，在子线程中进行数据库操作必须重新获取Realm对象：
        mRealm.executeTransaction(new Realm.Transaction() {
            @Override
            public void execute(Realm realm) {
                realm.beginTransaction();
                Person person1 = realm.copyToRealm(person);
                realm.commitTransaction();
                realm.close();//并且要记得在离开线程时要关闭 realm.close();  
            }
        });
        mRealm.close();//关闭Realm对象
    }
}

4.5在Activity中简单调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
package com.lidong.demo.realm;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import com.lidong.demo.R;
import java.util.List;
import io.realm.Realm;
public class DemoRealmActivity extends AppCompatActivity {
    static final String TAG = DemoRealmActivity.class.getSimpleName();
    Realm  mRealm;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo_realm);
//         mRealm= RealmUtil.getIntance(this).getRealm();
//
//
//        mRealm.executeTransaction(new Realm.Transaction() {
//            @Override
//            public void execute(Realm realm) {
//                Person person = realm.createObject(Person.class);
//                person.setName("李东");
//                person.setAge(24);
//                person.setCode(UUID.randomUUID().toString());
//            }
//        });
        Person person = new Person();
                person.setName("李东1");
                person.setAge(28);
                person.setCode("6e56d3aa-7119-429e-8c59-7ad8241e838d");
        PersonDao dao = new PersonDaoImpl(this);
//        try {
//            dao.insert(person);
//        } catch (Exception e) {
//            e.printStackTrace();
//        }
        try {
            dao.deletePerson("6e56d3aa-7119-429e-8c59-7ad8241e838d");
        } catch (Exception e) {
            e.printStackTrace();
        }
        try {
            List<Person> persons = dao.getAllPerson();
            Log.d(TAG, "onCreate: "+persons);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
    }
}

总结：Android中使用Realm数据库基本上就这几点步骤，这是个入门，更加复杂的操作，我在后面会慢慢的深入。

代码地址

小东子的个人技术专栏

发表于   |   字数统计: 734(字)   |   阅读时长: 3(分)

接着上篇Android中WebView加载本地Html，与JavaScript与Android方法相互传值，今天来一篇续集，为什么要来续集呢，感觉自己还有没有交代完的部分，于是在这里再次交代一下，在Android中我们需要将给复杂的数据传到Html页面，我们该怎么做？

大家作为一直搞android或IOS的小伙伴们，有好多对Html都了解不是太多，于是思考了一番，无非就是向Html页面传值吗？我就只会传字符串等基本的数据类型，遇到像List或Map中多层嵌套的复杂数据我该怎么办？我只会字符串，我只会字符串，我只会字符串，于是我是想到了JSON，JSON作为数据交换的一种方式，我是该选择JSON字符串来帮我完成复杂的数据交换,是因为Android或JavaScript中都JSON转换的方法，能够方便的数据转换。

上面我已经把问题抛了出来问题，解决的方法也已经给出。下面来一个简单的例子来说明一下实现方法。

案例说明，我要将一个List传到页面做一个表格，就这么简单。

1.创建一个Person对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package com.lidong.androiddemo;
/**
 * Created by lidong on 16/7/2
 */
public class Person {
    public String name;
   public String age;
   public String uint;
    public Person(String name, String age, String uint) {
        this.name = name;
        this.age = age;
        this.uint = uint;
    }
}

2.创建MyObeject

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
package com.lidong.androiddemo;
import android.content.Context;
import android.util.Log;
import android.webkit.JavascriptInterface;
import com.google.gson.Gson;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by lidong on 16/6/29.
 */
public class MyObject {
    public static final String TAG = MyObject.class.getSimpleName() ;
    private Context mContext;
    private String data;
    public MyObject(Context c,String data){
        this.data = data;
        mContext = c;
    }
    /**
     * 获取person字符串传Html
     * @return
     */
    @JavascriptInterface
    public String getData(){
        List<Person> mlist = new ArrayList<>();
        for (int i = 0; i <10 ; i++) {
            mlist.add(new Person("Li"+i,i+"","com"+i));
        }
        Gson gson = new Gson();
        String d  = gson.toJson(mlist);
        Log.d(TAG, "getData: dddd"+d);
        return d;
    }
}

3.MainActivity的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = (WebView) findViewById(R.id.webView);
        WebSettings settings = webView.getSettings();
        //调用WebView关联的WebSettings中setJavaScriptEnable(true)方法。
        settings.setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
        //调用WebView关联的WebSettings中addJavaScriptInterface
        webView.addJavascriptInterface(new MyObject(this,"dd"),"my");
    }
}

4.index.html的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试Android Json传值</title>
    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript">
$(function(){
    //通过暴露的my对象来获取数据
    var data = my.getData();
    //将json字符串转换为数组
     var f = eval(data);
    //向表格填充数据 
    for(var i = 0;i<f.length;i++){
     var en = f[i];
     $("table").append("<tr><td>"+en.age+"</td><td>"+en.name+"</td><td>"+en.uint+"</td></tr>");
     }
   });
    </script>
</head>
<body>
人员表
<div >
    <table id="table" border="1"  bgcolor="#ffddff"></table>
</div>
</body>
</html>

这个案例基本上就四个步骤，通过这篇文章的学习妈妈在也不会担心android向html传复杂的数据了，谢谢学习

这里写图片描述

小东子的个人技术专栏

发表于   |   字数统计: 1,034(字)   |   阅读时长: 5(分)

最近在做项目中，要使用HightChart来实现心电图，于是，使用WebView加载本地html页面，但是数据是通过蓝牙设备采集的数据，用Java代码获取的数据，需要将数据传到JavaScript中去，使用来绘制心电图。以前都加载服务器端返回的url地址，使用WebView加载，这次不同了，要自己实现心电图的绘制。于是细细的学习了JavaScript与Java代码相互传值，最后总结在这里。

为了让WebView中的JavaScript脚本调用Android方法，WebView提供了一套WebSettings工具类，该工具了提供了大量的方法来管理WebView的选项设置，其中setJavaScriptEnable(true),是让WebView中的JavaScript脚本来调用Android方法。
还有一个最重要的方法addJavaScriptInterface(Object obj,String name)方法，该方法负责把object对象暴漏成JavaScript中的name对象。

1.在WebView调用Android只需要三步

  1. 调用WebView关联的WebSettings中setJavaScriptEnable(true)方法。
  2. 调用WebView关联的WebSettings中addJavaScriptInterface(Object obj,String name)。
  3. 在JavaScript中通过暴露出来的name调用Android中的方法。

1.1首先创建一个Java类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public class MyObject {
    private Context mContext;
    private String data;
    private String time;
    public MyObject(Context c,String data,String time){
        this.data = data;
        this.time = time;
        mContext = c;
    }
    /**
     * 获取心电数据
     * @return
     */
    @JavascriptInterface
    public String getData(){
         String[] dd = new String[0];
        try {
            dd = data.substring(data.indexOf("Ъ")+2, data.length()-1).split(",");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Arrays.toString(dd).toString();
    }
    /**
     * 获取测量时间
     * @return
     */
    @JavascriptInterface
    public String getTime(){
        return time;
    }
}

1.2创建在Activity中加载HTML页面

1
2
3
4
5
6
7
8
9
WebSettings wSet =wb .getSettings();
        //调用WebView关联的WebSettings中setJavaScriptEnable(true)方法。
       wSet.setJavaScriptEnabled(true);
       //加载本地HTML页面
       wb.loadUrl("file:///android_asset/xd.html");
       if (mList != null && mList.size()>0) {
       调用WebView关联的WebSettings中addJavaScriptInterface(Object obj,String name)。
           wb.addJavascriptInterface(new MyObject(getActivity(),  mList.get(0).getResult(),mList.get(0).getDateTime()),"myObj");//这里的myObj是javaScript对象，直接调用getTime()方法，即 myObj.getTime();
       }

1.3创建xd.hmtl文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title>心电</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <!--<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>-->
    <!--<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>-->
    <script type="text/javascript" src="file:///android_asset/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="file:///android_asset/js/highcharts.js"></script>
    <script type="text/javascript">
$(function(){
    var data = myObj.getData();
    var time = myObj.getTime();
    dataHighchartXdDt(data,time);
   })
      //心电
	function dataHighchartXdDt(dtxd,t){
		//以下是绘制心电的逻辑
		//省略
		});
	}
	
    </script>
    <style>
 
    </style>
</head>
<body>
    <div class="middlecenter-left-data-top" id="container"></div>
</body>
</html>

注意：

1
2
var data = myObj.getData();
var time = myObj.getTime();

以上第一个方法就是获取心电数据，第二个方法就是获取测量时间。

2.在Android调用JavaScript方法

2.1webView调用js的基本格式为

1
webView.loadUrl(“javascript:methodName(parameterValues)”)

2.2调用js无参无返回值函数

1
2
String call = "javascript:sayHello()";
webView.loadUrl(call);

2.3调用js有参无返回值函数

注意对于字符串作为参数值需要进行转义双引号。

1
2
String call = "javascript:alertMessage("" + "content" + "")";
webView.loadUrl(call);

2.4调用js有参数有返回值的函数

Android在4.4之前并没有提供直接调用js函数并获取值的方法，所以在此之前，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。

2.4.1.Java调用js代码

1
2
String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

2.4.2 js函数处理，并将结果通过调用java方法返回

1
2
3
function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

2.4.3.Java在回调方法中获取js函数返回值

1
2
3
4
@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

2.5 java代码时用evaluateJavascript方法调用

1
2
3
function getGreetings() {
      return 1;
}
1
2
3
4
5
6
7
8
private void testevaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}

输出结果

I/MainActivity( 1432): onReceiveValue value=1
注意

上面限定了结果返回结果为String，对于简单的类型会尝试转换成字符串返回，对于复杂的数据类型，建议以字符串形式的json返回。
evaluateJavascript方法必须在UI线程（主线程）调用，因此onReceiveValue也执行在主线程。

总结，JavaScript与Android方法相互传值，基本上就这么多了。