微信小程序之自定义组件（OA项目个人主页及投票）

news2024/12/23 4:21:28

前言

本期为大家带来微信小程序自定义组件及OA项目的个人主页布局和投票

一.自定义组件

1.学习官网

自定义组件 / 介绍 (qq.com)

2.如何自定义组件

 2.1 创建目录

在根目录下依次创建components/tabs，然后在tabs中新建Component

创建好后会自动为我们生成对应的文件

2.2添加配置文件(关闭检查)

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

在根目录下的project.config.json中的setting中添加上面的代码 

2.3 添加组件内容

在 wxml 文件中编写组件模板

<view class="inner">
  {{innerText}}
</view>
<slot></slot>

2.4 设置组件样式

在wxss中设置样式

.inner {
  color: red;
}

2.5 在component中注册组件

在js文件中的component中的组件属性列表中注册组件

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

3.使用自定义组件

3.1使用组件tabs

将组件配置添加到要使用的模块的json中

"usingComponents": {
    "tabs": "/components/tabs/tabs"
  }

 3.2 在wxml中进行使用

这里默认在meeting/list.wxml中使用

<!--pages/meeting/list/list.wxml-->
<text>pages/meeting/list/list.wxml</text>
<tabs inner-text="YU"></tabs>

 

注：

  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

  • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
  • 使用 usingComponents 时会多一些方法，如 selectComponent 。
  • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

4.自定义组件实战（OA项目）

4.1 分别定义好模板和样式

<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
            <view style="margin-bottom:5rpx">{{item}}</view>
            <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

.tabs {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    border-bottom: 1px solid #efefef;
    padding-bottom: 20rpx;
}

.tabs_title {
    /* width: 400rpx; */
    width: 90%;
    display: flex;
    font-size: 9pt;
    padding: 0 20rpx;
}

.title_item {
    color: #999;
    padding: 15rpx 0;
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.item_active {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
}

.item_active1 {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
    border-bottom: 6rpx solid #333;
    border-radius: 2px;
}

4.2 在组件属性中定义属性和属性方法

properties: {
    tabList:Object 
  },
methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }

4.3在list.wxml中进行使用

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

4.4 页面切换所需数据 

tabs:['会议中','已完成','已取消','全部会议'],lists: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ]

4.5 页面切换

通过tabsItemChange的方法进行一个页面的顶部导航栏切换

tabsItemChange(e){
    let tolists;
    if(e.detail.index==1){
        tolists = this.data.lists1;
    }else if(e.detail.index==2){
        tolists = this.data.lists2;
    }else{
        tolists = this.data.lists3;
    }
    this.setData({
        lists: tolists
    })
},

 4.5 页面布局

<view style="height: 60px;"></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">
  <text>到底啦</text>
</view>

页面样式

/* pages/meeting/list/list.wxss */
/* pages/meeting/list/list.wxss */
.section{
  color: #aaa;
  display: flex;
  justify-content: center;
}
 
.list-info {
  color: #aaa;
}
 
.list-num {
  color: #e40909;
  font-weight: 700;
}
 
.join {
  padding: 0px 0px 0px 10px;
  color: #aaa;
}
 
.state {
  margin: 0px 6px 0px 6px;
  border: 1px solid #93b9ff;
  color: #93b9ff;
}
 
.list-tag {
  padding: 3px 0px 10px 0px;
  display: flex;
  align-items: center;
}
 
.list-title {
  display: flex;
  justify-content: space-between;
  font-size: 11pt;
  color: #333;
  font-weight: bold;
 
 
}
 
.list-detail {
  display: flex;
  flex-direction: column;
  margin: 0px 0px 0px 15px;
}
 
.video-img {
  width: 80px;
  height: 80px;
}
 
.list {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #6b6e74;
  padding: 10px;
}
 
.mobi-text {
  font-weight: 700;
  padding: 15px;
}
 
.mobi-icon {
  border-left: 5px solid #e40909;
}
 
.mobi-title {
  background-color: rgba(158, 158, 142, 0.678);
  margin: 10px 0px 10px 0px;
}
 
.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}
 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
 
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.usermotto {
  margin-top: 200px;
}

 效果展示

二.OA项目布局

1.个人主页

1.1 页面布局

<!--pages/ucenter/index/index.wxml-->
<view class="userInfo">
  <image class="userInfo-head" src="/static/persons/1.png"></image>
  <view class="userInfo-login">ChatYU</view>
  <text class="userInfo-set">修改></text>
</view>
 
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我发布的会议</text>
    <view class="cell-items-num">1</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我主持的会议</text>
    <view class="cell-items-num">1</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">投票的会议</text>
    <view class="cell-items-num">2</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">未投票的会议</text>
    <view class="cell-items-num">2</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我参与的会议</text>
    <view class="cell-items-num">5</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我审核的会议</text>
    <view class="cell-items-num">4</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
 
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">消息</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
    <text class="cell-items-title">设置</text>
 
  </view>
</view>

1.2 页面样式

/* pages/ucenter/index/index.wxss */
.userInfo{
  padding: 5px 0px 20px 10px;
  display: flex;
  align-items: center;
}
.userInfo-head{
  height: 80px;
  width: 80px;
  border: 5px solid rgb(194, 141, 26);
}
.userInfo-login{
  width: 245px;
  padding-left: 10px;
  font-weight: 700;
}
.userInfo-set{
  margin-right:20rpx ;
  color: rgb(196, 170, 56);
}
.cells{
  border-top: 8px solid rgb(238, 238, 238);
}
.cell-items{
  
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(238, 238, 238);
  padding-top: 20px;
  padding-bottom: 20px;
}
.cell-items-icon{
  height: 25px;
  width: 25px;
  padding: 0px 10px 0px 5px;
}
.cell-items-title{
  width: 340px;
}
.cell-items-num{
  width: 30px;
  font-weight: 700;
  color: rgb(218, 31, 31);
}
.cell-items-detail{
  color: rgb(146, 151, 155);
}

1.3 效果展示

 

2.投票

2.1 页面布局

<!--pages/vote/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view class="head">会议投票</view>
<view>
  <swiper indicator-dots="true" autoplay="true">
          <swiper-item>
            <image src="/static/meeting/2.png"></image>
          </swiper-item>
          <swiper-item>
            <image src="/static/meeting/会议.jpg"></image>
          </swiper-item>
      </swiper>
</view>
<view class="container">
  <!-- 左边部分，会议投票 -->
  <view class="left-section">
    <view class="weui-view1">会议投票</view>
    <!-- 这里放置会议投票的内容 -->
  </view>

  <!-- 右边部分，包括会议标题、投票事件、会议内容 -->
  <view class="right-section">
    <!-- 会议标题 -->
    <view class="item">
      <input class="weui-input1" auto-focus placeholder="会议标题"/>
      <!-- 这里放置会议标题的内容 -->
    </view>

    <!-- 投票事件 -->
    <view class="item">
      <input class="weui-input2" auto-focus placeholder="投票事件"/>
      <!-- 这里放置投票事件的内容 -->
    </view>

    <!-- 会议内容 -->
    <view class="item">
      <input class="weui-input3" auto-focus placeholder="会议内容"/>
      <!-- 这里放置会议内容的内容 -->
    </view>
  </view>
</view>
<view class="container">
  <!-- 左边部分，会议投票 -->
  <view class="left-section1">
    <view class="weui-view2">会议投票</view>
    <!-- 这里放置会议投票的内容 -->
  </view>

  <!-- 右边部分，包括会议标题、投票事件、会议内容 -->
  <view class="right-section">
    <!-- 会议标题 -->
    <view class="item">
      <input class="weui-input1" auto-focus placeholder="投票选项1"/>
      <!-- 这里放置会议标题的内容 -->
    </view>

    <!-- 投票事件 -->
    <view class="item">
      <input class="weui-input2" auto-focus placeholder="投票选项2"/>
      <!-- 这里放置投票事件的内容 -->
    </view>

  </view>
</view>
<view class="to_metting">发起投票</view>

2.2 页面样式

/* pages/vote/list/list.wxss */
.head{
  text-align: center;
  width: 313px;
  border:3px solid rgb(46, 133, 155);
  background-color: aqua

}
.container {
  padding: 0;
  display: flex;
  flex-direction: row;
}

.left-section {
  border: 2px solid rgb(10, 216, 231);
  width: 100px;
  height: 155px;
  text-align: center;
  background-color: #13bb91; /* 左边部分的背景颜色 */
}
.left-section1 {
  border: 2px solid rgb(22, 221, 128);
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #10d9f3; /* 左边部分的背景颜色 */
}

.right-section {
  flex: 1; /* 长占一份 */
  padding: 20rpx; /* 右边部分的内边距 */
}

.item {
  
  margin-bottom: 10rpx; /* 项目之间的下边距 */
}

.weui-view1{
  margin-top: 60px;
}

.weui-view2{
  margin-top: 35px;
}

.weui-input1{
  height: 45px;
  border: 2px solid rgb(38, 196, 207);
}
.weui-input2{
  height: 45px;
  border: 2px solid rgb(218, 170, 14);
}
.weui-input3{
  height: 45px;
  border: 2px solid rgb(21, 167, 40);
}
.to_metting{
  border: 2px solid rgb(10, 216, 231);
  display: flex;
  justify-content: center; /* 水平居中 */
  background-color: rgb(21, 167, 40);
}

2.3 效果演示

今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！ 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微软Azure OpenAI支持数据微调啦！可打造专属ChatGPT

微软Azure OpenAI支持数据微调啦！可打造专属ChatGPT

10月17日&#xff0c;微软在官网宣布&#xff0c;现在可以在Azure OpenAI公共预览版中对GPT-3.5-Turbo、Babbage-002 和Davinci-002模型进行数据微调。 使得开发人员通过自己的数据集&#xff0c;便能打造独一无二的ChatGPT。例如&#xff0c;通过海量医疗数据进行微调&#x…
阅读更多...
零基础搭建个人网站详细流程

零基础搭建个人网站详细流程

最近两天&#xff0c;为了给自己的工具类APP备案&#xff0c;买了阿里云ECS和域名。虽然很想说离线工具APP不用联网&#xff0c;但是现实就很无语。言归正传&#xff0c;既然买了总不能将它们闲置着&#xff0c;就诞生了建站的想法&#xff0c;至少还能放个用户协议和隐私协议。…
阅读更多...
潮玩宇宙：收藏、交流与竞技的数字乐园

潮玩宇宙：收藏、交流与竞技的数字乐园

最近爆火的新项目潮玩宇宙&#xff0c;想必有很多人入场了&#xff0c;代理商宣传投资147一个月回本&#xff0c;确实是现在做到了&#xff0c;现在平台一颗宝石的价格已经超过美金了&#xff0c;还有一大部分人在等待进场&#xff0c;潮玩宇宙旗下奖券世界和养猪农场已经做了有…
阅读更多...
学习编程语言需要熟悉库函数吗?

学习编程语言需要熟悉库函数吗?

学习编程语言需要熟悉库函数吗? 我想答案肯定是需要的。 但不是盲目的挨个去记&#xff0c;几乎各个语言的库函数都极为丰富&#xff0c;逐个记忆的话是十分劝退的&#xff0c;而且也不可能全部熟悉&#xff0c;到用的时候该忘还是忘。最近很多小伙伴找我&#xff0c;说想要一…
阅读更多...
Python数据分析实战-使用replace方法精确匹配替换某列的值（附源码和实现效果）

Python数据分析实战-使用replace方法精确匹配替换某列的值（附源码和实现效果）

实现功能 将DataFrame中某一列的指定的两个值分别替换为0和1&#xff0c;而将其他值替换为2 实现代码 import pandas as pd# 创建一个示例DataFrame data {A: [1, 2, 3, 4, 5],B: [a, b, c, d, e]} df pd.DataFrame(data)# 打印替换前的DataFrame print("替换前的Dat…
阅读更多...
[游戏开发][Unity] ScriptableObject数据创建与各种加载方式

[游戏开发][Unity] ScriptableObject数据创建与各种加载方式

前言 ScriptableObject支持把类对象数据序列化成Unity asset文件&#xff0c;同时支持反序列化成类对象。本文章通过两个案例讲解ScriptableObject的使用方式&#xff0c;第一个是简单案例&#xff0c;序列化简单的bool值和Sting数据。第二个是复杂案例&#xff0c;在类对象里嵌…
阅读更多...
2.IDEA的安装使用指南

2.IDEA的安装使用指南

学习Java的第二步应该是从IDEA下手&#xff0c;这篇博文介绍了它的安装及使用&#xff0c;希望大家看完后可以独立安装 ~ 文章目录 一、下载安装包二、安装 IDEA三、IDEA 初步上手 一、下载安装包 安装包可以从官网下载&#xff0c;也可以直接私信我拿取。这里主要介绍如何在官…
阅读更多...
了解远程连接工具

了解远程连接工具

什么是远程连接 远程连接就是在远程连接另外一台计算机。当某台计算机开启了远程桌面连接功能后我们就可以在网络的另一端控制这台计算机了&#xff0c;通过远程桌面功能我们可以实时的操作这台计算机&#xff0c;在上面安装软件&#xff0c;运行程序&#xff0c;所有的一切都…
阅读更多...
TOPDON获评2023年度“汽车后市场科技创新企业”，研发实力被认可

TOPDON获评2023年度“汽车后市场科技创新企业”，研发实力被认可

近期&#xff0c;由《环球时报》社、中国企业网主办的2023(第六届)中国经济大会在北京召开&#xff0c;本次大会以“迈向高质量&#xff0c;问道新发展”为主题&#xff0c;政商产学研嘉宾同襄盛会&#xff0c;交流发展理念&#xff0c;分享创新经验&#xff0c;为推动产业变革…
阅读更多...
最佳买股票的时机------题解报告

最佳买股票的时机------题解报告

题目&#xff1a; 暴力双循环会时间超限 一次循环&#xff0c;不断更新min和sum值 时间复杂度为O(n),空间复杂度为O(1) 写完之后看了一眼题解&#xff0c;发现没有更好的方法 public int maxProfit(int[] prices) {int sum 0,minprices[0];for(int i1;i <prices.length;i…
阅读更多...
在Kubernetes(k8s)上部署整个SpringCloud微服务应用

在Kubernetes(k8s)上部署整个SpringCloud微服务应用

文章目录 项目准备打成使用Docker打成镜像准备Docker仓库打包项目为Docker镜像 部署应用到k8s创建nfs挂载目录创建一些基本资源创建命名空间创建拉取镜像的secret创建java运行环境的profile 部署mysql创建持久化的pv和pvc创建mysql root密码的secret创建mysql配置文件部署有状态…
阅读更多...
Ubuntu小知识总结

Ubuntu小知识总结

Ubuntu相关的小知识总结 Ubuntu系统下修改用户开机密码Vmware虚拟机和主机之间复制、粘贴内容、拖拽文件的详细方法问题描述Vmware tools灰色不能安装解决方法小知识点&#xff1a;MarkDown的空格 Ubuntu系统下修改用户开机密码 在 Ubuntu 中修改用户密码 —— 通过命令行 在 U…
阅读更多...
Python 机器学习入门之K-Means聚类算法

Python 机器学习入门之K-Means聚类算法

系列文章目录 第一章 Python 机器学习入门之线性回归 K-Means聚类算法 系列文章目录前言一、K-Means简介1、定义2、例子3、K-Means与KNN 二、 K-Means实现1、步骤2、优化2.1 初始化优化之K-Means2.2 距离优化之elkan K-Means 三、优缺点1、优点2、缺点 前言 学完K近邻算法&a…
阅读更多...
UWB十个知识点

UWB十个知识点

UWB是一直被基于厚望的高精度定位技术 1&#xff1a;定位技术及UWB特点 位置空间感知技术包括了GNSS、RFID、蓝牙和UWB&#xff0c;在室内和区域空间测量最具技术优势的技术是UWB。 GNSS是广域定位技术&#xff0c;室内以及建筑物旁边等场景&#xff0c;GNSS无法实现定位&am…
阅读更多...
PHP-FFMpeg 操作音视频

PHP-FFMpeg 操作音视频

✨ 目录 &#x1f388; 安装PHP-FFMpeg&#x1f388; 视频中提取一张图片&#x1f388; 视频中提取多张图片&#x1f388; 调整视频大小&#x1f388; 视频添加水印&#x1f388; 生成音频波形&#x1f388; 音频转换&#x1f388; 给音频添加元数据&#x1f388; 拼接多个音视…
阅读更多...
印刷包装经营小程序商城的作用是什么

印刷包装经营小程序商城的作用是什么

印刷包装业的市场需求度非常高&#xff0c;如礼品盒、标签、购物袋、企业宣传物料、周边等大小服务&#xff0c;线下各城市从业者与线上行业电商数量也很多。 然而随着线下竞争激烈、用户线上消费度提升&#xff0c;同时线上第三方平台入驻商家面临抽成/入驻费/流量费、难以打…
阅读更多...
最近邻插值的原理及实现

最近邻插值的原理及实现

1. 介绍 插值算法一般用来做上采样和下采样，最邻近插值算法，是插值算法中最简单的一种。 最邻近插值：将每个目标像素找到距离它最近的原图像素点，然后将该像素的值直接赋值给目标像素。 优点： 实现简单，计算速度快 缺点：插值结果缺乏连续性，可能会产生锯齿状的边缘，对…
阅读更多...
docker 配置mongoDB

docker 配置mongoDB

## 拉取镜像 docker pull mongo## 设置默认账号密码 test:test 默认数据 test docker run -d --name mongo-container -e MONGO_INITDB_ROOT_USERNAMEtest -e MONGO_INITDB_ROOT_PASSWORDtest -e MONGO_INITDB_DATABASEtest -p 27017:27017 mongo
阅读更多...
nginx优先级和匹配方式

nginx优先级和匹配方式

在http模块有server server中才有location location匹配的是uri Nginx正则表达式&#xff1a; ^&#xff1a;字符串的起始位置 $&#xff1a;字符串的结束位置 *&#xff1a;匹配所有 &#xff1a;匹配前面的字符一次或多次 &#xff1f;&#xff1a;匹配前面的字符0次或…
阅读更多...
redhat配置本地yum源（超详细，超简单）

redhat配置本地yum源（超详细，超简单）

目录 ​编辑 1、硬件配置 2、配置本地yum源 1、硬件配置 注意这里要使用is
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023