微信小程序 之 初体验（24点游戏）

根据网上的教程，申请了小程序开发，试着玩玩哈。

申请教程： http://www.ym360.cn/4049587.html
主要熟悉了一下小程序开发，熟悉了下各个组件

主要写了个九九乘法表、和24点计算


demo下载 《--

界面

{
"pages": [
"page/index/index",
"page/poker/poker"
],
"window": {
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#787878",
"navigationBarTitleText": "嘀嘀打仁",
"navigationBarTextStyle":"white"
},
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#787878",
"list": [{
"pagePath": "page/index/index",
"text": "首页",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
}
,{
"pagePath": "page/poker/poker",
"text": "24点",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
}]
}
}

注意点：

1.引用js

1.1在工具js的中加

module.exports = {

calCommonExp: calCommonExp

}

calCommonExp 是对应的方法

1.2 引用的js中

var rpn = require('../../util/rpn.js');//引用js, 运行表达式js 代替eval

1.3使用

ret = rpn.calCommonExp(_exp);//计算表达式

2.在小程序中不能使用 eval 在网上找到 用rpn.js代替，具体其中代码没有细看哈

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

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

function prioraty(v1, v2) {
return getPrioraty(v1) <= getPrioraty(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(prioraty(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
}

3. 小程序中的input框 宽度样式问题。



这4张牌是随机生成，也可以手动输入，

在写样式时，直接给input 设置width:23%; 发现整体的input是只有23%的框，但是，可输入区域也是可见区域的23%；且输入区域在最左边，不在中间。

后面改成输入框外面先套一个view ,view的宽度是23%；

4.支持水平翻转，但是在安卓机（魅蓝3）上测试有时候不行。其它机子没测试过

翻转动画js

//刷新四张扑克
function refreshPoker(that) {
//把poker牌还原到原始状态
that.setData({
pokerList:["","","",""]
})
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease',
})
animation.rotateY(-180).step({duration:0})
that.setData({
animationPoker:animation.export()
})
//重置4张牌
for (var i = 0; i < 4; i++) {
var randPoker = Math.floor(Math.random() * 13) + 1;
if (randPoker == 11) {
randPoker = "J";
} else if (randPoker == 12) {
randPoker = "Q";
} else if (randPoker == 13) {
randPoker = "K";
}
pokerArray[i] = randPoker;
}
//翻牌动画
animation.rotateY(-90).step({duration:1000});//前面90度不显示数据
that.setData({
animationPoker:animation.export()
})
//转了了90度增加数据
setTimeout(function(){
that.setData({
pokerList: pokerArray
})
},300);

//后面90度旋转
animation.rotateY(0).step({duration:1000});
that.setData({
animationPoker:animation.export()
})
}

demo下载 《--