微信小程序,学习笔记(三)微信小计算器
新年快乐,开工咯~~!!
2017年,新年上班第一天,大家都忙着串领导办公室领红包,我这人比较懒,就工位旁边领导领了个,闲着无聊,来写这新年第一遍博客,程序其实是去年回家前搞定的,今天算是给补上这篇记录(表情:害羞~~)!
祝大家新年好,新年快乐,新年升职加薪~ ~ !
微信小计算器
前言:这个计算器承接该文章中的计算器的继续和延伸,同时将其做了稍微调整移植到了微信上,经测试微信运行正常。
主要修改点:
- 去掉原先的
DOM
相关的操作部分,修改成,直接修改数据去刷新视图; - 由于该计算器是通过对象形式,构造器方式封装和创建的,但是没有
DOM
情况下需要去改变视图,则需要将该对象与小程序功能相关联起来,采取方式是:通过构造器参数,将Page
对象传给Calculator
来实现数据绑定和修改; 模块化处理:这个简单,直接将获取计算器对象实例的函数导出即可;
module.exports = { getInstance: getInstance };
getInstance
属于单例实现方式,实现原理这里采用的是直接使用全局变量方式,这种方式算是最简捷的(偷了下懒 ~~)字体的处理,因为原先用的是外部字体
DigifaceWide
原来情况直接使用@font-face
简单就能搞定,这里折腾了下,经过baidu + google
也简单完成了,主要实现原理也简单:- 将目标字体文件拷贝出来,放到 https://transfonter.org/ 这个链接去处理下就行;
- 然后把生成的文件
stylesheet.css
里的代码拷贝出来放到index.wxss
中的@font-face
体中,就可以在样式中直接使用该字体了,后面在使用awesome
图标的时候也通过这种方式实现了,还不错!!
最后需要处理的就是布局的转换了,由于开始对
view
的特性还不能完全熟悉,导致纠结了挺久,总是每个按钮成了单独一行,通过浮动,绝对定位都没能解决,因为一开始按键直接用view
去处理了,最后换成<button>
然后通过浮动按键元素解决,最后行的浮动,直接使用overflow: auto;
解决,并没采用之前方式:clearfix
,发现用溢出处理更快更好用,深层原理还没深入去了解(不能做拿来主义,不可以,不能,要加紧获取知识步伐,↖(^ω^)↗)。
主要部分实现代码:
效果图
工具上:
微信上:
视图部分
一开始计划用模版去实现,后面发现用模版可能更麻烦点,中间有些地方还是要单独处理,并且涉及到数据更新问题,因此还是决定直接这种排版方式来写控件部分。
// 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>
控制部分代码
控制部分主要就
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)} })
最后就是
Calculator.js
里的核心控制逻辑代码了,这个在这就不赘述了,前面的文章有更详细的设计和说明;
总结:
总的来说,微信小程序算是有了个大概的了解,至少稍微有点了解是个什么东西了,怎么开始着手去开发,针对这个计算器也算是个练手,加前期的改进和功能添加,至于小程序其他的东西,学习起来也就没那么困难了(最近小程序有点冷淡了啊,自己也试用了一些,感觉一开始进入方式就不是很方便,比较针对心中有特定目标,或者有特定关键字的使用群体,毕竟需要通过搜索才能找到自己心仪的应用,希望以后能改进 ~~ 学习步伐还是不能停止~~~)
最后祝所有努力,所有奋斗在人生旅途的人新年快乐,恭喜发财,步步高升!!
微信小程序,学习笔记(三)微信小计算器相关推荐
- 微信小程序学习笔记(三)视图与逻辑
文章目录 1. 页面导航 1.1 什么是页面导航 1.2 声明式导航 1.2.1 导航到 tabBar 页面 1.2.2 导航到非 tabBar 页面 1.2.3 后退导航 1.3 编程式导航 1.3 ...
- 微信小程序学习笔记2——一些小程序列表
[高频使用] 美团外卖 滴滴公交查询 车来了 大众点评+ 京东购物 摩拜单车 滴滴出行DiDi 携程酒店机票火车票 [旅行] 驴妈妈门票预订 飞常准查航班 海南航空微应用 南航e行 去哪儿出行 朋友家 ...
- 微信小程序学习笔记(三)——两名片小程序实例
文章目录 项目一 项目结构 title index.wxml index.wxss 最终效果 项目二 项目结构 title index.wxml index.wxss 最终效果 项目地址 最后 项目一 ...
- 小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发
一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
- 微信小程序学习笔记(1)
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...
- 微信小程序学习(三):在微信开发者工具中,使用WeUI前端美化框架,微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用 网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
- 微信小程序学习笔记一 + 小程序介绍 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记 自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明 自己的微信小程序学习笔记[2]--从零开始新建项目 文章目录 其他微信小程序的学习笔记 前言 一.Lin ...
- 微信小程序学习笔记(七)----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
- 小程序学习笔记(1)
小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到 组件是具有一定的功能的代码的集合 移动端适配: 物理像素:是图 ...
最新文章
- Java是“按引用传递”还是“按值传递”?
- STM32F10x_StdPeriph_Lib_V3.5.0库时钟分析及如何配置
- nginx启动报错:Job for nginx.service failed. See 'systemctl status nginx.service' and 'journalctl -xn' fo
- 河南省第七届省赛 问题 F: Turing equation 水题
- 风控建模 python 知乎_风控建模基本要求及面试问题小结
- 重大革新!Dubbo 3.0来了
- jboss与nginx_JBoss BRMS与JasperReports进行报告
- 【Fedora20】 samba配置
- [html] 你知道什么是粘性布局吗?
- 【2014-11-23】《The Hardware/Software Interface》– Section 11
- SpringBoot和缓存
- 前锋php人工智能_人工智能除了学习php,还应该学什么?
- snmp trap 如何在浏览器中_SNMP Trap的功能介绍
- 万分之二用百分之怎么表示_怎么腐熟猪粪做有机肥
- java bs和cs_BS与CS的区别和联系
- STM32—TIMx输出PWM信号驱动MG996R舵机
- 211西北大学,成立国家超级计算西北大学分中心!
- 基于SLAM融合构图的自主轮式仓储货运机器人技术说明
- Photoshop菜单_中英文对照
- 电商如何利用API接口获取商品信息数据