微信小程序---简易计算器

最新推荐文章于 2025-06-21 09:06:11 发布

qq_40196661

最新推荐文章于 2025-06-21 09:06:11 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_40196661/article/details/84940913

本文介绍了如何使用微信小程序开发一款简易计算器。内容包括界面布局的wxml代码，样式渲染的wxss代码，以及实现计算功能的JS代码，并附带实际运行效果的截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面布局
在这里插入图片描述

布局代码(wxml)

<!--pages/cal/cal.wxml-->
<view class='container'>
  <view class='screen'>{
  
  {first}}</view>
  <view class='screen'>{
  
  {op}}</view>
  <view class='screen'>{
  
  {second}}</view>
  <view class='screen'>{
  
  {last}}</view>
  <view class='screen'>{
  
  {sum}}</view>
    <view class='basic ac' id='AC' bindtap='click'>{
  
  {AC}}</view>
    <block wx:for="{
  
  {ids}}">
      <view class='basic color' id='{
  
  {item}}' bindtap='click'>{
  
  {item}}</view>
    </block>
    <view class='equ color' id='=' bindtap='click'>{
  
  {equ}}</view>
</view>

渲染代码（wxss）