小程序首页搭建

小程序首页搭建

  • 1. Flex布局是什么?
  • 2. 容器的属性
    • 2.1 flex-direction属性
    • 2.2 flex-wrap属性
    • 2.3 flex-flow属性
    • 2.4 justify-content属性
    • 2.5 align-items属性
    • 2.6 align-content属性
  • 二.首页布局搭建
  • 二.1moke模拟数据实现轮播图
  • 4.信息搭建

Flex弹性布局

1. Flex布局是什么?

Flex布局是一种用于在容器中进行灵活排列和对齐子元素的CSS布局模型。它的全称为Flexible Box,又称为弹性布局。通过设置容器的属性,我们可以实现自适应布局并轻松地进行响应式设计。

在传统的网页布局中,我们通常使用盒模型和浮动来实现元素的排列和对齐。但是这种方式存在许多限制和兼容性问题。而Flex布局则提供了更加灵活和简便的方式来控制元素的布局。

Flex布局的核心思想是将容器分为主轴和交叉轴,并基于主轴和交叉轴来排列和对齐子元素。主轴可沿水平方向(从左到右)或垂直方向(从上到下),交叉轴则与主轴垂直。

通过设置容器的属性,我们可以控制子元素在主轴和交叉轴上的排列顺序、尺寸和对齐方式。同时,Flex布局还支持自动换行、均匀对齐等功能,使得页面布局更加灵活、自适应和响应式。

总结来说,Flex布局是一种强大且易用的CSS布局模型,通过简单的属性设置,可以实现各种复杂的布局需求,提升网页设计和开发的效率。。

2. 容器的属性

2.1 flex-direction属性

flex-direction属性用于定义子元素在容器中的排列方向。它决定了主轴(main axis)的方向,从而影响子元素的排列方式。常见的取值有以下四种:

row(默认值):子元素水平方向从左到右排列。主轴起点在左侧,终点在右侧。

row-reverse:子元素水平方向从右到左排列。主轴起点在右侧,终点在左侧。

column:子元素垂直方向从上到下排列。主轴起点在上方,终点在下方。

column-reverse:子元素垂直方向从下到上排列。主轴起点在下方,终点在上方。

这些取值决定了子元素在主轴上的顺序和对齐方式。通过设置flex-direction属性,我们可以轻松改变子元素的排列方向,适应不同的布局需求。需要注意的是,该属性只会影响子元素的排列顺序,不会改变子元素本身的方向属性(比如文本的方向等)。。

2.2 flex-wrap属性

flex-wrap属性用于定义子元素在容器中是否换行显示。它决定了子元素的排列方式,当子元素超出容器的尺寸时,是否允许换行。常见的取值有以下三种:

nowrap(默认值):子元素不换行,所有项目在一行(或一列)显示。

wrap:子元素换行,超出容器的项目会移动到下一行(或下一列)显示。

wrap-reverse:子元素换行,超出容器的项目会从后面开始移动到上一行(或上一列)显示。

这些取值决定了子元素在容器中的排列方式。通过设置flex-wrap属性,我们可以控制子元素是否换行,适应不同的布局需求。需要注意的是,该属性只在子元素的总尺寸超出容器时才会生效,如果子元素的总尺寸小于等于容器的尺寸,则不会发生换行。同时,flex-wrap属性与flex-direction属性相互关联,当子元素换行时,它们的排列方向也会受到影响。

2.3 flex-flow属性

flex-flow属性是flex-direction和flex-wrap两个属性的简写形式。它用于同时设置子元素在容器中的排列方向(flex-direction)和是否换行(flex-wrap)。通过设置flex-flow属性,我们可以方便地一次性定义这两个属性的取值。

flex-flow属性的语法为:flex-flow: ;

其中,表示子元素的排列方向,可以取值为row、row-reverse、column或column-reverse;表示是否允许换行,可以取值为nowrap、wrap或wrap-reverse。

例如,flex-flow: row wrap; 表示子元素水平方向从左到右排列,并允许换行。

使用flex-flow属性的好处在于简化了代码,减少了重复的属性设置。而且,通过一条属性即可控制子元素的排列方向和换行情况,提高了开发效率。

需要注意的是,flex-flow属性的默认值为row nowrap。如果只需要设置其中一个属性而保持另一个属性的默认值,可以单独使用相应的属性进行设置。

2.4 justify-content属性

justify-content属性用于定义子元素在主轴上的对齐方式。它决定了子元素沿主轴的排列方式,当容器空间大于子元素总尺寸时,可以通过该属性来控制子元素在容器中的水平或垂直对齐方式。常见的取值有以下几种:

flex-start(默认值):子元素在主轴起点对齐。

flex-end:子元素在主轴终点对齐。

center:子元素在主轴居中对齐。

space-between:子元素在主轴两端对齐,剩余的空间平均分布在子元素之间。

space-around:子元素在主轴各个位置均匀分布,并且每个子元素周围有相等的空间。

space-evenly:子元素在主轴各个位置均匀分布,包括首尾两端和子元素之间的空间都相等。

通过设置justify-content属性,我们可以调整子元素在容器中的水平或垂直位置,使布局更加灵活、美观。需要注意的是,该属性只对具有一定剩余空间的情况下生效,如果子元素的总尺寸大于容器的尺寸,则不会发生对齐操作。同时,该属性只影响主轴上的对齐方式,与交叉轴上的对齐方式无关。

2.5 align-items属性

align-items属性用于定义子元素在交叉轴上的对齐方式。它决定了子元素沿交叉轴的排列方式,当容器空间大于子元素总尺寸时,可以通过该属性来控制子元素在容器中的垂直或水平对齐方式。常见的取值有以下几种:

stretch(默认值):子元素沿交叉轴拉伸,填满容器的高度或宽度。

flex-start:子元素在交叉轴起点对齐。

flex-end:子元素在交叉轴终点对齐。

center:子元素在交叉轴居中对齐。

baseline:子元素以其基线对齐,如果子元素是文本,则以文本基线对齐。

通过设置align-items属性,我们可以调整子元素在容器中的垂直或水平位置,使布局更加灵活、美观。需要注意的是,该属性只对具有一定剩余空间的情况下生效,如果子元素的总尺寸大于容器的尺寸,则不会发生对齐操作。同时,该属性只影响交叉轴上的对齐方式,与主轴上的对齐方式无关。

此外,还有align-self属性可用于单独设置某个子元素在交叉轴上的对齐方式,该属性优先级高于align-items属性。这样可以针对个别子元素进行特殊的对齐设置,使布局更加灵活多样。

2.6 align-content属性

align-content属性用于定义多行或多列子元素在交叉轴上的对齐方式。它是应用于容器上的属性,当容器内存在多行(flex-wrap为wrap或wrap-reverse时)或多列(flex-direction为column或column-reverse时)的子元素时,align-content属性可以控制这些行或列的整体对齐方式。常见的取值有以下几种:

stretch(默认值):子元素沿交叉轴拉伸,填满容器的高度或宽度。

flex-start:多行或多列子元素在交叉轴起点对齐。

flex-end:多行或多列子元素在交叉轴终点对齐。

center:多行或多列子元素在交叉轴居中对齐。

space-between:多行或多列子元素在交叉轴两端对齐,剩余的空间平均分布在行或列之间。

space-around:多行或多列子元素在交叉轴各个位置均匀分布,并且每行或列周围有相等的空间。

space-evenly:多行或多列子元素在交叉轴各个位置均匀分布,包括首尾两端和行或列之间的空间都相等。

通过设置align-content属性,我们可以调整多行或多列子元素在交叉轴上的整体对齐方式,以实现更灵活、美观的布局效果。需要注意的是,该属性只对具有一定剩余空间的情况下生效,如果子元素的总尺寸大于容器的尺寸,则不会发生对齐操作。同时,如果只有一行或一列的子元素,align-content属性将不起作用。

二.首页布局搭建

1.导入static文件
2.app.json


{"pages": ["pages/index/index","pages/meeting/list/list","pages/vote/list/list","pages/ucenter/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/tabBar/coding.png","selectedIconPath": "/static/tabBar/coding-active.png"},{"pagePath": "pages/meeting/list/list","iconPath": "/static/tabBar/sdk.png","selectedIconPath": "/static/tabBar/sdk-active.png","text": "会议"},{"pagePath": "pages/vote/list/list","iconPath": "/static/tabBar/template.png","selectedIconPath": "/static/tabBar/template-active.png","text": "投票"},{"pagePath": "pages/ucenter/index/index","iconPath": "/static/tabBar/component.png","selectedIconPath": "/static/tabBar/component-active.png","text": "设置"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

3.app.js


// 以下是业务服务器API地址// 本机开发API地址var WxApiRoot = 'http://localhost:8080/demo/wx/';// 测试环境部署api地址// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';// 线上平台api地址//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';module.exports = {IndexUrl: WxApiRoot + 'home/index', //首页数据接口SwiperImgs: WxApiRoot+'swiperImgs', //轮播图MettingInfos: WxApiRoot+'meeting/list', //会议信息};

二.1moke模拟数据实现轮播图

.在这里插入图片描述
模拟的数据·:

{"pages": ["pages/index/index","pages/meeting/list/list","pages/vote/list/list","pages/ucenter/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/tabBar/coding.png","selectedIconPath": "/static/tabBar/coding-active.png"},{"pagePath": "pages/meeting/list/list","iconPath": "/static/tabBar/sdk.png","selectedIconPath": "/static/tabBar/sdk-active.png","text": "会议"},{"pagePath": "pages/vote/list/list","iconPath": "/static/tabBar/template.png","selectedIconPath": "/static/tabBar/template-active.png","text": "投票"},{"pagePath": "pages/ucenter/index/index","iconPath": "/static/tabBar/component.png","selectedIconPath": "/static/tabBar/component-active.png","text": "设置"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

index.js

// pages/index/index.js
const api=require("../../config/app.js")Page({/*** 页面的初始数据*/data: {imgSrcs:[lists:[{"id": "1","image": "/static/persons/1.jpg","title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】","num":"304","state":"进行中","starttime": "2022-03-13 00:00:00","location": "深圳市·南山区"},{"id": "1","image": "/static/persons/2.jpg","title": "AI WORLD 2016世界人工智能大会","num":"380","state":"已结束","starttime": "2022-03-15 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/3.jpg","title": "H100太空商业大会","num":"500","state":"进行中","starttime": "2022-03-13 00:00:00","location": "大连市"},{"id": "1","image": "/static/persons/4.jpg","title": "报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”","num":"150","state":"已结束","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/5.jpg","title": "新质生活 · 品质时代 2016消费升级创新大会","num":"217","state":"进行中","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"}]},loadSwiperImgs(){let that=this;wx.request({url: api.SwiperImgs,dataType: 'json',success(res) {console.log(res)that.setData({imgSrcs:res.data.images})}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {
this.loadSwiperImgs();},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

搭建轮播图

<swiper indicator-dots="true"autoplay="true"  duration="{{duration}}"><block wx:for="{{imgSrcs}}" wx:key="*text"><swiper-item><image src=" {{item.img}}"></image></swiper-item></block></swiper>

轮播图功能已经实现

4.信息搭建

index.wxml

<!--pages/index/index.wxml-->
<!-- <text>pages/index/index.wxml</text> -->
<view><swiper indicator-dots="true"autoplay="true"  duration="{{duration}}"><block wx:for="{{imgSrcs}}" wx:key="*text"><swiper-item><image src=" {{item.img}}"></image></swiper-item></block></swiper>
</view>
<!-- <view class="top"></view>
<view class="down">
<view class="list"><view class="left"></view><view class="right"></view>
</view> -->
<!-- </view> -->
<view class="mobi-title"><text class="mobi-icon"></text><text>会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><view class="list" data-id="{{item.id}}"><view class="list-img"><image class="video-img" mode="scaleToFill" src="{{item.image}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state">{{item.state}}</view><view class="join"><text class="list-num">{{item.num}}</text>人报名</view></view><view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view></view></view>
</block>
<view class="section bottom-line"><text>到底啦</text>
</view>

index.wxss

<!--pages/index/index.wxml-->
<!-- <text>pages/index/index.wxml</text> -->
<view><swiper indicator-dots="true"autoplay="true"  duration="{{duration}}"><block wx:for="{{imgSrcs}}" wx:key="*text"><swiper-item><image src=" {{item.img}}"></image></swiper-item></block></swiper>
</view><!-- </view> -->
<view class="mobi-title"><text class="mobi-icon"></text><text>会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><view class="list" data-id="{{item.id}}"><view class="list-img"><image class="video-img" mode="scaleToFill" src="{{item.image}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state">{{item.state}}</view><view class="join"><text class="list-num">{{item.num}}</text>人报名</view></view><view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view></view></view>
</block>
<view class="section bottom-line"><text>到底啦</text>
</view>

index.js

// pages/index/index.js
const api=require("../../config/app.js")Page({/*** 页面的初始数据*/data: {imgSrcs:[{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png","text": "1"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png","text": "2"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png","text": "3"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png","text": "4"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png","text": "5"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png","text": "6"}],lists:[{"id": "1","image": "/static/persons/1.jpg","title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】","num":"304","state":"进行中","starttime": "2022-03-13 00:00:00","location": "深圳市·南山区"},{"id": "1","image": "/static/persons/2.jpg","title": "AI WORLD 2016世界人工智能大会","num":"380","state":"已结束","starttime": "2022-03-15 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/3.jpg","title": "H100太空商业大会","num":"500","state":"进行中","starttime": "2022-03-13 00:00:00","location": "大连市"},{"id": "1","image": "/static/persons/4.jpg","title": "报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”","num":"150","state":"已结束","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/5.jpg","title": "新质生活 · 品质时代 2016消费升级创新大会","num":"217","state":"进行中","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"}]},loadSwiperImgs(){// let that=this;// wx.request({//     url: api.SwiperImgs,//     dataType: 'json',//     success(res) {//       console.log(res)//       that.setData({//           imgSrcs:res.data.images//       })//     }//   })},/*** 生命周期函数--监听页面加载*/onLoad(options) {
this.loadSwiperImgs();},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

效果;
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/161296.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker基础操作命令演示

Docker中的常见命令&#xff0c;可以参考官方文档&#xff1a;https://docs.docker.com/engine/reference/commandline/cli/ 1、常见命令介绍 其中&#xff0c;比较常见的命令有&#xff1a; 命令说明文档地址docker pull拉取镜像docker pulldocker push推送镜像到DockerReg…

【塔防】1,游戏架构

游戏架构 一&#xff0c;StoneDefence核心架构分析1&#xff0c;安装2&#xff0c;核心框架2.1创建核心核心环境2.1.1游戏中的核心元素&#xff08;GameCore&#xff09;ApawnGameInstanceGameStatePlayerStatePlayerControllerGameUserSettings 2.1.2大厅中的核心元素&#xf…

水库大坝安全监测是什么和主要作用?

水库大坝安全监测是指通过仪器观测和巡视检查对水利水电工程主体结构、地基基础、两岸边坡、相关设施以及周围环境所作的测量及观察。大坝安全监测是作为水库大坝安全管理的重要组成部分&#xff0c;是掌握水库大坝安全性态的重要手段&#xff0c;是科学调度、安全运行的前提。…

BI零售数据分析,当代零售企业的核心竞争力

在数字化转型中&#xff0c;BI智能零售数据分析成为了极其重要的核心竞争力之一。通过对大数据的采集和分析&#xff0c;零售企业可以更好地了解消费者的需求和行为模式&#xff0c;从而做出更准确的决策。例如&#xff0c;通过分析消费者的购物历史、浏览记录等数据&#xff0…

【微信小程序】6天精准入门(第1天:小程序入门)

一、介绍 1、什么是小程序 小程序是一种轻量级的应用程序&#xff0c;可以在移动设备上运行&#xff0c;不需要用户下载和安装。它们通常由企业或开发者开发&#xff0c;用于提供特定功能或服务。 微信小程序&#xff08;wei xin xiao cheng xu&#xff09;&#xff0c;简称小程…

Linux centos安装SQL Server数据库,结合cpolar内网穿透实现公网访问

文章目录 前言1. 安装sql server2. 局域网测试连接3. 安装cpolar内网穿透4. 将sqlserver映射到公网5. 公网远程连接6.固定连接公网地址7.使用固定公网地址连接 前言 简单几步实现在Linux centos环境下安装部署sql server数据库&#xff0c;并结合cpolar内网穿透工具&#xff0…

九月 NFT 行业解读:熊市情绪仍占上风

作者: stellafootprint.network 9 月&#xff0c;著名主流媒体《滚石》&#xff08;Rolling Stone&#xff09;发表了一篇题为《你的 NFT 实际上——终于——完全不值钱了》&#xff08;Your NFTs Are Actually — Finally — Totally Worthless&#xff09;的文章&#xff0c…

Nginx正向代理,反向代理,负载均衡

Nginx正向代理&#xff0c;反向代理&#xff0c;负载均衡 Nginx当中有两种代理方式&#xff1a; 七层代理&#xff08;http协议&#xff09; 四层代理&#xff08;tcp/udp流量转发&#xff09; 七层代理&#xff1a;七层代理&#xff0c;代理的是http的请求和响应 客户端请求…

F5.5G落进现实:目标网带来的光之路

数字化与智能化的世界将走向何方&#xff1f;这个问题有着非常复杂的答案&#xff0c;但其中有一个答案已经十分清晰。那就是智能化的下一步&#xff0c;必将走向泛在万兆的世界。 网络是算力联接的底座&#xff0c;是智能演化的基础。纵观每一代数字化升级&#xff0c;都可以发…

算法-堆/归并排序-排序链表

算法-堆/归并排序-排序链表 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/sort-list/description/?envTypestudy-plan-v2&envIdtop-interview-150 1.2 题目描述 2 优先级队列构建大顶堆 2.1 思路 优先级队列构建小顶堆链表所有元素放入小顶堆依次取出堆顶…

vscode使用

vscode 快捷键1、ctrl f 文件内搜索2、ctrlp 快速打开最近打开的文件3、ctrlshiltn 打开新的编辑器窗口4、ctrlshiftw 关闭编辑器5、ctrlhome 跳转到页头6、ctrlend 跳转到页尾 插件1、Markdown Preview 参考文章 https://zhuanlan.zhihu.com/p/113222681?utm_sourcecom.tenc…

React添加文件路径时使用@符号代替src目录(非creae-react-app)

在其它项目中看到的可以用符号来代替src目录&#xff0c;那么在自己的react项目中也必须得尝试一下。本人的项目不是通过create-react-app脚手架来创建的&#xff0c;无法使用craco或者的方案来实现。 jsconfig.json配置 用的vscode进行开发&#xff0c;查看项目当中是否存在js…

QT中使用QVTKOpenGLNativeWidget的简单教程以及案例,利用PCLVisualizer显示点云

先添加一个带有ui的QT应用程序。 一、在ui界面中添加QVTKOpenGLNativeWidget控件 先拖出来一个QOpenGLWidget控件 修改布局如下&#xff1a; 然后将QOpenGLWidget控件提升为QVTKOpenGLNativeWidget控件&#xff0c;步骤如下&#xff1a; 右击QOpenGLWidget窗口&#xff0c;选…

【算法挨揍日记】day16——525. 连续数组、1314. 矩阵区域和

525. 连续数组 525. 连续数组 题目描述&#xff1a; 给定一个二进制数组 nums , 找到含有相同数量的 0 和 1 的最长连续子数组&#xff0c;并返回该子数组的长度。 解题思路&#xff1a; 本题的元素只有0和1&#xff0c;根据题目意思&#xff0c;我们可以把题目看成找一段最…

DirectX3D 正交投影学习记录

所谓正交投影变换&#xff0c;就是已知盒状可视空间内任意点坐标(x,y,z)&#xff0c;求解垂直投影到xy平面的对应点坐标。 按照这个定义&#xff0c;xyz坐标系本身就是正交坐标系&#xff0c;盒状可视空间内任意点的坐标(x,y,z)投影到(x,y)平面&#xff0c;只要简单地丢弃z坐标…

如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

SLAM从入门到精通(dwa算法)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 要说搜路算法&#xff0c;这个大家都比较好理解。毕竟从一个地点走到另外一个地点&#xff0c;这个都是直觉上可以感受到的事情。但是这条道路上机…

基于SSM的视频播放系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

NSS [GWCTF 2019]枯燥的抽奖

NSS [GWCTF 2019]枯燥的抽奖 开题让我猜字符串&#xff0c;这种题目肯定不是猜&#xff0c;应该是类似于php伪随机数。 dirsearch扫他一下。 访问/check.php得到源码。 分析一下代码。 通过PHP伪随机数从字符库$str_long1中选取20个字符组成字符串&#xff0c;返回给我们前十…

UE5 运行时生成距离场数据

1.背景 最近有在运行时加载模型的需求&#xff0c;使用DatasmithRuntimeActor可以实现&#xff0c;但是跟在编辑器里加载的模型对比起来&#xff0c;室内没有Lumen的光照效果。 图1 编辑器下加载模型的效果 图2 运行时下加载模型的效果 然后查看了距离场的数据&#xff0c;发现…