用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序实战:计算器

天下雪 2017-2-6 00:08

新年快乐,开工咯~~!!2017年,新年上班第一天,大家都忙着串领导办公室领红包,我这人比较懒,就工位旁边领导领了个,闲着无聊,来写这新年第一遍博客,程序其实是去年回家前搞定的,今天算是给补上这篇记录(表情 ...

新年快乐,开工咯~~!!

2017年,新年上班第一天,大家都忙着串领导办公室领红包,我这人比较懒,就工位旁边领导领了个,闲着无聊,来写这新年第一遍博客,程序其实是去年回家前搞定的,今天算是给补上这篇记录(表情:害羞~~)!

祝大家新年好,新年快乐,新年升职加薪~ ~ !

微信小计算器

前言:这个计算器承接该文章中的计算器的继续和延伸,同时将其做了稍微调整移植到了微信上,经测试微信运行正常。

主要修改点:
  1. 去掉原先的 DOM 相关的操作部分,修改成,直接修改数据去刷新视图;
  2. 由于该计算器是通过对象形式,构造器方式封装和创建的,但是没有DOM情况下需要去改变视图,则需要将该对象与小程序功能相关联起来,采取方式是:通过构造器参数,将 Page 对象传给 Calculator 来实现数据绑定和修改;
  3. 模块化处理:这个简单,直接将获取计算器对象实例的函数导出即可; 
    module.exports = { getInstance: getInstance };

    getInstance 属于单例实现方式,实现原理这里采用的是直接使用全局变量方式,这种方式算是最简捷的(偷了下懒 ~~)

  4. 字体的处理,因为原先用的是外部字体 DigifaceWide 原来情况直接使用 @font-face 简单就能搞定,这里折腾了下,经过 baidu + google 也简单完成了,主要实现原理也简单:

    • 将目标字体文件拷贝出来,放到 https://transfonter.org/ 这个链接去处理下就行;
    • 然后把生成的文件 stylesheet.css 里的代码拷贝出来放到 index.wxss 中的 @font-face 体中,就可以在样式中直接使用该字体了,后面在使用 awesome 图标的时候也通过这种方式实现了,还不错!!
  5. 最后需要处理的就是布局的转换了,由于开始对 view 的特性还不能完全熟悉,导致纠结了挺久,总是每个按钮成了单独一行,通过浮动,绝对定位都没能解决,因为一开始按键直接用 view 去处理了,最后换成 <button> 然后通过浮动按键元素解决,最后行的浮动,直接使用overflow: auto; 解决,并没采用之前方式:clearfix,发现用溢出处理更快更好用,深层原理还没深入去了解(不能做拿来主义,不可以,不能,要加紧获取知识步伐,↖(^ω^)↗)。

主要部分实现代码:
  1. 效果图

    工具上:

    微信上:

  2. 视图部分

    一开始计划用模版去实现,后面发现用模版可能更麻烦点,中间有些地方还是要单独处理,并且涉及到数据更新问题,因此还是决定直接这种排版方式来写控件部分。

    // index.wxml
    
    <view class="container">
     <view id="main-board">
        <view id="board-title">CALCULATOR</view>
        <view id="board-result">
            <view id="result-date">{{dateContent}}</view>
            <view id="result-up"><span>{{resultUp}}</span></view>
            <view id="result-down">{{resultDown}}</view>
        </view>
        <view id="board-keys" bindtap="bindKeyTap">
            <view id="board-line-0" class="board-row">
                <button data-text="AC" class="bg-red">AC</button>
                <button data-text="CE" class="bg-red">CE</button>
                <button data-text="÷" id="divide">÷</button>
                <button data-text="×">×</button>
            </view>
            <view class="board-row">
                <button data-text="7">7</button>
                <button data-text="8">8</button>
                <button data-text="9">9</button>
                <button data-text="-">-</button>
            </view>
            <view class="board-row">
                <button data-text="4">4</button>
                <button data-text="5">5</button>
                <button data-text="6">6</button>
                <button data-text="+">+</button>
            </view>
            <view class="board-row">
                <view class="equal-left">
                    <view>
                        <button data-text="1">1</button>
                        <button data-text="2">2</button>
                        <button data-text="3">3</button>
                    </view>
                    <view id="btn-0">
                        <button data-text="0" class="btn-0">0</button>
                        <button data-text=".">.</button>
                    </view>
                </view>
                <view class="equal-right">
                    <button data-text="=" class="btn-equal">=</button>
                </view>
            </view>
        </view>
    </view>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
  3. 控制部分代码

    控制部分主要就 onLoad 和 bindKeyTap 里面的处理,前者里面创建计算器实例,后者绑定事件处理,这里能让人感受到模块化和对象化的好处,和优雅((^__^)),只需要简单的两行代码就搞定,当然文件最开头的 require 模块的引入不能忽略,这都有赖于前面辛苦的结果,面向对象编程的益处。

    
    var calculator = require('./Calculator.js');
    
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {},
        digits: [ ['AC', 'CE', '÷'], ['7', '8', '9'], ['4', '5', '6'], ['1', '2', '3'] ],
        calculator: null,
        resultUp: '',
        resultDown: '',
        dateContent: ''
      },
    
      calculator: null,
    
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        var that = this;
    
        that.calculator = calculator.getInstance(that);
    
        console.log( that.calculator );
      },
    
      bindKeyTap: function(event) {
    
        var that = this;
    
        that.calculator.calculatorClickEvent(event)
      }
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
  4. 最后就是 Calculator.js 里的核心控制逻辑代码了,这个在这就不赘述了,前面的文章有更详细的设计和说明;

总结:

总的来说,微信小程序算是有了个大概的了解,至少稍微有点了解是个什么东西了,怎么开始着手去开发,针对这个计算器也算是个练手,加前期的改进和功能添加,至于小程序其他的东西,学习起来也就没那么困难了(最近小程序有点冷淡了啊,自己也试用了一些,感觉一开始进入方式就不是很方便,比较针对心中有特定目标,或者有特定关键字的使用群体,毕竟需要通过搜索才能找到自己心仪的应用,希望以后能改进 ~~ 学习步伐还是不能停止~~~)

最后祝所有努力,所有奋斗在人生旅途的人新年快乐,恭喜发财,步步高升!!

源码下载:WeChat.zip

鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: gccll 来自: 原文地址

相关阅读

  • Nelson_冯 2017-2-6 19:12
    感谢分享,这个字体,我要了,哈哈