美文网首页小程序
从零做一个小程序(计算器)赚钱

从零做一个小程序(计算器)赚钱

作者: 蓝不蓝编程 | 来源:发表于2021-08-30 19:11 被阅读0次

目标

做个小程序(不买服务器),能够赚钱。

为什么选择小程序

1、小程序发布流程简单,只需要在微信开放平台发布,不需要到各个应用市场发布,不需要应用App的软著。
2、容易传播,通过微信直接分享就可以传播,用户点开就可以用。
3、可以不需要服务器,这样不必花钱买域名、服务器、CDN、存储。

效果图

微信小程序工程截图

主要源代码

1、页面:index.wxml

<view class="content">
  <view class="layout-top">
    <view class="screen">
     {{screenData}}
    </view>
  </view>
    
  <view class="layout-bottom">
    <view class="btn-group">
      <view class="item operator-input" bindtap="clickBtn" id="{{idc}}">С</view>
      <view class="item operator-input" bindtap="clickBtn" id="{{idx}}">×</view>
      <view class="item operator-input" bindtap="clickBtn" id="{{iddiv}}">÷</view>
      <view class="item operator-input" bindtap="clickBtn" id="{{idadd}}">+</view>
    </view>
    <view class="btn-group">
      <view class="item number-input" bindtap="clickBtn" id="{{id9}}">9</view>
      <view class="item number-input" bindtap="clickBtn" id="{{id8}}">8</view>
      <view class="item number-input" bindtap="clickBtn" id="{{id7}}">7</view>
      <view class="item operator-input" bindtap="clickBtn" id="{{idj}}">-</view>
    </view>
    <view class="btn-group">
      <view class="item number-input" bindtap="clickBtn" id="{{id6}}">6</view>
      <view class="item number-input" bindtap="clickBtn" id="{{id5}}">5</view>
      <view class="item number-input" bindtap="clickBtn" id="{{id4}}">4</view>
      <view class="item number-input" bindtap="clickBtn" id="{{id0}}">0</view>
    </view>
    <view class="btn-group">
      <view class="item number-input" bindtap="clickBtn" id="{{id3}}">3</view>
      <view class="item number-input" bindtap="clickBtn" id="{{id2}}">2</view>
      <view class="item number-input" bindtap="clickBtn" id="{{id1}}">1</view>
      <view class="item operator-input" bindtap="clickBtn" id="{{ide}}">=</view>
    </view>
  </view>
</view>

2、css文件:index.wxss

.content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    overflow-x: hidden;
}
.layout-top{
    width: 100%;
}
.layout-bottom{
    width: 100%;
}
.screen {
    text-align: right;
    width: 100%;
    line-height: 260rpx;
    padding: 0 10rpx;
    font-size: 60px;
    box-sizing: border-box;
}
.btn-group {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    height: 5rem;
}
.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.item:active {
    background-color: #f58220;
}
.operator-input {
    color: #fef4e9;
    background: #6950a1;
    border-radius: 5rpx;
    margin: 10rpx;
    font-weight: bold;
}
.number-input {
    color:#000;
    border-radius: 5rpx;
    margin: 10rpx;
    background-color: #ccc;
}

3、js文件:index.js

var rpn = require("../../utils/rpn.js");
Page({
  data: {
    idc: "clear",
    idadd: "+",
    id9: "9",
    id8: "8",
    id7: "7",
    idj: "-",
    id6: "6",
    id5: "5",
    id4: "4",
    idx: "*",
    id3: "3",
    id2: "2",
    id1: "1",
    iddiv: "/",
    id0: "0",
    ide: "=",
    screenData: "0",
    operaSymbo: { "+": "+", "-": "-", "*": "*", "÷": "/" },
    lastIsOperaSymbo: false,
    iconType: 'waiting_circle',
    iconColor: 'white',
  },
  clickBtn: function (event) {
    //获取触发点击事件的标签的id
    var id = event.target.id
    if (id == this.data.idc) {//清屏
      this.setData({
        'screenData': '0'
      });
    } else if (id == this.data.ide) {//等于=
      var data = this.data.screenData;
      if (data == "0") {
        return;
      }
      var lastWord = data.charAt(data.length - 1);
      if (isNaN(lastWord)) {
        return;
      }
      var expression = this.data.screenData;
      //获取rpn库运算结果
      var result = rpn.calCommonExp(expression);
      this.setData({
        'screenData': result + ""
      });

    } else {//运算符和数字的问题
      if (this.data.operaSymbo[id]) { //如果是符号+-*/
        if (this.data.lastIsOperaSymbo) {
          //如果是最后一位是符号,就不能在收入符号
          return;
        }
      }
      var sd = this.data.screenData;
      var data;
      if (sd == 0) {
        data = id;
      } else {
        data = sd + id;
      }
      this.setData({
        'screenData': data
      });

      ///置一下最后一位是否为运算符的标志位
      if (this.data.operaSymbo[id]) {
        this.setData({ "lastIsOperaSymbo": true });
      } else {
        this.setData({ "lastIsOperaSymbo": false });
      }
    }
  },
})

4、js工具库文件:rpn.js

function isOperator(value) {
    var operatorString = '+-*/()×÷';
    return operatorString.indexOf(value) > -1;
}

function getPriority(value) {
    if(value == '-' || value == '+') {
        return 1;
    } else if(value == '*' || value == '/' || value == '×' || value == '÷' ) {
        return 2;
    } else{
        return 0;
    }
}

function priority(v1, v2) {
    return getPriority(v1) <= getPriority(v2);
}

function outputRpn(exp) {
    var inputStack = [];
    var outputStack = [];
    var outputQueue = [];
    var firstIsOperator = false;
    exp.replace(/\s/g,'');
    if(isOperator(exp[0])){
        exp = exp.substring(1);
        firstIsOperator = true;
    }
    for(var i = 0, max = exp.length; i < max; i++) {
        if(!isOperator(exp[i]) && !isOperator(exp[i-1]) && (i != 0)) {
            inputStack[inputStack.length-1] = inputStack[inputStack.length-1] + exp[i] + '';
        } else {
            inputStack.push(exp[i]);
        }
    }
    if(firstIsOperator) {
        inputStack[0] = -inputStack[0] 
    }
    while(inputStack.length > 0) {
        var cur = inputStack.shift();
        if(isOperator(cur)) {
            if (cur == '(') {
                outputStack.push(cur);
            } else if (cur == ')') {
                var po = outputStack.pop();
                while(po != '(' && outputStack.length > 0) {
                    outputQueue.push(po);
                    po = outputStack.pop();
                }
            } else {
                while(priority(cur,outputStack[outputStack.length - 1]) && outputStack.length > 0) {
                    outputQueue.push(outputStack.pop());
                }
                outputStack.push(cur)
            }
        } else {
            outputQueue.push(Number(cur));
        }
    }
    if(outputStack.length > 0){
        while (outputStack.length > 0) {
            outputQueue.push(outputStack.pop());
        }
    }
    return outputQueue;
}

function calRpnExp(rpnArr) {
    var stack = [];
    for(var i = 0, max = rpnArr.length; i < max; i++) {
        if(!isOperator(rpnArr[i])) {
            stack.push(rpnArr[i]);
        } else {
            var num1 = stack.pop();
            var num2 = stack.pop();
            if(rpnArr[i] == '-') {
                var num = num2 - num1;
            } else if(rpnArr[i] == '+') {
                var num = num2 + num1;
            } else if(rpnArr[i] == '*' || rpnArr[i] == '×') {
                var num = num2 * num1;
            } else if(rpnArr[i] == '/' || rpnArr[i] == '÷') {
                var num = num2/num1;
            }
            stack.push(num);
        }
    }
    return stack[0];
}

function calCommonExp(exp) {
    var rpnArr = outputRpn(exp);
    return calRpnExp(rpnArr)
}

module.exports = {
    calCommonExp: calCommonExp
}

完整源代码

https://gitee.com/hspbc/mini-calculator

如何赚钱

一般可以添加广告,通过广告分成,这也是当前大多数独立开发者盈利方式。

关于我

厦门大学计算机专业|华为八年高级工程师
十年软件开发经验,5年编程培训教学经验
目前从事编程教学,软件开发指导,软件类毕业设计指导。
所有编程资料及开源项目见https://juejin.cn/post/7002792005688360968

相关文章

网友评论

    本文标题:从零做一个小程序(计算器)赚钱

    本文链接:https://www.haomeiwen.com/subject/jcpoiltx.html