自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(10)
  • 收藏
  • 关注

原创 项目实训报告(十):

如之前的文章所说,这里的天气指数同样是实时的,是从和风天气第三方API获得的,具体过程可以参考之前的文章。

2024-06-23 16:36:05 214

原创 项目实训报告(九):

此外,由于腾讯地图的短期并发限制,短时间内只能计算出5个景点的距离信息,而我们要计算的经典数量是大于5个的因此不能一次算好(直接计算会报错),我们设置了一个批次处理延时的方法,每次计算好5个景点后延时等待一点时间,分批次计算从而实现所有景点的距离计算。特别要注意的是,由于景点的距离会有初始值(我设的是:0),因此有关距离的页面渲染必须要在计算好距离之后,而不是一开始就渲染,否则显示的就是0了,这里使用到了promise,我还设置了一个距离刷新按钮,当点击后根据用户的当前位置刷新据他最近的景观。

2024-06-23 16:26:12 383

原创 项目实训报告(八):

下面回到景点搜索的实现逻辑,我们还会设置一个数组resultList用来存放符合景观名称关键词搜索的目标景观,即搜索命中景观,在点击搜索按钮后此时在前端展示的就是resultList,具体展示逻辑如下图所示。这里首先说明一下,记录景观的经纬度不仅方面后面计算距离,这里每次在点击景观时会将该景观的经纬度传至地图界面,从而实现在相关地图界面目标景观的定位,方便用户更好的找到自己想去的景观。根据msg即输入框内数据是否为空,与是否有与msg相匹配的景观名称与在页面中有不同的反馈结果。由此实现了搜索的功能。

2024-06-23 16:01:47 187

原创 项目实训周报(七):

首先要注意的是gif图的图层应该在所有图层之上,因此设置z-index: 999;此外就没有什么困难的了,剩下的都是较为普通的布局因此不再多说。

2024-06-23 15:39:20 104

原创 项目实训(六):

特别值得注意的是我还引入了一个动态的可以任意拖动的机器人gif图像用以点击进入后跳转至AI问答对话的界面,主要实现方法就是用 <movable-area>组件将整个页面包裹在里面,这样<movable-view>可移动元素就可以在整个页面拖动。-- 上方的轮播图 -->、<!-- 功能陈列区 -->、 <!-- 搜索过滤区 -->、 <!-- 小提示过渡区 -->、 <!这其中功能陈列区与景观陈列区的布局类似,都是相似元素的循环布局唯一的区别是功能陈列区四个元素一行、景点陈列区两个元素一行。

2024-06-23 15:18:20 96

原创 项目实训(五):

在这个过程中,使用到了wx.getLocation函数获取经纬度,并通过wx.request向和风天气的url:url:`https://geoapi.qweather.com/v2/city/lookup?我将这一函数设置为get_weather(){},我们首先获取地理位置,定位到当前的经纬度,在根据经纬度,获取当前所在的市区信息,如下图所示,这里的key换为先前自己所获取到的即可。该页面的配置需要以上数据,包括地区、时间、天气数据、气候数据、穿衣与防护的建议等等。(1):数据项的配置。

2024-05-30 16:42:53 279

原创 项目实训(四):

类似于先前所作的主页面的布局看可以看到该页面由上方的地点、时间提示区,中间的天气数据展示区和最下方的穿衣与防护建议区组成,具体的实现十分类似于之前报告中所说的主页面,因此不在这里多说,下方的代码图展示一下中间天气数据区的具体实现。本次的报告主要说明一下先前所说的功能区里的天气页面的实现,该页面的效果图如下图所示,它可以通过第三方API实时获取当前地点的天气情况与气候指数,并给出相应的穿衣防护建议。这里使用到的API插件是和风天气,需要先在他的API官网——>项目管理——>控制台((1):页面的布局。

2024-05-30 10:43:07 390

原创 项目实训周报(三):

由搜索按钮所跳转至的页面是一个简单的对话框页面,它是一个可滚动的视图容器<scroll-view>,采用与AI小助手一问一答的呈现方式获取AI小助手的解答,实现文字问答的功能,这里每次在下方输入想询问AI小助手的问题后自动在后端获取解答,小助手的回答内容可以在后端程序实现后替换为大模型所生成的内容。通过第三方API,我们还可以实现如获取当前经纬度、根据目的地名称获取其经纬度、路径导航、地理POI的标注等等的功能,相应的功能实现主要由我的另一位队友实现,他的csdn地址是。(4):简单拍照功能的实现。

2024-05-29 21:02:09 226

原创 项目实训周报(二):

在设置布局时,让每个区域水平、垂直对齐,同时每个占据50%的宽度,这样当放置四个区域时,就形成了2*2的布局。该页面的最低端是tapbar导航区,我设置了两个区域分别是主页面与地图区域,由于tapbar是针对整体项目的,所以它要在全局配置的app.json文件中进行设置,在文件中设置"tabBar"属性设置好相应的图标、文字说明与跳转页面路径即可,如下图所示。可以看到,该页面主要由四部分组成分别是顶层的轮播图,中部的搜索区和功能区(景点介绍、天气情况等)以及底部的tabBar导航区。

2024-05-29 17:05:29 191

原创 山东大学创新实训周报(一)

如上图所示,小程序的开发同大多数主流前端语言,其前端页面渲染与内容呈现主要实现在WXML与WXSS文件中,而与数据获取、业务逻辑、前后端衔接的部分实现在.js文件中。5、至此有关微信小程序最为基础的知识已经初步了解了,通过结合这些知识,我实现了以下效果的练习作品,之后的周报中将详细介绍该小程序渲染层与逻辑层的具体实现过程。了解完前端展示常用到的元素,我们肯定进一步的希望运用这些前端元素作为媒介实现我们的业务需求,这就需要小程序事件与页面导航相关的知识了。3、小程序的交互与实现逻辑。

2024-05-07 22:40:01 509

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除