vue+webView+bootstrap实现珠珠窗帘计算器
一、项目背景
家里出售一种用珠子串起来的门帘，其中有一种是半截的，而且下半截需要有弧度，但是每个顾客家的门框的宽度和高度都不太一样，因此每次计算每一串珠子的长度是非常麻烦的一件事情，所以才有了做这样一个计算器的需求。
二、需求
- 能够计算出每一串珠子的长度
- 支持门帘高度、门帘总宽度、最短串和等长串数据修改。
- 实现长度效果预览。
- 能够支持珠子样式搭配和预览（待实现）。
三、技术选型
考虑家里爸妈用，平时用手机居多，因此最好开发一款移动端程序，还涉及到短周期上线，后期维护以及功能升级的问题，不能让爸妈频繁更新程序。再加上自己长时间没有接触android的开发，因此选择了如下技术：
终端：webview
服务器：jdk+tomcat+vue+bootstrap+Echarts
四、实现效果
演示视频等过审了放链接。
五、代码实现
1.终端
<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;
}
});
}
}
<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">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
intent-filter>
activity>
application>
<uses-permission android:name="android.permission.INTERNET">uses-permission>
manifest>
2.服务器端
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>indextitle>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="./echartsjs/echarts.min.js">script>
head>
<body>
<div id="app">
<div class="container" style="background-color: initial;">
<div class="row inputRow" style="margin-top: 2
0px;">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">窗帘总高度:button>
span>
<input id="total_height" type="text" class="form-control inputCenter" placeholder="请输入窗帘总高度 单位厘米" v-model="total_height_value">
div>
div>
div>
<div class="row inputRow">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">等长串高度:button>
span>
<input id="center_height" type="text" class="form-control inputCenter" placeholder="请输入窗帘中间高度 单位厘米" v-model="center_height_value">
div>
div>
div>
<div class="row inputRow">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">宽度总串数:button>
span>
<input id="total_width" type="text" class="form-control inputCenter" placeholder="请输入窗帘总宽度 单位厘米" v-model="total_width_value">
div>
div>
div>
<div class="row inputRow">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">等长串串数:button>
span>
<input id="center_width" type="text" class="form-control inputCenter" placeholder="拖动滑块调整中间等长门帘串数" v-model="center_width_value">
div>
div>
div>
<hr />
<div class="row">
<div class="col-xs-4">
test
div>
<div class="col-xs-8">
<div id="main" style="width: 355px;height:300px; margin: 0 auto;position: absolute; ">div>
div>
div>
<hr />
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
total_height_value: 75,
center_height_value: 35,
total_width_value: 10,
center_width_value: 2,
series: [75,48,40, 36, 35, 35, 36, 40,48,75],
xAxis: ["1", "2", "3", "4", "5", "6","7","8","9","10"],
},
mounted() {
this.drawLine();
},
watch: {
total_width_value: function(val) {
this.change(val,this.center_width_value,this.total_height_value,this.center_height_value);
this.drawLine();
},
total_height_value: function(val) {
this.change(this.total_width_value,this.center_width_value,val,this.center_height_value);
this.drawLine();
},
center_height_value: function(val) {
this.change(this.total_width_value,this.center_width_value,this.total_height_value,val);
this.drawLine();
},
center_width_value: function(val) {
this.change(this.total_width_value,val,this.total_height_value,this.center_height_value);
this.drawLine();
},
},
methods: {
change(W,w,H,h){
var xAxis_value=[];
var series_value=[];
var a=(W-w)*5/2;
var b=H-h;
var j=-a;
for(j=-a;j<0;j+=5){
var y=Math.sqrt((Math.pow(a,2)*Math.pow(b,2)-Math.pow(b,2)*Math.pow(j,2))/Math.pow(a,2));
var y_height=Math.floor(H-y);
series_value.push(y_height);
}
for(var k=1;k<=w;k++){
var y=h;
series_value.push(y);
j+=5;
}
for(j=5;j<=W*5-w*5;j+=5){
console.log(j);
var y=Math.sqrt((Math.pow(a,2)*Math.pow(b,2)-Math.pow(b,2)*Math.pow(j,2))/Math.pow(a,2));
var y_height=Math.floor(H-y);
series_value.push(y_height);
}
for (var i = 1; i <=W; i++) {
xAxis_value.push(i);
}
this.xAxis = xAxis_value;
this.series=series_value;
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
//show:false,
left: 'center',
text: '门帘弧度效果预览图'
},
grid: {
left: 25,
right: 15,
top: 50,
bottom: 5,
},
tooltip: {},
xAxis: {
name: '总宽度',
data: this.xAxis,
position: 'top',
},
yAxis: {
inverse: true
},
series: [{
name: '销量',
type: 'bar',
barWidth: 4,
data: this.series,
label: {
show: true, //开启显示
position: 'bottom', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10,
}
}
}]
});
}
}
})
script>
body>
html>