首发于公众号《前端全栈开发者》,第一时间阅读最新文章,这两天会优先发布新文章。关注后私信回复:大礼包,免费送某网优质视频课程网盘素材,绝对让你省钱!在本文中,我们将安装Deno运行时并创建一个命令行天气程序,它将城市名称作为参数并返回接下来24小时的天气预报。要为Deno编写代码,我强烈建议使用带有官方Deno插件的VisualStudioCode。为了让事情更有趣,我们将使用TypeScript来编写应用程序。安装Deno首先,让我们在本地安装Deno,这样我们就可以开始编写脚本了。这个过程很简单,因为所有三个主要操作系统都有安装脚本。Windows在Windows上,您可以从PowerShell安装Deno:iwrhttps://deno.land/x/install/install.ps1-useb|iexLinux在Linux终端上,您可以使用以下命令:curl-fsSLhttps://deno.land/x/install/install.sh|shmacOS在Mac上,你可以安装Brew和Deno:brewinstalldeno安装过程完成后,你可以通过运行以下命令来检查Deno是否正确安装。deno--version你现在应该看到类似的东西:deno1.2.0v88.5.216typescript3.9.2让我们为我们的新项目创建一个文件夹(在你的主文件夹中,或者你想保存代码项目的任何地方)并添加一个索引.ts文件。mkdirweather-appcdweather-appcodeindex.ts注意:正如我上面提到的,我在本教程中使用VSCode。如果您使用不同的编辑器,请替换上面的最后一行。获取用户输入我们的程序将检索给定城市的天气预报,因此我们需要在运行程序时接受城市名称作为参数。提供给Deno脚本的参数以Deno.args的形式存在。让我们将这个变量记录到控制台,看看它是如何工作的。控制台日志(Deno.args);现在,运行脚本:denorunindex.ts--cityHangzhou你应该看到以下输出:["--ci??ty","Hangzhou"]虽然我们可以自己解析这个参数数组,但Deno的标准库包含一个模块称为标志,它将为我们处理这个问题。要使用它,我们所要做的就是在文件顶部添加一个import语句:import{parse}from"https://deno.land/std@0.61.0/flags/mod.ts";注意:标准库模块的文档中的示例将为您提供一个未版本化的URL,例如https://deno.land/std/flags/m...,它将始终指向最新版本的代码。在您的导入中指定一个版本是确保您的程序不会被未来更新破坏的好习惯。让我们使用导入的函数将参数数组解析为更有用的东西:constargs=parse(Deno.args);我们还将修改脚本以打印新的args变量以查看其外观。所以现在你的代码应该是这样的:import{parse}from"https://deno.land/std@0.61.0/flags/mod.ts";constargs=parse(Deno.args);控制台日志(参数);现在,如果您使用与之前相同的参数运行脚本,您应该会看到以下输出:下载https://deno.land/std@0.61.0/flags/mod.tsDownloadhttps://deno.land/std@0.61.0/_util/assert.tsCheckfile:///home/njacques/code/weather-app/index.ts{_:[],city:"Hangzhou"}每当Deno运行脚本时,它都会检查新的导入语句。任何远程托管的导入都将被下载、编译和缓存以供将来使用。parse函数给了我们一个对象,这个对象有一个包含我们输入的city属性。注意:如果出于任何原因您需要重新加载脚本的导入,您可以运行denocache--reloadindex.ts。我们还应该添加对city参数的检查,如果没有提供city参数,则退出程序并显示错误消息。if(args.city===undefined){console.error("没有提供城市");Deno.exit();}使用Wea??therAPI,我们将从tianqiapi.com获取预报数据。您需要注册一个免费帐户才能获得API密钥。我们将使用他们专业的7天天气界面,将城市名称作为参数传递。让我们添加一些代码来获取天气预报并将其打印到控制台以查看我们得到了什么:import{parse}from"https://deno.land/std@0.61.0/flags/mod.ts";constargs=parse(Deno.args);if(args.city===undefined){console.error("没有提供城市");Deno.exit();}constappid='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';constappsecret='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';constres=awaitfetch(`https://yiketianqi.com/api?version=v9&appid=${appid}&appsecret=${appsecret}`);constdata=awaitres.json();console.log(数据);Deno试图支持尽可能多的浏览器API,因此在这里我们可以使用fetch而无需导入任何外部依赖项。我们还利用了对await的支持:通常,我们必须将所有使用await的代码包装在异步函数中,但TypeScript不允许我们这样做,这使得代码更好。如果你现在尝试运行这个脚本,你会遇到错误信息:Compilefile:///Users/zhangbing/github/CodeTest/Deno/weather-app/index.tserror:UncaughtPermissionDenied:networkaccessto"https://yiketianqi.com/api?version=v9&appid=xxxxxxxx&appsecret=xxxxxxx",在unwrapResponse($deno$/ops/dispatch_json.ts:43:11)atObject.sendAsync($deno)中使用--allow-net标志再次运行$/ops/dispatch_json.ts:98:10)在异步获取($deno$/web/fetch.ts:296:27)在异步文件:///Users/zhangbing/github/CodeTest/Deno/weather-app/index.ts:13:13默认情况下,所有Deno脚本都在安全沙箱中运行:它们无法访问网络、文件系统或环境变量之类的东西。需要明确授予脚本对它们需要访问的系统资源的权限。在这种情况下,错误消息将帮助我们了解需要什么权限以及如何启用它。让我们使用正确的标志再次调用脚本:denorun--allow-netindex.ts--cityHangzhou这一次,我们应该从API返回一个JSON响应:{cityid:"101210101",city:"Hangzhou",cityEn:"杭州",country:"中国",countryEn:"中国",update_time:"2020-08-1316:51:27",data:[{day:"13日(星期四)",date:"2020-08-13",week:"星期四",wea:"阴天",wea_img:"云",wea_day:"阴天",wea_day_img:"云",wea_night:"阴天",wea_night_img:"云",tem:“37”,tem1:“38”,tem2:“28”,湿度:“40%”,能见度:“不可用”,压力:“1002”,win:[“西南风”,“无持续风”direction"],win_speed:"4-5to<3",win_meter:"lessthan12km/h",sunrise:"05:24",sunset:"18:43",air:"35",air_level:"Excellent",air_tips:"空气很好,可以出去活动,呼吸新鲜空气,拥抱大自然!",alarm:{alarm_type:"高温",alarm_level:"橙色",alarm_content:"杭州气象天文台2020年8月13日9时05分,发布高温橙色预警信号:受副热带高压控制,预计今日主城区和钱塘新区最高气温达38℃左右.请注意防暑降温。(预警信息来源:国家预警信息发布中心)》},时间:[[对象],[对象],[对象],[对象],[对象],[对象],[对象],[对象]],[对象],[对象],[对象],[对象],[对象],[对象],[对象],[对象]],索引:[[对象],[对象],[对象],[Object],[Object],[Object]]},......]}返回字段的含义可以参考API文档,data数组为每日数据列表,1-7天,一共7组。每个对象包含Weatherwarning(警报)、每小时预报(hours)、lifeindex(指数)、空气质量指数(aqi)数据。为了简单起见,我们只取几个简单的数据:date、weather、实时温度空气和空气质量等级四种数据,为此需要遍历数组:constforecast=data.data.map((item)=>[item.day,//dateitem.wea,//weatheritem.tem,//实时温度item.air_level,//空气质量水平]);如果我们现在尝试运行脚本,我们会得到一个编译错误(如果你使用像VSCode这样的IDE,你也会键入代码时出现此错误):参数“item”隐式具有“any”类型。TypeScript要求我们告诉它项目是什么类型的变量,以便知道我们是否对它做了任何可能导致运行时错误的事情。让我们添加一个接口来描述项目的结构:interfaceforecastItem{day:string;wea:字符串;项目:字符串;air_level:string;}让我们为地图回调添加一个新类型:constforecast=data.data。map((item:forecastItem)=>[item.day,//日期item.wea,//天气item.tem,//实时温度item.air_level,//空气质量等级]);如果您的IDE支持TypeScript,由于我们提供的接口类型,它应该能够在您键入时自动完成项目的类型。现在运行结果的输入如下:forecast[["13日(星期四)","多云转晴","36","极好"],["14日(星期五)","晴天","37"",""],["15日(周六)","晴","37日",""],["16日(周日)","多云转晴","37日",""],["17日(星期一),"Sunny","37日",""],["18日(星期二)","Sunny","37日",""],["19日(星期三)","晴","38",""]]格式化输出现在我们有了所需的数据集,让我们看看如何格式化它以显示给用户。让我们使用ascii_table模块将其显示在一个整洁的小表格中:args.city}7天天气预报`,heading:['date','weather','real-timetemperature','wind','airquality','weatherwarning'],rows:forecast})console.log(table.toString())保存并运行脚本,现在我们应该对选定的城市进行格式化并给出未来7天的预测:完整代码清单这是一个紧凑的脚本,但这里是完整的代码清单是也可以在我们的Github上找到。从“https://deno.land/std@0.61.0/flags/mod.ts”导入{解析};从“https://deno.land/x/ascii_table/mod.ts”导入AsciiTable;constargs=parse(Deno.args);if(args.city===undefined){console.error("没有提供城市");Deno.exit();}//你自己的APIkeyconstappid="xxxxxxxx";constapiKey="xxxxxxxxx";constres=awaitfetch(`https://yiketianqi.com/api?version=v9&appid=${appid}&appsecret=${apiKey}`,);constdata=awaitres.json();interfaceforecastItem{day:string;wea:字符串;项目:字符串;air_level:string;}constforecast=data.data.map((item:forecastItem)=>[item.day,//日期item.wea,//天气item.tem,//实时温度item.air_level,//空气质量等级]);consttable=AsciiTable.fromJSON({title:`${args.city}7天天气预报`,heading:["date","weather","temperature","airquality"],行:预测,});console.log(table.toString());总结现在您的Deno命令正在运行该程序将为您提供未来7天的天气预报。通过本教程,您现在应该熟悉如何启动新程序、从标准库和第三方导入依赖项以及为脚本授予权限。那么,在尝到了Deno编程的甜头之后,下一步应该去哪里呢?你觉得德诺怎么样?推荐阅读EmailJS:5步使用JavaScript直接从前端发送邮件如何使用JavaScript访问设备前后摄像头这9种速率无关变量背景的Vue技术你掌握了吗?信不信由你,2020年12个Vue.js开发技巧和窍门你都知道Vue.js中编写更好的v-for循环的6个技巧实战:使用ReactHook一步一步创建一个可排序的表格组件|HTML页面生成工具:使用JavaScript和Node创建CLI实战|用JavaScript从零开始制作属于你自己的命令行(CLI工具)【实战】这个炫酷的播放粒子效果你也能学会!使用WebAnimationsAPI制作
