微信小程序云开发入门实战小案例

您所在的位置:网站首页 微信小程序云开发实例 微信小程序云开发入门实战小案例

微信小程序云开发入门实战小案例

2024-07-13 09:04| 来源: 网络整理| 查看: 265

一、前言

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

二、项目介绍

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

查询广州市的天气信息。作为入门的案例,我这里只做指定的城市。对于自动定位,获取不同城市的天气信息,作为挑战交同学们自己去实现。欢迎在评论区分享你的战绩或问题。每天早上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、剩余代码

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

五、结语

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

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

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

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3