微信小程序开发学习（基础）

学习课程：2023最新零基础入门微信小程序开发_哔哩哔哩_bilibili

微信开发工具下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

开发文档：微信开放文档

创建新项目

机型：iPhoneX

快捷键

<view>
  .row{$}*8
</view>
<view>
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
</view>

基本掌握的点

 每个界面的文件都是这几个

底下是全局的配置，每个页面单独的json配置会覆盖全局配置

新建页面去app.json添加路径

导航栏在components里面

几个组入门

view组件

view | 微信开放文档

属性这么用

text

text | 微信开放文档

user-selectbooleanfalse否文本是否可选，该属性会使文本节点显示为 inline-block2.12.1
spacestring否显示连续空格1.4.0
合法值说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小
<text>太复杂了  啊\n</text>
<text space="ensp">太复杂了  啊\n</text>
<text user-select decode>&lt;bbbbb</text>

问题：设置text标签的user-select后无法进行/n的换行

icon

<view>
  <icon type="success" color="#ffa501"/>
  <text>this is a yes</text>
  <icon type="search" size="30"/>
</view>

process进度条（🐕都不用，后面有三方库）

<view>
  <progress percent="75" show-info="true" stroke-width="3" active="true"/>
</view>

rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

        人为规定的屏幕宽750rpx，但是实际屏幕会变化，再变也是750rpx，在右侧iPhone中，上面蓝色块设置为200px，下面橙色块设置为400rpx，二者在375px宽屏中大小均为200px；然而转到了window机型上，宽度变成了480px，而400rpx=480/750*400=256px

视图容器

scroll-view

scroll-view | 微信开放文档

竖向滚动

<!-- scroll  -->
<scroll-view class="myScroll" scroll-y="true">
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
</scroll-view>

.myScroll{
  width: 100%;
  height: 220rpx;
  background-color: burlywood;
}
.myScroll .row{
  font-size: xx-large;
  width: 220rpx;
  height: 220rpx;
  background-color: greenyellow;
  margin-right: 10rpx;
}

横向滚动

<!-- scroll  -->
<scroll-view class="myScroll" scroll-x="true" >
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
</scroll-view>

.myScroll{
  width: 100%;
  height: 220rpx;
  background-color: burlywood;
  white-space: nowrap;  /* 不换行 */
}
.myScroll .row{
  font-size: xx-large;
  width: 220rpx;
  height: 220rpx;
  background-color: greenyellow;
  margin-right: 10rpx;
  display: inline-block;  /*转化为行级块元素*/
}
.myScroll .row:last-child{
  margin-right: 0px;
}

match-media窗口大小匹配

match-media | 微信开放文档

<!-- 窗口匹配 -->
<view>
  <match-media min-height="400" orientation="portrait">
    <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
  </match-media>
  <match-media min-width="300" max-width="600">
    <view>当页面宽度在 300 ~ 600 px 之间时展示这里</view>
  </match-media>
</view>

当页面高度不小于400px且屏幕方向为纵向时展示这里

当页面宽度在300～600px之间时展示这里

root-portal(父子元素层级逃逸问题)

功能描述：

使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

现有如下场景

有两个同级box元素，box2里面有mask遮罩，当box1层级大于box2时候，box2的子元素z-index再大也盖不住box1

<view class="out">
  <view class="box1"></view>
  <view class="box2">
    <view class="mask">
    </view>
  </view>
</view>

.out .box1{
  position: relative;
  z-index: 10;
  width: 300rpx;
  height: 300rpx;
  background-color: #339fdd;
}

.out .box2{
  position: relative;
  z-index: 4;
  width: 350rpx;
  height: 350rpx;
  background-color: #fffaaa;
  left: 100rpx;
  top: -100rpx;
}

.out .box2 .mask{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  z-index: 99999999999999999999999999;
}

<view class="out">
  <view class="box1"></view>
  <view class="box2">
  <root-portal enable="true">
    <view class="mask">
    </view>
  </root-portal>

  </view>
</view>

此时遮罩已经脱离出来了页面，超出三界之外不在五行之中？

要把wxss定义在app.wxss中

.mask{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.8);
  top: 0;
  left: 0;
  z-index: 999;
}

全局配置app.json

创建新界面

  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"  页面数组中添加这一行
  ]

哪个在上边哪个显示

媒体组件

自己找目录创建个文件夹，放点素材，后期需要用到相对路径

image

srcstring否图片资源地址1.0.0
modestringscaleToFill否图片裁剪、缩放的模式1.0.0
合法值说明最低版本
scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变2.10.3
top裁剪模式，不缩放图片，只显示图片的顶部区域。仅 Webview 支持。
bottom裁剪模式，不缩放图片，只显示图片的底部区域。仅 Webview 支持。
center裁剪模式，不缩放图片，只显示图片的中间区域。仅 Webview 支持。
left裁剪模式，不缩放图片，只显示图片的左边区域。仅 Webview 支持。
right裁剪模式，不缩放图片，只显示图片的右边区域。仅 Webview 支持。
top left裁剪模式，不缩放图片，只显示图片的左上边区域。仅 Webview 支持。
top right裁剪模式，不缩放图片，只显示图片的右上边区域。仅 Webview 支持。
bottom left裁剪模式，不缩放图片，只显示图片的左下边区域。仅 Webview 支持。
bottom right裁剪模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持。
<image src="../../static/imgs/2023-12-11_17-01-13.png" mode=""/>
<image src="https://i0.hdslb.com/bfs/feed-admin/276af9a950a93889be31c698a8fdfd5add8b2b82.jpg@336w_190h_!web-video-rcmd-cover.avif" mode=""/>

video

video | 微信开放文档

导航

navigator跳转

<navigator url="/pages/index/index">index</navigator>
<view>-----------------------</view>
<navigator url="/pages/index/index" class="out">
  <image src="/static/imgs/2023-12-11_17-01-13.png" class="img" mode="aspectFit"/>
</navigator>

JS

WXML | 微信开放文档

app.js构造器

注册小程序 | 微信开放文档

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log("初始化项目")
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log("onShow触发了")
  },

怎么拿到js文件的值

app.js中配置好

  globalData:{
    name:"app.js`s globalData name"
  }

在domo.js中拿数据使用

// 拿到全局的js文件
const app = getApp()
console.log(app.globalData.name);

（在全局js中的启动构造函数中重新定义值，上一条页面js打印的就是新的值）

  onLaunch: function () {
    console.log("初始化项目")
    this.globalData.name = "yuange666"
  },

页面js

注册页面 | 微信开放文档

定义变量和wxml中引用

  // js文件中
  data: {
    filename:"data.js"
  },
wxml中
<view>filename is {{filename}}</view>

正确-修改数据方法！

修改数据要使用setData，不能直接改，不然页面显示不会改变，还是data中定义的名称

Page({

  /**
   * 页面的初始数据
   */
  data: {
    filename:"data.js"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    setTimeout(()=>{
      this.setData({filename:"setData data.js"})
    }, 2000)
      console.log("data.js onLoad")
      // 为什么这么改是不起作用的？
      this.filename = "data.js in onLoad"
  },

这是因为直接修改 data 对象的属性不会触发数据的响应性，而使用 setData 函数来修改数据会触发数据的响应性。

不同数据类型显示

<view>filename is {{filename}}</view>
<view>num is {{num}}</view>
<view>bool is {{bool}}</view>
<view>user is {{user}}</view>
<view>user is {{user.name}}-{{user.age}}</view>
<view>user is {{user.age+user.age}}</view>
<view>user is {{user.name+'-'+user.age}}</view>

  data: {
    filename:"data.js",
    num:20,
    bool:true,
    user:{
      name:"cxk",
      age:18
    }
  },

条件渲染（是否渲染出现）？wx:if=

<view>filename is {{filename}}</view>

<!-- ifelse一定要连在一起写 -->
<view wx:if="{{true}}">num is {{num}}</view>
<view wx:else>user is {{user}}</view>

<block wx:if="{{1==1}}">
  <view>bool is {{bool}}</view>
  <view>user is {{user.name}}-{{user.age}}</view>
</block>

<view>user is {{user.age+user.age}}</view>
<view>user is {{user.name+'-'+user.age}}</view>
wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

列表渲染

列表渲染 | 微信开放文档

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<!-- list 渲染 -->
<view wx:for="{{users}}">
  {{index}}:{{item.name}}
</view>


    users:[
      {
        name:"wyf",
        age:20
      },
      {
        name: "sdy",
        age: 40
      }
    ]
  },

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

输出一样的，就是改了下默认的index和item

九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

事件

使用方式

  • 在任意组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
Page({
  tapName: function(event) {
    console.log(event)
  }
})

事件分类

事件分为冒泡事件和非冒泡事件：

  1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

事件 | 微信开放文档

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

小案例：随机变色

<view class="random" style="background-color: {{color}};" bindtap="clickRandom">
  random:{{num}}
</view>
  clickRandom(){
    let rdm1 = parseInt(Math.random()*256)
    let rdm2 = parseInt(Math.random()*256)
    let rdm3 = parseInt(Math.random()*256)
    // var color = "rgb("+rdm1+","+rdm2+","+rdm3+")"
    var color = `rgb(${rdm1},${rdm2},${rdm3})`
    this.setData({
      num:rdm1,
      color:color
    })
  },
.random{
  width: 200rpx;
  height: 200rpx;
  background-color: darkorange;
  margin-left: 275rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

中案例：弹幕列表

WX小程序案例（一）：弹幕列表-CSDN博客

表单组件

button按钮

button | 微信开放文档

自己看去，有手就会用

界面API

提示性弹窗showToast

wx.showToast(Object object) | 微信开放文档

在对应函数里加上

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

合法值说明
success显示成功图标，此时 title 文本最多显示 7 个汉字长度
error显示失败图标，此时 title 文本最多显示 7 个汉字长度
loading显示加载图标，此时 title 文本最多显示 7 个汉字长度
none不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持

确认取消弹窗

<view class="block" bindtap="onClick"></view>

onClick(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          wx.showToast({
            title: '点了确定',
            icon: 'success',
            duration: 1000
          })
        } else if (res.cancel) {
          wx.showToast({
            title: '点了取消',
            icon: 'error',
            duration: 1000
          })
        }
      }
    })
  },

导航条

wx.setNavigationBarColor(Object object) | 微信开放文档

有几个函数，控制导航栏的

  onLoad(options) {
    wx.showLoading({
      title: '加载中',
    })
    wx.setNavigationBarTitle({
      title: 'onLoad修改的标题',
    })
  },

路由（各种跳转）！

wx.switchTab(Object object) | 微信开放文档

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：。。。。。。。。。。

全局配置 | 微信开放文档

属性类型必填描述最低版本
entryPagePathstring否小程序默认启动首页
pagesstring[]是页面路径列表
windowObject否全局的默认窗口表现
tabBarObject否底部 tab 栏的表现

tab栏

全局配置 | 微信开放文档

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

这是全局性质的，所以加载了app.json中

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "index",
      "iconPath": "/static/imgs/icon1.png",
      "selectedIconPath": "/static/imgs/icon1.png"
    },{
      "pagePath": "pages/event/event",
      "text": "event",
      "iconPath": "/static/imgs/icon2.png",
      "selectedIconPath": "/static/imgs/icon2.png"
    },{
      "pagePath": "pages/demo/demo",
      "text": "demo",
      "iconPath": "/static/imgs/icon3.png",
      "selectedIconPath": "/static/imgs/icon3.png"
    }

网络请求

WX小程序案例（二）：毒鸡汤列表-request-下拉-CSDN博客

自定义组件

可以复用的一块东西

新建

建个文件夹，直接建个component文件就行了

引入

在每个页面json文件中有

"usingComponents": {
    "Myheader":"/components/Myheader/Myheader"
  },

可以用了 

这是组件wxml中的内容

<text>我是myheader组件</text>

传递属性

在定义时，组件的js文件属性中定义变量类别和默认值

  properties: {
    name:{
      type:String,
      value:"--------"
    }
  },

  <view class="small">
    自定义组件小标题{{name}}
  </view>

在实际应用的界面中就可以传递参数

<Myheader name="xxxxxxx">？？？？？</Myheader>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Android hilt使用

Android hilt使用

一&#xff0c;添加依赖库 添加依赖库app build.gradle.kts implementation("com.google.dagger:hilt-android:2.49")annotationProcessor("com.google.dagger:hilt-android:2.49")annotationProcessor("com.google.dagger:hilt-compiler:2.49"…
阅读更多...
对偶问题笔记（1）

对偶问题笔记（1）

目录 1 从 Lagrange 函数引入对偶问题2. 强对偶性与 KKT 条件3. 对偶性的鞍点特征 1 从 Lagrange 函数引入对偶问题 考虑如下优化问题 { min ⁡ f 0 ( x ) s . t f i ( x ) ≤ 0 , i 1 , ⋯ , p , h j ( x ) 0 , j 1 , ⋯ , q , x ∈ Ω , \begin{align} \begin{cases}\min…
阅读更多...
Pipelined-ADC设计一：序言

Pipelined-ADC设计一：序言

现在是2023年12月18日&#xff0c;准备开新帖&#xff0c;设计一个 流水线型 模数转换器&#xff08; Pipelined-ADC &#xff09;。记录帖&#xff0c;后续会放在咸鱼。同步记录&#xff0c;谨防盗用。 初定指标&#xff1a;12位50Mhz&#xff0c;采用2.5bit每级结构&#xff…
阅读更多...
奇数魔方阵

奇数魔方阵

魔方阵的生成方法为第0行中间位置为1 2开始的其余n*n-1个数&#xff0c;依次按以下规则存放 1.下一个元素存放在当前元素的上一行、下一列 2.如果上一行下一列已有元素&#xff0c;则下一个元素存放的位置为当前列的下一行 3.在找上一行、下一行或下一列的时候&#xff0c;把矩…
阅读更多...
计算机组成原理——校验码

计算机组成原理——校验码

计算机组成原理学习笔记——校验码-CSDN博客 校验码——海明码及码距&#xff0c;码距_海明码的码距是多少-CSDN博客 1 下列关于码距与检错与纠错能力的描述中正确的是 &#xff08;ABC&#xff09; &#xff08;多选&#xff09; A. 码距为1的编码不具备任何检错能力 B. 码…
阅读更多...
可能是全网最详细的线性回归原理讲解！！！

可能是全网最详细的线性回归原理讲解！！！

ps&#xff1a;此处的特征向量有别于线性代数中的特征向量&#xff0c;准确来讲这里的特征向量是一个样本的所有属性值。 用梯度下降慢慢逼近这个最小值点 本文图片来源于可能是全网最详细的线性回归原理讲解&#xff01;&#xff01;&#xff01;_哔哩哔哩_bilibili 可以结合…
阅读更多...
C++学习笔记（十二）------is_a关系（继承关系）

C++学习笔记（十二）------is_a关系（继承关系）

你好&#xff0c;这里是争做图书馆扫地僧的小白。 个人主页&#xff1a;争做图书馆扫地僧的小白_-CSDN博客 目标&#xff1a;希望通过学习技术&#xff0c;期待着改变世界。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 文章目录 前言 一、继承关系…
阅读更多...
基于Levenberg-Marquardt算法改进的BP神经网络-公式推导及应用

基于Levenberg-Marquardt算法改进的BP神经网络-公式推导及应用

Levenberg-Marquardt算法是一种用于非线性最小化问题的优化算法&#xff0c;通常用于训练神经网络。它结合了梯度下降和高斯-牛顿方法的特点&#xff0c;旨在提高收敛速度和稳定性。下面是基于Levenberg-Marquardt算法改进的反向传播&#xff08;BP&#xff09;神经网络的详细推…
阅读更多...
[Kubernetes]3. k8s集群Service详解

[Kubernetes]3. k8s集群Service详解

在上一节讲解了k8s 的pod,deployment,以及借助pod,deployment来部署项目,但会存在问题: 每次只能访问一个 pod，没有负载均衡自动转发到不同 pod访问还需要端口转发Pod重创后IP变了，名字也变了针对上面的问题,可以借助Service来解决,下面就来看看Service怎么使用 一.Service详…
阅读更多...
转发一篇计算机论文

转发一篇计算机论文

最近看到一篇雷军老师在1992年的一篇计算机论文&#xff0c;个人看了对计算机科学从另外一个角度又多了一层理解&#xff0c;感觉很有收获&#xff0c;鉴于网上的图片看起来不清楚&#xff0c;本人特地到中国知网上去下载了这篇论文&#xff0c;希望给有心学习的人一点帮助。我…
阅读更多...
Goland如何进行Debug断点调试

Goland如何进行Debug断点调试

1. 进入编辑 2. 进行编辑 3. 调试运行 将鼠标移到按钮上&#xff0c;即显示其功能与快捷键 4. 常用调试快捷键 按键说明F7单步执行(进入方法)F8单步执行(不进入方法)F9继续执行
阅读更多...
adb详细教程（五）-复制文件、截屏、录屏

adb详细教程（五）-复制文件、截屏、录屏

adb对于安卓移动端来说&#xff0c;是个非常重要的调试工具。在进行安卓端的开发或测试过程中&#xff0c;有时需要了截屏或录屏&#xff0c;在设备上操作完成后再将文件导入电脑非常繁琐。​如果使用adb指令在进行截屏或录屏则会便捷许多。此篇文章介绍了如何使用adb指令进行文…
阅读更多...
蓝桥杯time模块常用操作

蓝桥杯time模块常用操作

#导入time模块import time #获取时间戳 start_time time.time () print ( "start_time ", start_time) time .sleep ( 3) end_time time.time () print ( "end_time ", end_time)#计算运行时间 print("运行时间 { :.0f } ".format(end_time …
阅读更多...
[德人合科技]——设计公司 \ 设计院图纸文件数据 | 资料透明加密防泄密软件

[德人合科技]——设计公司 \ 设计院图纸文件数据 | 资料透明加密防泄密软件

国内众多设计院都在推进信息化建设&#xff0c;特别是在异地办公、应用软件资产规模、三维设计技术推广应用以及协同办公等领域&#xff0c;这些加快了业务的发展&#xff0c;也带来了更多信息安全挑战&#xff0c;尤其是对于以知识成果为重要效益来源的设计院所&#xff0c;防…
阅读更多...
STL技术概述与入门

STL技术概述与入门

STL技术概述与入门 STL介绍STL六大组件初识容器算法迭代器1. vector存放内置数据类型2. Vector存放自定义数据类型3. Vector容器的嵌套 ✨ 总结 参考博文1&#xff1a;STL技术——STL概述和入门 参考博文2&#xff1a;&#xff1c;C&#xff1e;初识STL —— 标准模板库 STL介…
阅读更多...
QT QIFW Linux下制作软件安装包

QT QIFW Linux下制作软件安装包

一、概述 和windows的操作步骤差不多&#xff0c;我们需要下装linux下的安装程序&#xff0c;然后修改config.xml、installscript.qs和package.xml文件。 QT QIFW Windows下制作安装包(一)-CSDN博客 一、下装QIFW 下装地址&#xff1a;/official_releases/qt-installer-fra…
阅读更多...
基于YOLOv7算法和的高精度实时头盔目标检测识别系统（PyTorch+Pyside6+YOLOv7）

基于YOLOv7算法和的高精度实时头盔目标检测识别系统（PyTorch+Pyside6+YOLOv7）

摘要&#xff1a;基于YOLOv7算法的高精度实时头盔目标检测系统可用于日常生活中检测与定位工人是否佩戴头盔&#xff0c;此系统可完成对输入图片、视频、文件夹以及摄像头方式的目标检测与识别&#xff0c;同时本系统还支持检测结果可视化与导出。本系统采用YOLOv7目标检测算法…
阅读更多...
Web前端-HTML（常用标签）

Web前端-HTML（常用标签）

文章目录 1. HTML常用标签1.1 排版标签1&#xff09;标题标签h (熟记)2&#xff09;段落标签p ( 熟记)3&#xff09;水平线标签hr(认识)4&#xff09;换行标签br (熟记)5&#xff09;div 和 span标签(重点)6&#xff09;排版标签总结 1.2 标签属性1.3 图像标签img (重点)1.4 链…
阅读更多...
【04】GeoScene导出海图或者电子航道图000数据成果

【04】GeoScene导出海图或者电子航道图000数据成果

1创建一个带有覆盖面和定义的产品 如果你没有已存在的S-57数据&#xff0c;你可以通过捕捉新的产品覆盖范围&#xff08;多边形产品范围&#xff09;及其所需的产品定义信息&#xff08;产品元数据&#xff09;来为新产品创建基础。 注&#xff1a; 如果你已经有一个S-57数据…
阅读更多...
可视化 | 基于CBDB的唐代历史人物分析

可视化 | 基于CBDB的唐代历史人物分析

文章目录 &#x1f4da;人口统计&#x1f407;唐朝历年人数统计&#x1f407;唐朝人口金字塔&#x1f407;唐朝历年出生死亡人数统计&#x1f407;唐朝人口分布&#x1f407;享年数据分布 &#x1f4da;唐朝人口迁徙&#x1f407;人口迁徙&#x1f407;生卒地变迁 &#x1f4da…
阅读更多...
最新文章

Copyright @ 2022~2023