目标
做个小程序(不买服务器),能够赚钱。
为什么选择小程序
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
网友评论