vue与android原生互相调用核心代码

<template>
    <view class="uni-container">
        <!-- <view class="uni-header-logo">
            <image class="uni-header-image" src="/static/componentIndex.png"></image>
        </view>
        <view class="uni-hello-text">
            <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
            <u-link class="hello-link" :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
                :inWhiteList="true"></u-link>
        </view> -->
        
        <view class="uni-hello-text">
            <button @click="callFunction()"> 调方法2</button>
            <button @click="callAndroid()"> 调安卓2</button>
        </view>
        
        <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
            <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index)">
                <text class="uni-panel-text">{{item.name}}</text>
                <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">&#xe581;</text>
            </view>
            <view class="uni-panel-c" v-if="item.open">
                <view class="uni-navigate-item" v-for="(item2,key) in item.pages" :key="key" @click="goDetailPage(item2)">
                    <text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>
                    <text class="uni-navigate-icon uni-icon">&#xe470;</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    
    import uLink from '@/components/uLink.vue'
    export default {
        components: {
            uLink
        },
        data() {
            return {
                list: [{
                        id: 'view',
                        name: '视图容器',
                        open: false,
                        pages: [
                            'view',
                            'scroll-view',
                            'swiper'
                            // #ifndef MP-TOUTIAO
                            ,
                            'movable-view',
                            'cover-view'
                            // #endif
                        ]
                    }, {
                        id: 'content',
                        name: '基础内容',
                        open: false,
                        pages: ['text', 'rich-text', 'progress']
                    }, {
                        id: 'form',
                        name: '表单组件',
                        open: false,
                        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio',
                            'slider',
                            'switch', 'textarea',
                            // #ifdef APP-PLUS || MP-WEIXIN
                            'editor',
                            // #endif
                        ]
                    }, {
                        id: 'nav',
                        name: '导航',
                        open: false,
                        pages: ['navigator']
                    }, {
                        id: 'media',
                        name: '媒体组件',
                        open: false,
                        pages: [
                            'image',
                            // #ifndef MP-ALIPAY
                            'video',
                            // #endif
                            // #ifndef MP-ALIPAY || MP-TOUTIAO
                            'audio',
                            // #endif
                        ],
                    },
                    // #ifndef MP-TOUTIAO
                    {
                        id: 'map',
                        name: '地图',
                        open: false,
                        pages: ['map']

                    },
                    // #endif
                    // #ifdef APP-PLUS
                    {
                        id: 'web-view',
                        name: '网页',
                        open: false,
                        pages: [{
                            name: '网络网页',
                            url: '/pages/component/web-view/web-view'
                        }, {
                            name: '本地网页',
                            url: '/pages/component/web-view-local/web-view-local'
                        }]
                    },
                    // #endif
                    // #ifndef APP-PLUS
                    {
                        id: 'web-view',
                        name: '网页',
                        open: false,
                        pages: ['web-view']
                    },
                    // #endif
                ],
                navigateFlag: false
            }
        },
        onShareAppMessage() {
            return {
                title: '欢迎体验uni-app',
                path: '/pages/tabBar/component/component'
            }
        },
        onNavigationBarButtonTap(e) {
            uni.navigateTo({
                url: '/pages/about/about'
            });
        },
        
        mounted() {
            window.callJS = this.callJS;
        }, 
            
        methods: {
            triggerCollapse(e) {
                if (!this.list[e].pages) {
                    this.goDetailPage(this.list[e].url);
                    return;
                }
                for (var i = 0; i < this.list.length; ++i) {
                    if (e === i) {
                        this.list[i].open = !this.list[e].open;
                    } else {
                        this.list[i].open = false;
                    }
                }
            },
            goDetailPage(e) {
                if (this.navigateFlag) {
                    return;
                }
                this.navigateFlag = true;
                if (typeof e === 'string') {
                    uni.navigateTo({
                        url: '/pages/component/' + e + '/' + e
                    })
                } else {
                    uni.navigateTo({
                        url: e.url
                    })
                }
                setTimeout(() => {
                    this.navigateFlag = false;
                }, 200)
            },
            callFunction(){
                alert('123');
            },
            
            callAndroid(){
                var s=window.bridge.getMessage("hello-22");
                alert(s);
            },
            callJS(s){            
                alert(s.name+"Android调用了JS的callJS()方法");
            },
            /* callJS(){
                alert("Android调用了JS的callJS()方法");
            } */
            
        }
    }
</script>

<style>
    @import '../../../common/uni-nvue.css';
</style>
 

 

package com.example.user.androidandjs;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

import com.google.gson.Gson;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    // private String url="http://10.40.20.64:8888/html/html/borrowRecordone.html";
    // private String url="http://10.40.20.110:8080/fenqi-majia-web/1.4.4/html/borrowRecordone.html";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.web);
        webView.setWebChromeClient(new WebChromeClient());
        webView.getSettings().setJavaScriptEnabled(true);
        //webView.loadUrl("file:///android_asset/javascript.html");

        webView.setWebChromeClient(new MyWebChromeClient());
        webView.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) { // Handle the error
            }
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        //设置背景颜色 透明
        webView.setBackgroundColor(Color.argb(0, 0, 0, 0));

        webView.addJavascriptInterface(new MyBridge(this), "bridge");

        webView.loadUrl("http://172.16.10.227:9000/h5");

        Button btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // webView.loadUrl("javascript:callJS(3434)");
                Person person = new Person();
                person.setName("zitan");
                person.setAge(27);
                person.setBoy(true);
                String s = new Gson().toJson(person);

                webView.loadUrl("javascript:callJS("+s+")");
//                webView.loadUrl("javascript:jsGetMessageFromNative(" + 123 + ")");
            }
        });
    }
}

package com.example.user.androidandjs;

import android.content.Context;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

/**
 * Created by zitan on 2018/5/2.
 */

public class MyBridge {
    private Context context;
    public MyBridge(Context context) {
        this.context=context;
    }

    @JavascriptInterface
    public void showMsg(String msg){
        Toast.makeText(context,msg+"htmml-js-调安卓",Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void toastMessage(String message) {
        Log.i("toastMessage" , "传递过来的值是： "+message);
    }
    @JavascriptInterface
    public String getMessage(String s){
        return s+"world !";
    }
}

package com.example.user.androidandjs;

import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;


//允许Javascript调用alert
final class MyWebChromeClient extends WebChromeClient {
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

        return super.onJsAlert(view, url, message, result);
    }
}

package com.example.user.androidandjs;

import java.io.Serializable;

/**
 * Created by zitan on 2018/5/22.
 */

public class Person implements Serializable {
    private String name;
    private int age;
    private boolean isBoy;

    public String getName() {
        return name == null ? "" : name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public boolean isBoy() {
        return isBoy;
    }

    public void setBoy(boolean boy) {
        isBoy = boy;
    }

    @Override
    public String toString() {
        return "Person{" +
                "name='" + name + '\'' +
                ", age='" + age + '\'' +
                ", isBoy=" + isBoy +
                '}';
    }
}