微信小程序 之 初体验（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下载   《--