js_1">js中的继承

<script type="text/javascript">
      //父类
      function FatherClass(x){
       this.showInfo = function(){
        window.alert("FatherClass x="+this.x);
       }
      }
      //子类
      function ChildClass(x){

      }
      //实现继承
      ChildClass.prototype = new FatherClass();

      var childObject = new ChildClass();
      childObject.x = 18;
      childObject.showInfo();
     </script>

在这里插入图片描述

js_23">混合开发中java调js

在这里插入图片描述
index.html

<html lang="en">
 <head>
	......
     <script type="text/javascript">
      function setUsername(){
       var usernameInput = document.getElementById("username");
       usernameInput.value = "android test";
      }
     </script>
 </head>
 <body>
  <input id="username"/>
 </body>
</html>

activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/call_js_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="call js"/>

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

MainActivity

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.call_js_button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callJs(view);
            }
        });

        webView = findViewById(R.id.webView);
        //加载网页
        webView.loadUrl("file:///android_asset/index.html");
        WebSettings webSettings = webView.getSettings();
        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        //允许弹框
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });

        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return super.shouldOverrideUrlLoading(view, request);
            }
        });
    }

    public void callJs(View view){
        //通过java调js
        webView.loadUrl("javascript:setUsername()");
    }
}

jsjava_115">混合开发中js调java

现在实现以下功能，单击网页中按钮，实现拨打电话功能（真机上测试）

声明打电话权限权限

<uses-permission android:name="android.permission.CALL_PHONE"/>

网页中增加一个按钮，单击时调用callJava()

<script type="text/javascript">
      function callJava(){
       androidPhoneObject.call(1008611);
      }
     </script>
<input type="button" value="callJava" onclick="callJava()"/>

MainActivity

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        //加载网页
        webView.loadUrl("file:///android_asset/index.html");
        WebSettings webSettings = webView.getSettings();
        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
       
        Phone phone = new Phone();
        //js调phone对象
        //在网页中通过androidPhoneObject使用phone对象
        webView.addJavascriptInterface(phone,"androidPhoneObject");
    }

    final class Phone{
        //告诉编辑器，这个方法给js用
        @JavascriptInterface
        public void call(String mobile){
            Uri uri = Uri.parse("tel:"+mobile);
            Intent intent = new Intent(Intent.ACTION_CALL,uri);
            startActivity(intent);
        }
    }
}

Canvas

在这里插入图片描述

<!doctype html>
<html lang="en">
 <head>
  ......
     <script type="text/javascript">
      var gameCanvas;
      //画图，文字，矩形
      var context;
      var backgroundImage;
      var backgroundX = 0;

      var carImage;
      var carX = 0;
      var index = 0;

      function load(){
       gameCanvas = document.getElementById("gameCanvas");
       context = gameCanvas.getContext("2d");
       //加载沙漠背景图
       backgroundImage = new Image();
       backgroundImage.src = "space.jpg";
       //当背景图片加载完成后，每隔100ms执行一次draw
       backgroundImage.onload = function(){
        window.setInterval(draw,100);
       }
       //加载车的图片
       carImage = new Image();
       carImage.src = "alien.png";
      }

      function draw(){
       backgroundX = backgroundX - 20;
       if(backgroundX < 300-backgroundImage.width){
        backgroundX = 0;
       }
       console.log("backgroundX = "+ backgroundX);
       context.drawImage(backgroundImage,backgroundX,0);

       carX = carX + 20;
       if(carX > 300){
        carX = 0;
       }
       //上下颠簸效果
       index ++;
       if(index%2==0){
        context.drawImage(carImage,carX,100);
       }else{
        context.drawImage(carImage,carX,120);
       }

      }
      //设置网页加载完后，执行load函数
      window.onload = load;
     </script>
 </head>
 <body>
  <canvas id="gameCanvas" width="300" height="308"></canvas>
 </body>
</html>