vue+webView+bootstrap实现珠珠窗帘计算器

一、项目背景

家里出售一种用珠子串起来的门帘，其中有一种是半截的，而且下半截需要有弧度，但是每个顾客家的门框的宽度和高度都不太一样，因此每次计算每一串珠子的长度是非常麻烦的一件事情，所以才有了做这样一个计算器的需求。

二、需求

1. 能够计算出每一串珠子的长度
2. 支持门帘高度、门帘总宽度、最短串和等长串数据修改。
3. 实现长度效果预览。
4. 能够支持珠子样式搭配和预览（待实现）。

三、技术选型

考虑家里爸妈用，平时用手机居多，因此最好开发一款移动端程序，还涉及到短周期上线，后期维护以及功能升级的问题，不能让爸妈频繁更新程序。再加上自己长时间没有接触android的开发，因此选择了如下技术：
终端：webview
服务器：jdk+tomcat+vue+bootstrap+Echarts

四、实现效果

演示视频等过审了放链接。

五、代码实现

1.终端

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/indexView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="1dp"
        android:layout_marginTop="1dp"
        android:layout_marginEnd="1dp"
        android:layout_marginBottom="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

//mainActivity.java
package com.piziwang.mywebview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
   

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = (WebView) findViewById(R.id.indexView);
       
        webView.getSettings().setJavaScriptEnabled(true);

       webView.loadUrl("这是我的服务器路径");

        //系统默认会通过手机浏览器打开网页，为了能够直接通过WebView显示网页，则必须设置

        webView.setWebViewClient(new WebViewClient(){
   
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
   
                //使用WebView加载显示url
                view.loadUrl(url);
                //返回true
                return true;
            }
        });
    }
}

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.piziwang.mywebview">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:usesCleartextTraffic="true"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"<