Android版本——天气预报制作过程

1、Android版本天气预报制作过程Android 版本（一）创建项目工程1.安装Android Studio并初始化工程Create Android Project<d0n>di 的line tide KcHlri supportHtalTarget Android DevicesSelect the Corm factor* and nnlnimum SCMCSc-nHBjrfSIMt. Law A*!mgre rfawfcrs, blrt flHtr ih API金 HwfM anriTiMfll IQ；4立明 43，侑巾Bp- tFQMig APIIflVL 7窜 BpO H

2、til tyn 的1k044Hm. 1 lhi .AMiM kiilifll!-wpwirttttairMAPi 23: Airldkold (.0 IMirBhtfHliwITVAR ?1：5>。ILolporpl-TArtdroid AutoAtndf dad ThififAft M： Anteidd 7 S fMpufUl)rwiowKAdd an Activity to MobileK Weat her Foreca st2POFd A A* Android *1% app manifestss 曹 rudmCJfrI .pku.qiyuanyuan.weatherf

3、orecast 4 cfi-&du.pku.Qiyudriyuani.edtherfo recast d pku.qiyuanyuan.weatherforecast I 罩 generated Java S res<S Gradle Scriptsan arc tPCtl2.将项目上传到github(1) 注册github账号，在github上创建一个仓库(2)进入天气预报项目，初始化git项目(3) 将项目提交到github.qqy7 IftOISlOGIB-qrvu-anvuan-TVTatilrrfDrcasI:ffiiiioomwii.11 Earrti4

4、>11 1 r .rri(二)制作项目UI界面1.制作工具栏顶部工具栏包含“选择城市”、“分隔符”、“天气名称”、“定位”、“刷 新”等控件。(1)将资源文件导入项目drawable目录下中:> 哺,Android * * 奈'卜5： 15 叩 P彳 Bi manifests' to pva. ta generated Javav)5 lres drawable ,应 ba se_a ctio n_ba r_act io n_city. pn g"k:_launch宕r_backgound.Kml 产 icjaundierjoreground.xmi (v

5、24) 意 trtle.cityHpng =trtle_share.png la tftle.update.png EB mipmap » Eh values (iz Gradle Scripts(2)在 “weatherjnfo ” 布局文件中增加一RelativeLayout 布局，之后在这个布局中依次增加城市图标、城市信息、定位图标、分享图标等。效果如下：V 0:00WeatherForecastib北京天气<12.今日天气信息制作把所需的资源文件放置到对应的资源目录中，采用嵌套布局的方式，放置一个线性布局，采用垂直方式分布，分别放置今日天气、 7日天气信息以及广告信息。

6、并指定背景图片。效果如下：（三）项目联网1 .检查网络状态创建一个工具类NetUtiil ,在其中实现getNetworkState方法, 在连接网络之前，直接调用检测网络连接状态方法。最后，增加项目访问网络状态的权限。效果如下：2 .获取网络数据为更新按钮添加单击事件，从SharedPreferences读取城市的id, 在AndroidManifest.xml文件中增加访问INTERNET的权限。效 果如下：翱北京天气 V已国力：2级3 .解析网络数据编写解析函数，解析出城市名称已经更新时间信息并在获取网 络数据后调用。将解析的效据存入T。由不亚己the网象中private static

7、TodayWeather parseXHUSt r irq xrrldata) TodayWeather todayWeather = null；int fengxigngCount = fl;int ferglJCcunt = u：int dateCcunt = 0;int hlghCcunt = Q：Int IcwCount « 0;int typeCcunt = 0;XnlPullParserFactory fac = XirlPullParserFactcry .newlnsncet); xmlPullParser xmlPullPar$er = fac.rtewPullPa

8、rsert);xm IPu TL iPa rs e r. set I n put ( pew StringReadertxmldatajint eventType = xBlRjllParsergetEvenftTypeO;Log.d tag:'"parseXML");eventType JXmlPullParser.END_P0OENTiswitch (eventlype)刘断当前事件是否为文档开始事件case XntlPuliParser.STARTJXXJUMEfUi break;/刘斯当前料是否为标筌元素开蜻事件制1对1珅“骗r.5mH匚川口*t f (Mn

9、lPtllFarser. gethiannet), equals (J>产与 p")】 todayWeathcr = new TodayWeaiher();)1口工d updateTDdayWeathiernodayWeather todayWeatherK weather_turrent_Tv.setTextftoda/Meathter.getkeAduO +> hcity_rnnie_Tw,$etTe)ct<lodayWe»ther.getCityl) * J ); cityTv.sctreKt (totf*ywe*ther*etcityt);t in

10、ieTv.utTexr(totteyMeitlKr.getUpdatetlae *;humidityTv, setText I* toddyMuthert getShidul)：prl)staTv. setText|todayWeather.g5。pnjua： ityT1. isetTerKtsdayVIeather,getQualitY( I)；rtekTvpSetTet (tQday>feather»g4t0ate() > _terr pc dt .n eTv. ietText (todyWeat her. getH igh ) + 卜，闻日泮上就卜吕仁驶近皿口】；

11、cLlrtef .,setlextitodByWeather.getTypt(), wundTv.setTeicK ,h,+ toda/WeatheretFengLLO ;if(tq0«yWe«thcr,getP*n25() !" nulLK1 nt pm2S Rodaytteather.25()；ifpv2S <- 5B)riTt'j. etlm9geResource<(irawaljle. ojz.j?Iuji." h：、a:什小r 。5月 1 ；>elie if(pfh25 = IfrOH(HTmqh 腿tins冉电视*U

12、rcB H；, id Fwab 1% 匕 r T_Ph.,T.T_Ydt帕_5L 】郎)；XLsw iftoni25 <=.mlmg. setIniageR£soijrc：E(biz_plugii _yeathf _II_250);)tlse if 4pm2& <= 20B)(I mg. setlmdgenesou rc e (d r a wable t ij j z_p lugift ja r her_151_2前】； else if o 曲)pmlmg. etlmageRe&DLJrce(R. d rawable tjz_p 1 uyithef_291

13、 了的】；4.更新今日天气数据初始化界面控件以及控件内容，在onCreate方法中调用。效果 如下：N/A（四）搜索城市功能1 .制作选择城市界面添加“选择城市”的布局文件，选择城市的Activity。为选择城市 的ImageView添加点击事件，在 AndroidManifest.xml中注册 Activity。效果如下：完善选择城市界面布局，为选择城市界面的返回按钮设置点击 事件。效果如下：返回主界面时，传递城市代码数据。修改更新按钮的单击事件处理程序，并编写onActivityResult函数用于接收返回的数据 效果如下：2 .从数据库中读取城市列表将数据库文件city.db导入asse

14、ts目录中，建立 City的Bean, 建立 MyApplication 类，创建 getInstance 方法，创建 cityDB 操 作类，创建打开数据库的方法。初始化城市信息列表，在程序 运行时读取数据库信息。效果如下：tJ-lf M: ils仆Ie: ClfriiLMdereT*lt端u.ThfenQQlNW.ilHnvtiBtlwr O/MyiFF：事*邮1 其。1心97-1# ：争7& pku.xiun. |fi awt at ht r D/MyAPPsEuedupiku. T-lt M； M1S7-53Bfi/My*PP,： lIllieiHslLfll 7-li Be；

15、3T17.S38 7M4-70/cn.Kki,p*u.riwgmisun. miwtttr O/My*PF: tlllieJH: W #7 It 聃门71M-7m/ffiBrtjirpl(u.rh4figqiwfi,siniwt*Thrr n侬*PP：叫二僚阳(IgMFT： 1。1*】中*用：戈 Mt Mi JiKSTM 7 »e4- 70JJ/c fl fl echJ |AU. IlWMlJilin, in |he r P/MyiPF; 11101；片盘 714 鸵；n：3九57a 7»M-7e33/cii.Khj>. Phu. zlwgqiJ4un. NIwiMt

16、ihcr OPP:#J-lt W!n：37.S18 1“4-啤”相>1.必Muh4mg"5'Juhnw»F*口敝MP： 11M於我：甲 】 M; Ill37.53V1«1»109#«SW-l* Mi»S37v33S 7W-7I33/CH.eAl.9«U.HW94iXW.allUMMllWr O/MAPP：事, 7-IS &9；3:l±37.53a 7W4-7033/Cfl.«ki.fritu- Zhafimiiun.C/FhrAPPst7T 1«:11£17,53

17、1 7«M-reu/cii.Mu.pfcu.llwnMbiuft. aiMlNMtMr 11fp/： mmiMsAM： T-lf M- 31:37,53d| 7194-7033/tn.MH.Cu.2h*nqn|lJiun. mIwtJtMr O/MyiPPs UQMCM：房山 #71f W: 11:3738 7M4l-7033/Cfi, rtli, pfcu, rlL»gql aufli, fin i»f it Mf UMXPP： 11011UM：褪云 9r-lt M；ilt3i7.5ja 7M4-Tt3J/C.fl.edMuptui. ZhAlliqmJ

18、1;un.aifliwetthef O/WyAFF： 1111口144«4】吴为 7-It M : Ms 17.534 7 W4-7431/c>i.phk>. ziwgqlnwkweath«r O/MyftPF: ItllllMHfl: 7 H Tl* 附？争1:工九5弱 7IQ4-7031/C-*.u.fMmgqUun.aIftiiwtttMi- O/MyW: 1111WWFI" al M：n；J7.5J9 /«047 电3 3/5rrtO.pkaTXgqLigQKH5"hrDg"叱 Him IT* 二霹落 IB ft?

19、-it m：ug*"： ii】ibm：*前口 r-l* Ml:3=1：)7334 7B4hT电)阱加上g.tHO/My*PP: MIU 11X4:富看上子 «7-lt MhMl=MF/39 TeMMm"EBdupl4%NhM9qh5.iiiniwNtihwr 0州*PP: 7-1* W；n：5F；5J9 7-m- reJJ/tfi.eou. |Au. fhwyqiiin. Wiwjttef- 口,*PF： LIltlZlMsflzt W ：7W4I-Ttdrtu,pifM. liwqiqlMun. iniwt»tIwr D/My4FF： 111101*4

20、: ISB7-l» Oft ：*九 5科 7M4I-7B33/CA,KlU pitlj,Jun. fell rfeat he r O/WyAPF： llll2fl'2M： 9013.通过ListView展示城市信息在布局文件select_city.xml中新增一个ListView组件，在java文件中定义ListView变量，并与该组件绑定，并加载 ListView 内容。将ListView内容加载为我们从数据库文件读到的城市列表。效果如图：当前堀韦：北京X'oioioioo22如呻1。翔小立11,豫片to.3、0 101 口制小比帚端正IS*.4 *01010400

21、-Xf-lttk皿.5 giom#&嘉嘉，fi1 fl*i.B叩1口1妙处北点林fc.7/<01 QI 口 TDOh*京TNo.ft加MK心关3H度*.小叩1用5<»*点 庠白to IQ IDIEJll OTO北享匕景山ho11 1 口 I的11g北里 其睥4.选中城市并将结果返回根据得到的citycode ,更新主界面天气信息。在SelectCity类中 onClick方法中新增点击返回按钮时，将 citycode传递给 MainActivity 类。在 MainActivity 的 onCreate 方法中新增如果 citycode改变过，更新天气预报的代码段

22、。效果如图：5.搜索城市select_city.xml布局中增加SearchView控件，效果如下:使用 SearchView 的 setOnQueryListener(SearchView.OnQueryTextListene门istener)方法监听搜索 框的文字变化，一有输入，则重新对搜索框内文字进行搜索， 更新adapter的数据集。搜索完毕后，使用 ArrayAdapter的 notifyDataSetChanged()方法，通知 ListView 更新数据。效果 如下：(五)定位功能1.申请百度SDK账号进入百度地图开放平台，选择开发文档中的Android定位SDK, 申请密钥，创

23、建应用，完善信息，复制 AK；下载SDK放在程 序中相应位置。 Weather /Desktop/Weather 口 .gradle O Jdea Qapp 口 build DlibsT El arm64- vfla目 liblocSDK7b.sot 口 armeabtIB NblocSDK7b.soOarmeabJ-v7a0 libloc$DK7b.soT Ex86B libloc5DK7wt EJ：x86_640 liblocSDK7b.so | BarduLflS_Androidjar2 .配置 build.gradle 文件写ENJircd型七5 *sin jniLibs srcOir

24、s * lNciepeMenEie与Iglenentmi©的 mieTr统（中】e 1Mh.,）辅用'Ltir 部壮。彳日.tur prt , f .i;ir rnr.pii1 v7 ： ?K, R 0 1testtHplemefiitaticm 'JunltynitI4.131，ModdT0*E lgleneMiit上口n ' c om, art raid. s us part, tes t: nin And roldTeiT iHipleMintatlion B com rarwlrc id, support .ten. «p r3 .添加定位权

25、限使用定位SDK,需在 Application标签中声明service组件，每个App拥有自己单独的定位 serviceservicea nd raid: names11 com .baidu. location, f11 and rold: era bled='"t rue"android:p rocess=":remote">除此之外，还需要添加如下权限:4 .配置SDK参数创建initLocation类并调用priv«tt void initLocationf HLocalicnCIifmtDplion option - n

26、ew LocationClientOptionC)：op t ion .setLocaionMode (Lcut lonC Iler tOpt Ion. Lest icn>*«>c H 阱 t_Accur«y 打"可海.ItUMa,设震也武，MKP tfttlfe.仅Mopt ion. m t<»rTy pe( "bdWll.- F17/?9, KUfcju, MMBMtttMM*inf spar - IMO;option, sc tScwiSparilD;/可送* HW* BGUEffi3ft, ift堂起定位请家的陶量大于

27、寻子10M才是有通的option.setIdNeedMkdress(trB*>/FJAl iftft*苦.地址110. MUiuioption.sctOpenGp&(true) .i . 一 J，./，文”、op t ion. HtLocatiofMltify (trm h慢况否当虫有戒可联HUS1次lt*lt出mS纪第op tion. ict IiNeedLaca t ionDei tribe (t rw)；/tan困*(于"在北京关安门附opt ion, sexisNecdLocat iofiPuiLUT H rue);/可谶.鼬认，设舌雪POI馅鼻,M)Lor*t

28、ion.g«rPaitj$rAiff? opt ion, set IflncreKillProcess t fMse ;/司i£, UiAtrue,定忖5架内能量一个Sf斤*FEE 群做到了做克谙耳,/ fftMKstqpHIHUHEBi4S, KUmRopt ioc. SeTlno reCa che£x Eeptionfifala*;/可速. Bl认Falk,"是台收藻OUSH值.RKiAMi* option.set Enab LeSlikJ LateGpi CfaU*);/可潴. KUratu,慢皆，道渡”£住姑鼻.KU1RB LM

29、1;tionCli«nt . sttiocOpTlorh(oD< lonl;mLocfltionClieni=nw LohtionCllent (getpplicat ionConleJtTf) /期 Lot 3 t lonCI jf nt 集LccAtionClient b reqisterLocationLlstefie r( ay Listener);initLout ion);5 .获取城市编码public class HyLocatiooListemer ottoda 90岫strict scationListEer (public Siring rvcity;pub

30、lic String cityCodc;Ovr rpublic void onRec e iveLoc at ion BDLpcat iqn IccationK/比处的日皿海定由功累信息类，jfl过E的合的方法比注空定位相关的全郎培果 /里下只河里都分昭地相美的烟鼻信息结黑信上a取,兑IH,SXrinQ :“ h loctXipn.gctMdr5tr();仃讦旧行!”址精扈String，* locttion. qtrCwntryO;'，衽冏上；事String fr - n p = tcatipnroetPrDYincei; rr=；tfA 量ring city = loc9TiDn-g

31、etCityt),而.；二；String ： 1 - ict = locatiai+4etDlsrictfh ->：, -.l.Striftg 1<- ,t * Location.etStreetf ；%m JL&ELoq. d(" lM«t iw.eity- .city); rKity"city. repUcef* !：LisKity* mCityLBt;MyApplitatiDH BiyApplicat ion;fflyApf)ticatiDr>= HyApplicatiGm. getlstaftce ( I;mC ii yL 1ST

32、 =«yApp licat ion、9eTCit/ListO;fer (City cityl;nCityLi&t< if (cityl.oetCivO .eqcals(rMiiy)( cityCod»=cltyl.getNLjmOcrQ;L04.dI"location _wd«-pcitytode6 .监听定位按钮private Imageview «Titl«Location;if <vicw.QctId()-A.xd.tltte.locatl«i)<SCtUpdlterogrcssO;if (B

33、locitionCliMt.lsStarted() KLoctionCllMt . stop!);>UotionaiMt.starrOifiMl HandlerHandler (乂m< v«H Mnl<Mess»9e(Me$s«9e f)(switch (sq.whatXCM« M：if (iH.obj ! aU) if (MetUtH.9ceWtvort$t«tc(MoiiiActivity.tliis) !« MetUtll.MrrMM.MOMr)(LogOttMtXL. FHMT);QucryWe«t

34、herCodc<«yUtteMr.cAtyCoee)：/ TMst.AiteTextfiteiMcriidty.Thist.L&CTHL0UC).shovf); > else (-Whether. F-llThTMit.MkeT«xt(MiinActXvity this,*# Tmsx .LfMTM.lOW). show();vyUstener.cityCotexMll; britefMlt:brMk;）；公众号版本（一）基于公众号的天气预报查询（静态数据）在域名服务器下新建public/wx/index.php 文件，代码如下：<?php/ 获得

35、参数 signature nonce token timestamp echostr $nonce = $_GET'nonce'$token= 'yuan'$timestamp = $_GET'timestamp'$echostr = $_GET'echostr'$signature = $_GET'signature'/ 形成数组，然后按字典序排序$array = array();$array = array($nonce, $timestamp, $token);sort($array);/ 拼接成字符串 ,s

36、ha1 加密 ，然后与 signature 进行校验$str = sha1( implode( $array ) );if( $str = $signature && $echostr )/ 第一次接入 weixin api 接口的时候echo $echostr;exit;/1. 获取到微信推送过来post 数据( xml 格式)$postArr = $GLOBALS'HTTP_RAW_POST_DATA'/2. 处理消息类型，并设置回复类型和内容$postObj = simplexml_load_string( $postArr );/ 判断该数据包是否是订阅

37、的事件推送if( strtolower( $postObj->MsgType) = 'event')/ 如果是关注subscribe 事件if( strtolower($postObj->Event = 'subscribe') )/回复用户消息(纯文本格式)$toUser= $postObj->FromUserName;$fromUser = $postObj->ToUserName;$time= time();$msgType = 'text'$content =欢迎关注我们的微信公众账号，此公众'$templ

38、ate = "<xml><ToUserName><!CDATA%s></ToUserName><FromUserName><!CDATA%s></FromUserName><CreateTime>%s</CreateTime><MsgType><!CDATA%s></MsgType><Content><!CDATA%s></Content></xml>"$info = sprintf(

39、$template, $toUser, $fromUser, $time, $msgType, $content);echo $info;/判断该数据包是否是文本消息if( strtolower( $postObj->MsgType) = 'text')/接受文本信息$content = $postObj->Content;if($content ='北京天气')/回复用户消息(纯文本格式)$toUser = $postObj->FromUserName;$fromUser = $postObj->ToUserName;$time=tim

40、e();$msgType = 'text'/$content ='您发送的内容是：'.$content;$content ='【北京市天气预报】2018年11月21日星期三温度：8° C湿度：47%高温：9° C低温：-3° C风力：2级风向：西南风PM2.5: 23'$template = "<xml><ToUserName><!CDATA%s></ToUserName><FromUserName><!CDATA%s></Fro

41、mUserName><CreateTime>%s</CreateTime><MsgType><!CDATA%s></MsgType><Content><!CDATA%s></Content></xml>"$info = sprintf($template, $toUser, $fromUser, $time, $msgType, $content);echo $info;运行结果如下:才）:18卡.11师，（则第（1-。283702837111的播口. 义， ¥

42、北京天气X北京市天气情报】201彝力月21日星期三,* *!-'*.& W 度度温温力向 品-'I,1后低凰风FW5： 23® ® ® ®我你在这好一不黑人qwg日志.口控IM放例ttfi 弁*夏1依行口103. M：3Q0O3fiOQ（二）获取今日信息接口1.数据库爬虫连接数据库，将宝塔数据库页面的访问权限设置为所有人，在 安全页面设置放行端口。启用的I 0 SSHWD1 |花S3设置数据库连接def cannect_db(:conn = pymysql.connectiost=k Localhost11 port=3386J.

43、user»,5ql58_87_ie5_46,(passwd=bAFtirii5SRp4K", db=' sql58_87_105_4fi', charset='utf81)#使用cu3or()方法获取操作部标 cursor - conn,cursor( =pymysql,cursors.DietCursar) return cursor, conn从数据库查找citycode并更新数据库，在服务器上执行 py文 件。detclk3psgdBi -url f » request4 u rife mum r 11Te*哲里岳更离 LiKior.

44、 ew cvinect_dtK() f 青ItaMilWHf 电 sjtyirodiccuriara.£ji£twte4 'uLict em加r_£Ade f r lns_CMfltv ) llitasdti h； ur*i4 f fttchfeii 1 f WHWIC* tmn n BHfldt C 卜 事崎弟 W dtyeadB in mcodif：tiM，d队31 £占川百,驾，常时已1史理今鼻111，<兄蜕*8次.卸狗力花 联二次匕至 iivf* 卜*Ji岫At*，)11-字舒串人;ft IB* M|l ' WMn lMLC

45、»n业 «T tolVMrjMl 、' NMC,丁 * llntt, CltVWltlE -璘疗呼修工czurwr. >exECiite sql |电耨print I>! 1 >Ag1- 1. f-rnat (cityctHcie I' «日 t ” jkede 11 fiusfti3*置生充同回I执行结果如下: md_M .ou#rJd ,EmntfjranH<+a¥. ECdK/良*: he 呆r等融maeftaITnl.ZTwte Uma.r - ttH / * * Ml imsMiQi和pQaagTE惬 R

46、S # ；j 11 M;一.一的77.静方胭糖* *>*l> * i你wm1 讨才.»ntWI iHr « "hfc- 3、w r.次.插加|?金|轴瑜fit.E Ml Q 301 QfEgHEicwqanjm-ar.WaMCTBlGnwt/zia-Htlngwtfy卸后期刘见Min . *事加胃01 GtMl 04M劭smss «- au«v¥201B-OT-2»2td£Ul/m产 emotQfiDIHWVSQfihW：tKKUt>社心 堂1 ± THHjTh W JewTE.一 V3

47、fcauM.y加137#11倒但* m V * aIQ*5»WatWIHWO-H 疽 3 KyjMW*i1*L整ww-也.描guMfjgi» MltKIM尸H *恻 1 7ointDWD710KH1TD6用 433aa,i»H- 常聿配WMV20IB-07-» 重®知« 产 现？» B01卯MM阻IB白wotfPT.RMI-降巾大野,丁哂"喻 fatrE&EEE -20135羽才再融2.用爬取的数据生成api接口在wx/model中实现通过城市名称获取 citycode ,通过citycode获取天气信息。

48、代码如下：<?php namespace appapimodel;use thinkModel;use thinkDb;class Weathers extends Model/ 通过城市 code 取得天气信息public function getWeathers($id = 1)$res =Db:name('ins_county')->where('weather_code',$id)->column('weather_i nfo');return $res;/ 通过城市名称取得城市codepublic function g

49、etCityCode($city = 1)$res =Db:name('ins_county')->where('county_name',$city)->column('weather _code');return $res;在 wx/controller 中添加对这两个功能的使用，使其成为 api 接 口。代码如下：<?phpnamespace appapicontroller;header("Content-type: text/html; charset=utf-8");use thinkContro

50、ller;class Weathers extends Controllerpublic function read()$id = input('id');$model = model('Weathers');$data = $model->getWeathers($id);$html = json_decode($data0);return json($html);/ 得到城市 idpublic function getcitycode()$id = input('name');$model = model('Weathers&#

51、39;);$data = $model->getCityCode($id);if ($data) $code = 200; else $code = 404;$data = 'code' => $code,'data' => $data;return json($data);(三)完成天气预报功能在微信处理页面添加逻辑。 先通过城市名找到对应的 citycode ， 再使用 citycode 找到天气信息。效果如下：23：09 -令加<wxid.6283702837111的接口 A2句5，令，<wxtd_628370283711ir

52、)»D. g«度吊上力向温湿高低风风庆±»上期布2019-01-13 23:1545温修：5深度：95% 高温：VC-4-C 风力：3« 风向：东北风PM25： 138霰庆市 2019-01-13 22:1549SR： 9 涅 18： 80% 高温：XTC ttS rc 风力：3ta 风向：无持慢风向 PM2.5： 120三、小程序版本（一）制作静态页面1 .注册微信小程序进入微信公众平台注册一个小程序账号,添加小程序的基本信 息，获取小程序的ApplelD。国尊也上车，而-i T-'I W 刘？ T W.，事辜旧眄“二*'也押

53、修他侬>.幽B认屯秀M*十人号北事4心伸起樱 Ifk十人嘉BfllfiB工Jt>hi&lwZjEsar2 .编写天气预报静态界面下载微信开发者工具，创建天气预报项目。新建一个天气页面， pages文件下面，创建一个 weather文件夹，里面在创建 weather.json, weather.wxml , weather.wxss, weather.js,四个 文件。效果如图：, IS imwq&st 匕 pages» 口 index» Cj kjga，& weatherwaatnerjs > weatHer.i&ork&l

54、t; > weather, wxrnlwm weather.wxss 国 background.ipi?tI utilsl:叩 pjs appjson1*>« app.wvss« prajecLconfig .son编写weather.wxml,相当于前端的html ,负责整个页面的结构 表现。代码如下：<image src="./background.jpg" class="bg"></image><view class="container"><view c

55、lass="nowWeather"><view class="temp w ">tmp° </view><view class="city w">city district street</view><view class="weather w">txt</view></view><view class="pm25 w"> 空气qlty pm25</view><vie

56、w class="weahterDetail"><view class=""><view class="w center">dir</view><view wx:if="sc ='微风'" class="w b center f50"> 微风 </view><view wx:else class="w b center f50">sc </view></view&g

57、t;<view class="l"></view><view class=""><view class="w center"> 相对湿度 </view><view class="w b center f50">hum%</view></view><view class="l"></view><view class=""><view clas

58、s="w center"> 体感温度 </view><view class="w b center f50">fl° </view></view></view><view wx:for="daily_forecast" wx:for-index="i" wx:for-item="item"><view class="hor forcast"><view class="center">dayi</view><view class="hor"><view class="center">item.cond_txt_d|item.wind_dir</view></view></view><view class="center">item.tmp_min ° / item.tmp_max</view&