微信小程序云开发入门实战小案例-天气闹钟

一、前言

最近越来越多的小伙伴加入了微信小程序云开发的阵营。为了让同学们能够快速入门云开发,特意推出了这篇实战博客。希望能够给同学们带来帮助,一起遨游在云开发的乐趣里,成为一个全栈(干)程序员。

二、项目介绍

看标题就知道这篇博客是做一个天气定时提醒的小程序。具体实现的需求很简单:

  1. 查询广州市的天气信息。作为入门的案例,我这里只做指定的城市。对于自动定位,获取不同城市的天气信息,作为挑战交同学们自己去实现。欢迎在评论区分享你的战绩或问题。
  2. 每天早上8点钟,通过小程序订阅通知发送天气信息给用户。 对于根据用户指定的提醒时间发送通知的功能也作为挑战交同学们自己去实现。

三、前期准备

1、基础准备

注册小程序账号、开通云开发环境这些很基础的东西就不说了,肯定是要的,自行去搞定就好。

2、添加天气类目以及订阅消息模板

登录小程序公众平台
需求里要实现发送模版消息给用户,因此我们需要去找一个订阅消息的模板。步骤如下:

第一步:添加天气类目

在这里插入图片描述
在这里插入图片描述

第二步:选择模板

点击订阅消息。
在这里插入图片描述
点击选用模版。(没有开通的,直接点击开通就行。)
在这里插入图片描述
搜索模板,关键词为天气。(注意:如果小程序类目没有工具-天气的话,搜索不到这个模板的。)
在这里插入图片描述
选择要使用的参数:
在这里插入图片描述
选用成功的示例
在这里插入图片描述

3、注册和风天气账号

需要查询天气,那么就需要找一些第三方的天气查询API。有很多免费的,大家搜索天气API就可以了,基本都有免费版可以使用。
我这里使用的是和风天气的API,同学们可以去注册一个,按步骤注册就好没有什么难度。
直达链接:和风天气

第一步:注册

在这里插入图片描述

第二步:创建应用

注册完后直接进入控制台,点击应用管理。
在这里插入图片描述
创建一个免费的开发版应用。大家跟着图来操作就好。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
需要注意的是,免费用户只能创建一个应用,所以代码中我就用已经注册好的就行了。
创建成功后应该是下面这样:
在这里插入图片描述

四、代码实现

做完准备工作后,创建好一个小程序,就可以开始敲代码啦。

1、获取天气数据

创建一个云函数查询天气信息。主要代码如下:

index.js

const cloud = require('wx-server-sdk')
const request = require('request')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const key = "填入和风天气的key" // key
const location = "113.30,22.80" // 请求的坐标点(经纬度)
const url = "https://devapi.qweather.com/v7/weather/3d" // 请求网址

const db = cloud.database()

/**
 * 获取天气数据信息
 */
exports.main = async () => {
  const result = await requestFun(url, {location, key})
  const daily = result.daily
  const addData = daily[0]
  addData.createTime = new Date().getTime()
  addWeatherData(addData)
  return result
}

/** 将数据插入数据库 */
const addWeatherData = async (addData)=>{
  return await db.collection("weaterConfig").add({data: addData})
}

/**
 * 发起网络请求
 * @param {object} paramObj 请求的参数对象
 */
const requestFun = (url, paramObj) => {
  // 请求数据
  const opt = {
    timeout: 5000, // 设置超时
    method: 'GET', //请求方式
    url: url,
    gzip: true,
    json: true,
    qs: paramObj
  }
  // 发起请求
  return new Promise((resolve, reject) => {
    request(opt, (error, response, body) => {
      resolve(body)
    })
  })
}

2、剩余代码

没有剩余代码了。哈哈哈。摆烂了。
获取到天气信息后,可以存入数据库供小程序获取,也可以小程序端直接请求获取天气的云函数来获取天气信息。
剩余的,我代码不想写了。因为在酝酿其他大阴谋。所以同学们自由发挥吧,有不懂的可以在评论区留言。

五、结语

分享的是思维不是技术。所以很多地方写得并不是很严谨,仅仅是把逻辑跑了一遍。(大佬们手下留情,谢谢)

实际开发中的其他逻辑就不写了,这里只是最简单的实现。

有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。
👍赞一个!!!
🤩当然,顺带收藏就最好了。
😎欢迎转载,原创不易,转载请注明出处✍。

😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。

  • 9
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
微信小程序Demo-闹钟应用-附完整源代码.rar 资源介绍 本资源是一个基于微信小程序开发闹钟应用示例,包含了完整的源代码,方便用户进行二次开发和定制。该闹钟应用具有简洁的界面设计和实用的功能,可以满足用户的日常需求。 一、功能特点: 1. 闹钟设置:用户可以自由设置多个闹钟,包括闹钟时间、重复周期(如每天、每周等)以及闹钟铃声。 2. 闹钟提醒:当闹钟时间到达时,应用会发出声音和振动提醒,确保用户不会错过重要事项。 3. 闹钟编辑与删除:用户可以随时查看、编辑或删除已设置的闹钟。 4. 闹钟状态显示:应用会在主界面展示当前已设置的闹钟列表,以及每个闹钟的状态(开启/关闭)。 5. 天气信息:应用集成了天气查询功能,用户可以在闹钟设置界面查看实时天气信息,方便规划出行。 二、技术实现: 1. 使用微信小程序原生框架进行开发,兼容性强,易于维护。 2. 采用云开发模式,简化了服务器端的搭建和部署过程。 3. 闹钟提醒功能采用微信小程序的本地推送(wx.setStorageSync)和定时器(setTimeout)实现。 4. 天气信息通过调用第三方API获取,保证了数据的实时性和准确性。 三、二次开发与定制: 1. 本资源提供了完整的源代码,用户可以根据自己的需求进行修改和扩展。 2. 用户可以自定义闹钟应用的界面风格、功能模块等,打造个性化的闹钟应用。 3. 源代码结构清晰,注释详细,便于用户理解和修改。 总之,本资源提供了一个功能完善、易于定制的微信小程序闹钟应用示例,适合广大开发者学习和参考。通过二次开发和定制,您可以轻松打造出属于自己的独特闹钟应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

super--Yang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值