实验二实验报告

实验二实验报告

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

（1）准备工作

1、注册和风天气。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SQkQ6P5D-1660810554786)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817142117947.png)]

2、创建应用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X24Er3Hg-1660810554788)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817142914795.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xqiX1LD2-1660810554790)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817143052986.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T4BNUeZZ-1660810554792)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817143120859.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aFo8MZw0-1660810554793)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817143211443.png)]

3、服务器域名配置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTgNW2mB-1660810554794)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817144933071.png)]

（2）创建项目

1、创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w8nnRqko-1660810554796)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817145211355.png)]

(3)页面配置

1、创建页面文件，将app. json文件内pages 属性中的“pages/logs/logs"删除，并删除上一行末尾的
逗号。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHAzasIS-1660810554796)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817145403185.png)]

2、删除和修改文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjqYvlly-1660810554797)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817145608049.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sbus83HU-1660810554798)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817145655033.png)]

3、创建其他文件，创建images文件夹，并把下载好的图片复制到文件夹里。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9YwCQTp0-1660810554798)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817145751038.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFlex7Bf-1660810554799)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817150632967.png)]

(4)视图设计

1、导航栏设计，在app.json中自定义导航栏标题和背景颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-omVY3YkY-1660810554800)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817150922639.png)]

2、页面设计，分为四个区域，每个区域修改代码如下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n07joFDi-1660810554801)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817151316977.png)]

3、区域一代码，区域1需要使用组件来实现一个地区选择器,用户点击可切换选择其他城市。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jssAMD53-1660810554801)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817151735327.png)]

5、区域2需要使用< text>组件实现一个单行天气信息，包括当前城市的温度和天气状况。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUYNVX7a-1660810554802)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817152611780.png)]

6、区域3需要使用组件展示当前城市的天气图标。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O346s6bO-1660810554802)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817152848070.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zRaRaOnF-1660810554803)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817153049017.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DWXwv6KE-1660810554803)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817153112017.png)]

7、区域4需要使用< view>组件展示多行天气信息。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i1boPEcg-1660810554804)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817154409871.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vl1B1u2S-1660810554805)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817154908424.png)]

（5）逻辑实现

1、首先修改< picker >组件中的“北京市”为{{region}},然后为< picker>组件追加自定义bindchange事件,用于监听选项变化。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26Mrscxn-1660810554805)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817162421753.png)]

2、由于地区选择器的返回结果是数组的形式,所以在JS文件的data中定义region 为包含了省、市、区3个项目的数组,初始城市信息需要自定义。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8eiPCeZK-1660810554806)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817162710459.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fYYLVIUq-1660810554807)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817162721712.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3c2Wzntz-1660810554807)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817162816820.png)]

（6）获取实况天气数据

1、在JS文件中使用自定义函数getWeather进行实况天气数据的获取。由于非直辖市无法查询到具体的区,所以后续的天气查询以城市作为查询依据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mflwYTMJ-1660810554808)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817160519304.png)]

因为版本更新的问题，教程上的location获取方法有些错误，所以对代码进行了修改。这里的location要调用utils文件夹里的util.js文件里的函数，所以在index.js中要对他进行引用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wglwjAE1-1660810554808)(E:\大学\大三上\移动软件开发\image-20220817232239271.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dKcS5vBj-1660810554809)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817232412109.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4uQXQE2z-1660810554809)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817232725463.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AjWls3Zg-1660810554810)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817232800855.png)]

3、实况天气数据包含在now属性中。更新getWeather函数，将该属性存到JS文件的data中。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JW7VcB5N-1660810554811)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817232810726.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPS3ccrl-1660810554811)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817233159523.png)]

（7）更新页面天气信息

1、将WXML页面上所有的临时数据都替换成{{now.属性}}的形式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YpG13TwP-1660810554812)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817233351944.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ypRhQ5O-1660810554813)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817233500437.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3jX7GskY-1660810554814)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817233734352.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Kbbe77D-1660810554815)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817234506011.png)]因为now的数据变量名称没有填写正确，所以导致报错，后来我根据now数据变量进行了修改。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z4x1H5mM-1660810554816)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817234718410.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T3Sj0qGJ-1660810554816)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817234833257.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iAv1WVae-1660810554817)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817234912898.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f70ZEP4R-1660810554818)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817234923002.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EopQL8zX-1660810554819)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220817234951214.png)]

2、需要注意的是,在网速受限的情况下可能不能立刻获取到数据,因此最好在JS文件的data中为now规定初始数据，在获取到实际数据前可以临时显示这些数据。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u5DPUOal-1660810554819)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220818001044171.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QSXi3RGm-1660810554822)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220818001034445.png)]

三、程序运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pgkLteUt-1660810554823)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220818155209391.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2YSJL6Rc-1660810554824)(C:\Users\华为\AppData\Roaming\Typora\typora-user-images\image-20220818155215299.png)]

四、问题总结与体会

1、在获取实况天气数据的时候，发现教程中location的表示方法出了问题，所以返回不了结果。后来发现，下载的文件里除了有图片还有一个utils文件夹，这个文件夹里有util.js文件，打开这个文件发现里面是关于城市经纬度的一些信息，还有一个返回城市location的一个函数，那么在index.js中就应该调用这个函数来把结果赋值给location。

2、在index.js引用这个函数的时候发现老是报错找不到这个函数，后来发现是引用util.js这个文件时的路径出了问题，一开始我的路径是绝对路径，通过上网搜索相关教程发现应该是相对路径。

s文件，打开这个文件发现里面是关于城市经纬度的一些信息，还有一个返回城市location的一个函数，那么在index.js中就应该调用这个函数来把结果赋值给location。

2、在index.js引用这个函数的时候发现老是报错找不到这个函数，后来发现是引用util.js这个文件时的路径出了问题，一开始我的路径是绝对路径，通过上网搜索相关教程发现应该是相对路径。

3、最后一步，将临时数据修改成now.属性的时候，按照教程上给的属性修改会出现错误，因为教程上的属性名与我的属性名称不一致，所以就需要打开appdata查看now中的属性名称再进行修改。