这是一个小程序新手练习的项目(基于微信quick demo改写),做了一个计算器。有基本的UI,有基本的跳转及简单的js逻辑,很适合初学者阅读。
读别人的代码,就是归整自己的编程技能。
涉及微信小程序开发相关知识:
1、CSS Flexbox布局
2、事件绑定、页面跳转
3、Page、window、App全局设置
4、wxml、wxsss、js、json文件使用方法
5、view、text、icon、button组件使用方法
6、navigate、wx.setStorageSync、数据绑定等API
Setup
1、Clone the repo
$ git clone https://github.com/dunizb/wxapp-sCalc.git
2、Import to Wechat DEV Tools
把项目导入到微信开发者工具中即可
编者注:源码中有两点值得注意——
1,作者并没有给每一个计算器按钮绑定一个事件函数,统一绑定于blickBtn这一个函数,而通过id与e.target.id来分别用户点击的是哪一个按钮,并且作者直接用了计算按钮的屏显数字做了id,简单直接
2,单击按钮时有一个红色的高亮效果,该效果是通过css实现的:
.item:active {
background-color: #ff0000;
}
一行简单的代码,就使UE体验上升了不少。值得学习~
另外,再分享一个小程序游戏,虽说微信官方禁止小游戏上架,但是谁又能阻止学习者的脚步呢。微信小程序文档中那些绘图API与动画API,可能也是为将来做游戏准备的。
https://github.com/natee/wxapp-2048
这个一个2048游戏,如果喜欢计算器风格的demo,这个可能你也会喜欢。
---
我在知乎开了一个live,4月22日晚(周六)8点半我在知乎与大家见面:
【0基础周末学习小程序开发】
https://www.zhihu.com/lives/832919740296101888
在【哲学李论】公众号回复"0基础周末学习小程序开发",可以免费领券,限量500名。
在微信公众号哲学李论,回复“小程序入门集锦”可以看到这个系列的所有文章。
如果觉得本文还行,请转发给朋友。
好文章与15W艺友分享,欢迎推荐文章:[email protected]。