微信小程序之科学计算器（微信小程序+java+python）

先把自己的小程序和页面贴出来

1.前后端实现步骤：

1.前端采用的就是微信小程序开发工具，后端采用的是以springboot为基础，调用python中的Math类进行开发。
2.开发中遇到的难题不多
（1）小程序中主要就是光标的定位，如何在对应位置进行增删。
（2）后端遇到的问题，将 python 代码集成到 java 中，总体难度不大。（全网都是教程）
（3）在url中存在转义字符如 ‘+’ 等问题处理方案。
（4）发布到linux遇到的坑。理论上来讲，java调用的pythond 的包，不存在平台的适用性，但是作死的将python文件命名为中文，导致一直调用失败。

2.微信小程序代码展示：

xxx.wxml

<view class="page"><view class="section"><textarea focus="true" auto-focus cursor="1" bindfocus="bindfocus" bindinput="bindinput2" data-set="{{textarea}}" style=" width:100%;background-color: #ddd;" value="{{textarea}}">{{textareaa}}</textarea><!-- </view>  --><view value="{{result}}">运行结果为：{{result}}</view><!-- <textarea focus="true" auto-focus cursor="1" style="background-color: crimson;" bindinput="ceshi_textarea"  data-set="{{textarea}}"  value="{{textarea}}"></textarea> --><!-- <view style="width: 100%;height:12%;background-color: #222;"><text style=" width:100%;height:5%;" value="{{result}}"></text></view> --><view class="view_1" style=" width:100%;background-color: #ddd;"><view ><button class="btn_1" bindtap="btn_zuo">←</button><button class="btn_1" bindtap="btn_left">delete_left</button></view><view><button class="btn_1" bindtap="btn_you">→</button><button class="btn_1" bindtap="btn_clear">delete_all</button></view></view><view class="tui-table-view"><view class='sort-ct-item' wx:for='{{list_1}}' wx:for-index="indexs" wx:for-item="items" wx:key="indexs"><view class="tui-col-1" data-set="{{items}}" bindtap="copyBtn"><view class='price'><text style="" data-set="{{items}}">{{items}}</text></view></view></view><view style="width: 100%;"></view><view class='sort-ct-item' wx:for='{{list_2}}' wx:for-index="indexs" wx:for-item="items" wx:key="indexs"><view class="tui-col-3" data-set="{{items}}" bindtap="copyBtn"><view class='price'><text style="border-radius: 5rpx;">{{items}}</text></view></view></view></view><button bindtap="btn_submit">提交</button></view>
</view>

wxss.wxml

/* pages/kexuejisuanqi/kexuejisuanqi.wxss */
/* pages/科学计算器/科学计算器.wxss */
.page{width: 100%;height: 100%;
}
.section{position: fixed;bottom: 20rpx;background-color: burlywood;
}
.tui-table-view{display: -webkit-flex;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;width: 100%;
}
.tui-col-3{/* flex: 0 0 auto; *//* width: 19%; */text-align: center;color: #797979;padding: 15rpx ;margin-top: 10rpx;margin-bottom: 10rpx;font-size: 30rpx;border: 4rpx solid black;
}
.tui-col-1{/* flex: 0 0 auto; *//* width: 19%; */text-align: center;color: #797979;padding: 18rpx ;margin-top: 10rpx;margin-bottom: 10rpx;font-size: 40rpx;border: 4rpx solid black;}.view_1{display: flex;
}.btn_1{border-radius: 15rpx;padding: 10rpx 0;margin: 15rpx;font-family:'Courier New', Courier, monospace;
}

xxx.js

// pages/kexuejisuanqi/kexuejisuanqi.js
var app = getApp()
Page({/*** 页面的初始数据*/data: {list_1: ['1', '2', '3', '4','5', '6', '7', '8','9', '0','.', '+', '-', '*', '/','(', ')'],list_2: [// 绝对值'fabs',//阶乘 整数阶乘'factorial',//e 次 x 幂'exp',//返回 x 的自然对数（底为 e ）'log',//将返回 x 的 y 次幂   两个参数'pow',//返回 x 的平方根。'sqrt',//三角函数         //返回以弧度为单位的 x 的反余弦值。 结果范围在 0 到 pi 之间。//返回以弧度为单位的 x 的反余弦值。 结果范围在 0 到 pi 之间。'acos',//返回以弧度为单位的 x 的反正弦值。 结果范围在 -pi/2 到 pi/2 之间。'asin',//返回以弧度为单位的 x 的反正切值。 结果范围在 -pi/2 到 pi/2 之间。'atan',//返回 x 弧度的余弦值。'sin','cos','tan',//角度弧度转换//将角度 x 从弧度转换为度数'degrees',//角度 x 从度数转换为弧度。'radians',//双曲函数//返回 x 的反双曲余弦值'acosh',//返回 x 的反双曲正弦值。'asinh',//返回 x 的反双曲正切值。'atanh',//返回 x 的双曲余弦值。'cosh',//返回 x 的双曲正弦值。'sinh',//返回 x 的双曲正切值。'tanh',//返回 x 处的 伽马函数 值。'gamma',// 返回Gamma函数在 x 绝对值的自然对数。'lgamma',//常量//pi'π',//e'e',//lgamma'lgamma',],textarea: "",cursor: 0,guangbiao: false,guangbiaoqidong: false,result:''},btn_left:function(){console.log('btn_left')var textarea = this.data.textarea;var str = textarea.substring(0, this.data.cursor - 1)var str2 = textarea.substring(this.data.cursor)var str3 = str + str2;this.setData({textarea: str3,cursor: this.data.cursor - 1})},//固定位置插入| 光标btn_charu2: function () {var text = this.data.textarea;var t1 = this.data.textarea.substring(0, this.data.cursor);var t2 = this.data.textarea.substring(this.data.cursor)this.setData({textarea: t1 + "|" + t2,// cursor: this.data.cursor + 1})},//删除固定位置的光标 |btn_delete2: function () {var that = thisfor (var i = 0; i < that.data.textarea.length; i++) {// console.log(i)if (that.data.textarea.charAt(i) == '|') {that.data.textarea = that.data.textarea.replace('|', '')}}},//光标向左移动btn_zuo: function (e) {if (this.data.guangbiaoqidong == false) {this.data.guangbiaoqidong = truethis.sendCode(e);}// this.hidden_view()console.log(this.data.cursor, this.data.textarea.charAt(this.data.cursor))this.setData({cursor: this.data.cursor - 1})},//光标向右移动btn_you: function (e) {if (this.data.guangbiaoqidong == false) {this.data.guangbiaoqidong = truethis.sendCode(e);}console.log(this.data.cursor)this.setData({cursor: this.data.cursor + 1})},//光标 定时器sendCode: function (e) {var that = this;setInterval(function () {if (that.data.guangbiao == false) {// console.log('1')that.data.guangbiao = truethat.btn_charu2()} else {// console.log('2')that.data.guangbiao = falsethat.btn_delete2()}}, 100)},//删除 | 定时器deleteCode: function (e) {var that = this;setInterval(function () {for (var i = 0; i < that.data.textarea.length; i++) {if (that.data.cursor == i) {} else {if (this.data.textarea.charAt(this.data.cursor) == '|') {that.data.textarea.replace('|', '')}}}if (that.data.guangbiao == false) {}}, 100)},btn_clear: function () {this.setData({textarea: ""})},/*** 获取点击的 按钮 ，并将值显示在 textarea*/copyBtn: function (e) {var that = this;var now_args = e.currentTarget.dataset.setif (now_args == 'log'||now_args == 'pow') {now_args = now_args + '(?,?)'}if (now_args != "." && now_args != "π" && now_args != "e" && now_args != "lgamma" && now_args != "0" && now_args != "1" && now_args != "2" && now_args != "3" && now_args != "4" && now_args != "5" && now_args != "6" && now_args != "7" && now_args != "8" && now_args != "9" && now_args != "(" && now_args != ")" && now_args != "/" && now_args != "*" && now_args != "+" && now_args != "-" && now_args != "log(?,?)"&& now_args != "pow(?,?)") {now_args = now_args + '(?)'} else {}//将值添加到光标处：var textarea = this.data.textarea;var str = textarea.substring(0, this.data.cursor)var str2 = textarea.substring(this.data.cursor)// var textarea = "";if (this.data.cursor == 0) {var textarea = str2 + now_args;this.setData({textarea: textarea})} else {var textarea = str + now_args + str2;this.setData({textarea: textarea})// textarea = str + now_args + str2;}// var textarea = this.data.textarea + now_args；},bindTextAreaBlur: function (args) {console.log("bindTextAreaBlur!!!->" + args)},btn_submit: function (args) {console.log('btn_submit->args=', args)var that = thisthis.setData({textarea: this.data.textarea})console.log("textarea=", this.data.textarea)for (var i = 0; i < that.data.textarea.length; i++) {// console.log(i)if (that.data.textarea.charAt(i) == '|') {that.data.textarea = that.data.textarea.replace('|', '')}if (that.data.textarea.charAt(i) == '+') {that.data.textarea = that.data.textarea.replace('+', '%2B')}if (that.data.textarea.charAt(i) == '(') {that.data.textarea = that.data.textarea.replace('(', '%28')}if (that.data.textarea.charAt(i) == ')') {that.data.textarea = that.data.textarea.replace(')', '%29')}}var biaodashi = this.data.textarea;console.log(app.globalData.address + "getNum?content='" + that.data.textarea + "'");wx.request({url: app.globalData.address + 'getNum?content="' + that.data.textarea + '"',// data:{//   content:that.data.textarea// },timeout: 150000,success: function (args) {console.log('success=>', args)that.setData({result: args.data})}})that.btn_clear()},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

3.springboot重点代码展示

1.先把python的jar包放上来吧

        <dependency><groupId>org.python</groupId><artifactId>jython-standalone</artifactId><version>2.7.2</version></dependency>

2.controller 类
该类接收来自网络上的包

import com.example.demo.Util.JiSuan_Util;
import org.python.antlr.ast.Str;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
public class JiSuanQiController {@RequestMapping("getNum")public @ResponseBodyString getJiSuanQi(@RequestParam(value = "content",required = false) String content){//主要处理一些出现的字符， content=content.replace("\"","");content=content.replace("|","");//exp是因为自己代码的匹配原则，与e冲突。content=content.replace("exp","ttt");//三个是转义字符传递 content=content.replace("%2B","+");content=content.replace("%28","(");content=content.replace("%29",")");System.out.println(content);Object num=JiSuan_Util.getNum(content);System.out.println("JiSuan_Util--->"+num);return num.toString();}}

3.两个工具类，实现连接python，及接收返回结果
(1) JiSuan_Util.java

import org.python.core.PyFunction;
import org.python.core.PyObject;
import org.python.core.PyString;
import org.python.util.PythonInterpreter;/*** 实现功能 将前端传进来的表达式 ，进行优化 函数表达式 前面加上 math. 关键字 提交 python处理*/
public class JiSuan_Util {public static PythonInterpreter interpreter = new PythonInterpreter();/*** python 处理 表达式 并返回结果*/public static Object getNum(String expression){interpreter.execfile("/jisuanqi.py");
//        interpreter.execfile("D:\\D\\python空间\\微信小程序\\计算器\\计算器.py");// 第一个参数为期望获得的函数（变量）的名字，第二个参数为期望返回的对象类型PyFunction pyFunction = interpreter.get("add", PyFunction.class);//调用函数，如果函数需要参数，在Java中必须先将参数转化为对应的“Python类型”PyObject pyobj = pyFunction.__call__(new PyString(processExpression(expression)));System.out.println("the anwser is: " + pyobj);return pyobj;}/*** 加工表达式*/public static String processExpression(String expression){System.out.println("processExpression->"+expression);String str = expression;for(int i = 0; i< MyMath.getMyMath().size(); i++){str = str.replace(MyMath.getMyMath().get(i).getWx(),MyMath.getMyMath().get(i).getPython());System.out.println("str->"+str);}System.out.println(str);return str;}}

(2)MyMath.java

import java.util.ArrayList;public class MyMath {public String wx;public String python;public MyMath(String wx, String python) {this.wx = wx;this.python = python;}public String getWx() {return wx;}public void setWx(String wx) {this.wx = wx;}public String getPython() {return python;}public void setPython(String python) {this.python = python;}@Overridepublic String toString() {return "MyMath{" +"wx='" + wx + '\'' +", python='" + python + '\'' +'}';}/*** 注：pow 函数为两个参数* @return*/public static ArrayList<MyMath> getMyMath() {ArrayList<MyMath> list = new ArrayList<MyMath>();//绝对值list.add(new MyMath("fabs","math.fabs"));//以一个整数返回 x 的阶乘。 如果 x 不是整数或为负数时则将引发 ValueError。list.add(new MyMath("factorial","math.factorial"));//返回给定的整数参数的最大公约数。 如果有一个参数非零，则返回值将是能同时整除所有参数的最大正整数。 如果所有参数为零，则返回值为 0。 不带参数的 gcd() 返回 0。list.add(new MyMath("gcd","math.gcd"));//返回给定的整数参数的最小公倍数。 如果所有参数均非零，则返回值将是为所有参数的整数倍的最小正整数。 如果参数之一为零，则返回值为 0。 不带参数的 lcm() 返回 1。list.add(new MyMath("lcm","math.lcm"));//使用一个参数，返回 x 的自然对数（底为 e ）。[自定义补充：必须为一个参数]//将返回 x 的 y 次幂。  该值参数为两个list.add(new MyMath("pow","math.pow"));//返回 x 的平方根。list.add(new MyMath("sqrt","math.sqrt"));//三角函数//返回以弧度为单位的 x 的反余弦值。 结果范围在 0 到 pi 之间。list.add(new MyMath("acos","math.acos"));//返回以弧度为单位的 x 的反正弦值。 结果范围在 -pi/2 到 pi/2 之间。list.add(new MyMath("asin","math.asin"));//返回以弧度为单位的 x 的反正切值。 结果范围在 -pi/2 到 pi/2 之间。list.add(new MyMath("atan","math.atan"));//返回 x 弧度的余弦值。list.add(new MyMath("cos","math.cos"));list.add(new MyMath("sin","math.sin"));list.add(new MyMath("atan","math.atan"));//角度弧度转换//将角度 x 从弧度转换为度数list.add(new MyMath("degrees","math.degrees"));//角度 x 从度数转换为弧度。将list.add(new MyMath("radians","math.radians"));//双曲函数://返回 x 的反双曲余弦值list.add(new MyMath("acosh","math.acosh"));//返回 x 的反双曲正弦值。list.add(new MyMath("asinh","math.asinh"));//返回 x 的反双曲正切值。list.add(new MyMath("atanh","math.atanh"));//返回 x 的双曲余弦值。list.add(new MyMath("cosh","math.cosh"));//返回 x 的双曲正弦值。list.add(new MyMath("sinh","math.sinh"));//返回 x 的双曲正切值。list.add(new MyMath("tanh","math.tanh"));//返回 x 处的 伽马函数 值。list.add(new MyMath("gamma","math.gamma"));//返回Gamma函数在 x 绝对值的自然对数。list.add(new MyMath("lgamma","math.lgamma"));//常量list.add(new MyMath("π","math.pi"));list.add(new MyMath("e","math.e"));list.add(new MyMath("lgamma","math.lgamma"));list.add(new MyMath("log","math.log"));//返回 e 次 x 幂list.add(new MyMath("ttt","math.exp"));return list;}}

python代码很简单（三行）

import mathdef calculator(a):return eval(a)

四、心得

本文中微信小程序只是将算式表达式传递给java，由java处理完成，交给python计算结果。在这里，对算式表达式的处理，可以在三个地方，微信小程序，java，python。根据自己对哪个语言精通，可以调节。
java中也有自己的math包，如果觉得python难，可以网上查阅一下。
微信小程序端有个取巧指出，让用户自己书写函数，这样微信小程序端将大大简单，但java 端难度将增大。

五、扫码呀！瞅啥

微信小程序科学计算器（微信小程序+java+python）相关推荐

chrome扩展程序科学_5 Chrome扩展程序可简化您作为数据科学家的生活
chrome扩展程序科学 Chrome extensions are fantastic, useful species of software that you can add to your Ch ...
科学计算机要用的电池是几号,科学计算器的常识及注意事项
无标题文档科学计算器的常识及注意事项科学计算器是电子计算器的一种.可进行乘方.开方.指数.对数.三角函数.统计等方面的运算,又称函数计算器. 目前的计算器有标准型和科学型.标准型带有足够大.可用手 ...
中专计算机学数学,科学计算器在中职数学教学中的意义
科学计算器在中职数学教学中的意义 (7页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.90 积分科学计算器在中职数学教学中的意义摘要:科学计算器 ...
数学计算机软件推荐,科学计算器软件有哪些？2020好用的科学计算器推荐
不同于一般计算加减乘除的普通型计算器,科学计算器是还能计算各种数学函数.线性运算.进制转换等功能的专业计算工具,能够帮助我们快速计算出所需要的结果,那么,你知道有哪些好用的科学计算器软件吗?下面就是小 ...
c 科学计算机优先级计算,北邮上机复试科学计算器 —— 由编译器的不同引发的数十次 WA，最后终于AC——总结...
北邮的上机复试环境用的是标准c/c++,而我从大一开始就用vc6.0,很痛苦的出现了很多不同情况.今天用DEV c++解决了一些问题,总结一下. 1. gets() 和 scanf() gets() ...
微信小程序制作科学计算器（控制台接受显示数据）
前言由于前一阵子忙于考驾照和复习考试,所以好久没有写博客了.这篇博客写的是使用微信小程序开发简单项目,制作一个计算器,很简单.安装开发工具和注册微信小程序账号等等这些网上教程很多,这里就直奔主题吧. ...
微信小程序-简易计算器
代码地址如下: http://www.demodashi.com/demo/14210.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
个人所得税计算器微信小程序开发计算差值方法
个人所得税计算器微信小程序开发计算差值方法 1.自己做的demo,查看差值:扫一扫扫一扫 2.效果: 3.官网API: https://developers.weixin.qq.com/m ...
最新家庭亲戚关系计算器微信小程序源码
正文: 亲戚关系计算器微信小程序源码是一款为避免遇到亲戚却不知道该怎么称呼时遇到的尴尬情况而开发的由于社会节奏的快速发展,现在的关系不像以前一样经常联系和维护,导致了有些自己家的一些亲戚也疏远了很多 ...

微信小程序科学计算器（微信小程序+java+python）

微信小程序之科学计算器（微信小程序+java+python）

先把自己的小程序和页面贴出来

1.前后端实现步骤：

2.微信小程序代码展示：

3.springboot重点代码展示

四、心得

五、扫码呀！瞅啥

微信小程序科学计算器（微信小程序+java+python）相关推荐

最新文章

热门文章

微信小程序 科学计算器（微信小程序+java+python）

微信小程序之科学计算器 （微信小程序+java+python）

先把自己的小程序和页面贴出来

1.前后端实现步骤：

2.微信小程序 代码展示：

3.springboot重点代码展示

四、心得

五 、扫码呀！瞅啥

微信小程序 科学计算器（微信小程序+java+python）相关推荐

最新文章

热门文章

微信小程序科学计算器（微信小程序+java+python）

微信小程序之科学计算器（微信小程序+java+python）

2.微信小程序代码展示：

五、扫码呀！瞅啥

微信小程序科学计算器（微信小程序+java+python）相关推荐