使用微信小程序开发制作一个简易的闹钟提醒应用

以下是一个简单的微信小程序闹钟提醒应用的代码案例，共包含两个页面：主页面和设置页面。

主页面显示当前时间和已设置的闹钟时间，同时可以设置新的闹钟时间。当闹钟时间到达时，会触发提醒。

设置页面可以修改已设置的闹钟时间。

目录结构如下：

- pages
  - index
    - index.js
    - index.wxml
    - index.wxss
  - settings
    - settings.js
    - settings.wxml
    - settings.wxss
  - app.js
  - app.json

app.js：

App({
  onLaunch: function () {
    // 监听闹钟提醒
    wx.onPhoneContactChange((res) => {
      if (res.action === 'add') {
        wx.showModal({
          title: '闹钟提醒',
          content: '时间到了！',
          showCancel: false
        });
      }
    });
  }
});

index.js：

Page({
  data: {
    currentTime: '',
    alarmTime: ''
  },

  onLoad: function () {
    // 更新当前时间
    this.updateTime();

    // 获取已设置的闹钟时间
    this.getAlarmTime();
  },

  updateTime: function () {
    setInterval(() => {
      const currentTime = new Date().toLocaleTimeString();
      this.setData({
        currentTime: currentTime
      });
    }, 1000);
  },

  getAlarmTime: function () {
    const alarmTime = wx.getStorageSync('alarmTime');
    if (alarmTime) {
      this.setData({
        alarmTime: alarmTime
      });
    }
  },

  setAlarmTime: function () {
    wx.navigateTo({
      url: '/pages/settings/settings'
    });
  }
});

index.wxml：

<view class="container">
  <view class="time">{{currentTime}}</view>
  <view class="alarm">
    <text>闹钟时间：{{alarmTime}}</text>
  </view>
  <view class="set-alarm">
    <button bindtap="setAlarmTime">设置闹钟</button>
  </view>
</view>

index.wxss：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.time {
  font-size: 28px;
  margin-bottom: 10px;
}

.alarm {
  font-size: 18px;
  margin-bottom: 20px;
}

.set-alarm {
  display: flex;
  justify-content: center;
}

button {
  width: 200px;
  height: 40px;
  background-color: #009688;
  color: #ffffff;
  border-radius: 3px;
  border: none;
}

settings.js：

Page({
  data: {
    alarmTime: ''
  },

  onLoad: function () {
    // 获取已设置的闹钟时间
    this.getAlarmTime();
  },

  getAlarmTime: function () {
    const alarmTime = wx.getStorageSync('alarmTime');
    if (alarmTime) {
      this.setData({
        alarmTime: alarmTime
      });
    }
  },

  bindTimeChange: function (e) {
    const alarmTime = e.detail.value;
    this.setData({
      alarmTime: alarmTime
    });
  },

  saveAlarmTime: function () {
    const alarmTime = this.data.alarmTime;
    if (alarmTime) {
      wx.setStorageSync('alarmTime', alarmTime);
    } else {
      wx.removeStorageSync('alarmTime');
    }

    wx.navigateBack();
  }
});

settings.wxml：

<view class="container">
  <form>
    <view class="form-item">
      <label for="alarm-time">闹钟时间：</label>
      <picker mode="time" value="{{alarmTime}}" bindchange="bindTimeChange">
        <input id="alarm-time" disabled placeholder="请选择时间" value="{{alarmTime}}">
      </picker>
    </view>
  </form>
  <view class="save">
    <button bindtap="saveAlarmTime">保存</button>
  </view>
</view>

settings.wxss：

.container {
  padding: 20px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

label {
  font-size: 16px;
  margin-right: 10px;
}

input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.save {
  display: flex;
  justify-content: center;
}

button {
  width: 200px;
  height: 40px;
  background-color: #009688;
  color: #ffffff;
  border-radius: 3px;
  border: none;
}

以上是一个简单的微信小程序闹钟提醒应用的代码案例。主页面显示当前时间和已设置的闹钟时间，用户可以点击设置按钮进入设置页面修改闹钟时间。当闹钟时间到达时，会触发提醒。