微信小程序(持续更新中)

最新推荐文章于 2024-10-10 11:06:13 发布

千面狐～

最新推荐文章于 2024-10-10 11:06:13 发布

阅读量637

点赞数

文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/hutongkoudemihu/article/details/126799051

版权

这篇博客介绍了如何在微信小程序中创建一个简单的比较大小的功能。通过WXML和WXSS构建用户界面，JS逻辑处理输入和比较操作，展示了小程序的基础组件如view, text, input, button的使用，以及bindinput和bindtap事件处理。此外，还讲解了JSON配置文件的作用和小程序代码的构成。适合初学者了解小程序开发流程。

摘要由CSDN通过智能技术生成

Day01

1.比较大小(案例)

<view class="container">
  <view>
    <text>请输入第一个数：</text>
    <input bindinput="getValue1" type="text"/>
  </view>
  <view>
    <text>请输入第二个数：</text>
    <input bindinput="getValue2" type="text"/>
  </view>
  <view>
    <button bindtap="compare">比较大小</button>
  </view>
  <view class="result">
    结果：{{motto}}
  </view>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: '',
    v1:0,
    v2:0,
  },
  getValue1(e){
    let v1 = e.detail.value;
    this.v1 = v1;
  },
  getValue2(e){
    let v2 = e.detail.value;
    this.v2 = v2;
  },
  compare(){
    if(this.v1<this.v2){
      this.setData({
        motto:'第二个数大'
      })
    }
  }
})

.container{
  width: 80%;
  margin: 3vh auto;
}
input{
  margin: 2vh 0;
  width: 250px;
  height: 30px;
  border: 1px solid rgb(136, 135, 135);
}
button{
  background-color: cornflowerblue;
}
.result{
  color: red;
  font-size: 20px;
}

注意：在App.json中修改标题