微信小程序（由浅到深）

news2024/12/28 4:23:51

文章目录

一. 项目基本配置

1. 项目组成

在这里插入图片描述

2. 常见的配置文件解析

  • project.config.json：项目配置文件, 比如项目名称、appid等 ； 配置详情
  • sitemap.json：小程序搜索相关的；配置详情
  • app.json：全局配置
  • page.json：页面配置；
  • app.js 可共享全局属性值

3. app.json全局的五大配置

  • pages: 页面路径列表
    • 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
    • 小程序中所有的页面都是必须在pages中进行注册的。
  • window: 全局的默认窗口展示
    • 用户指定窗口如何展示, 其中还包含了很多其他的属性
  • tabBar: 顶部tab栏的展示
  • 详情配置参考
{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#f6f866",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#777",
    "selectedColor": "#1cb9ce",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "主页面”},
      {
        "pagePath": "pages/day02/day02",
        "text": "home"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.单个页面中的page配置

  • 可直接新建page 并回车，自动添加到pages中 或者在pages中直接指定
    在这里插入图片描述

  • 同时每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

    • 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项
    • 具体配置参考官网
{
  "usingComponents": {},
  "navigationBarTitleText": "主页面",
  "backgroundTextStyle": "dark",  背景文字颜色
  "enablePullDownRefresh": true,  允许下拉刷新
  "backgroundColor":"#f70", 		背景颜色
  "onReachBottomDistance": 100     距离底部多少触发事件
}

  // 下拉刷新， 获取最新的数据
  onPullDownRefresh() {
    console.log('监听下拉刷新');
    // 停止下拉刷新
    setTimeout(() => {
      // 异步请求
      wx.stopPullDownRefresh({
        success: (res) => {
          console.log('停止', res)
        },
      })
    }, 1000)

  },
  // 监听页面滚动到底部
  onReachBottom() {
    console.log('滚动到底部多少距离时加载更多~~  100px');
    this.setData({
      listCounter: this.data.listCounter + 30
    })
  }

5. App函数

  • App()实例可以全局共享的（单例对象），所以可以将一些共享数据放在这里；
  • App函数的参数

作用一：

  • 判断群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开
    • 在onLaunch和onShow生命周期回调函数中的options参数，判断scene值
    • 文档参考

作用二：定义全局App的数据

  • app.js
 // app实例可以共享全局数据
  globalData: {
    userInfo: null,
    token: 'Afjwt-12mandak-45'
  }
  • home.js
 onLoad() {
    const {
      globalData
    } = getApp() // 全局的app实例
    console.log(globalData.token);
    // 拿到token发送网络请求-页面初始化
    this.setData({
      globalData
    })
  },

作用三：生命周期函数

  • 在生命周期函数中，完成应用程序启动后的初始化操作
    • 完成登录操作，获取token
      在这里插入图片描述

6.tabBar配置

  • tabBar中只能配置最少 2 个、最多 5 个 tab 页签
  • 当渲染顶部 tabBar 时，不显示 icon，只显示文本
  • 更多配置参考官网
    在这里插入图片描述
{
    "pages": [
        "pages/hone/hone",
        "pages/Profile/Profile",
        "pages/experience/experience",
        "pages/skill/skill",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
            {"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
            {"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
            {"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
        ]
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

二. 基本语法，事件，单位

1. 语法

参考官网基本语法解释

  • 文本渲染
{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}
  • 条件渲染
wx:if=""
wx:elif=""
wx:else
hidden   // true 隐藏
  • 列表渲染
  • wx:key 针对不同的数组类型有不同的写法
    • 普通数组 wx:key="*this"
    • 数组对象 wx:key="字符串" 表示对象唯一属性
// 默认item就是数据 ，index是下标
wx:for="{{list}}"
wx:key="index"
	{{item}}
	{{index}}
  • 自定义列表渲染
定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

2. 事件

格式：<元素 bind事件名= “回调”>

  • 示例：<view bindtap="fn1"></view>
  • <switch bindchange="fn2"></switch>
  • 小程序中绑定事件，通过bind和capture关键字来实现。如 bindtap 和 capture-bind:tap，
  • bind 是事件冒泡外传，capture 是事件捕获里传。capture-bind只能用冒号形式。
  • 如果想阻止事件冒泡或捕获可通过catch来绑定事件。如catchtap，capture-catch:tap。
bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

在这里插入图片描述

  • 事件传参

    • 自定义参数 data-*
      在这里插入图片描述
      注意点: <view bindtap="handleTap(100)"></view> 小程序会以为 事件函数名称就是 “handleTap(100)” ，那么它就会去找“handleTap(100)” 这个函数 而不是 “handleTap”

  • mask传参
    在这里插入图片描述

  • 表单绑定

<input value="{{s1}}" bindinput="inputHd">
// js.js
inputHd(e){
 this.setData({s1:e.detail.value})  // 表单的值获取：e.detail.value
}
  • 事件对象属性
属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息的数组
  • target和currentTarget事件对象属性
属性类型说明
idString当前组件的id
datasetObject当前组件上由data-开头的自定义属性组成的集合
  • 区别

taget点击inter不能拿到dataset数据currentTarget可以拿到

在这里插入图片描述

3. 单位

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

三. 数据响应式修改

  1. WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层
  2. 小程序的渲染层和逻辑层分别由2个线程管理，两个线程的通信会经由微信客户端做中转

在这里插入图片描述

  • 数据修改必须调用 this.setData 同react一样
  • setData优化

四 . 内置组件

  • 内置组件参考

1. button

  • button组件中的 open-type属性
    • open-type用户获取一些特殊性的权限，可以绑定一些特殊的事件
  • 老旧版本获取用户信息
<button type="primary" bindgetuserinfo="getUserInfo" size="mini" open-type="getUserInfo">getUserInfo</button>

  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  • 新版本获取用户头像等信息
   <button bindtap="getUserProfile"> 获取头像昵称 </button>

  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  • 具体解析参考官网

2. image

  • image组件默认宽度320px、高度240px
  • image支持懒加载
  • mode 配置如下
模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，直到图片某一边碰到边界。
缩放aspectFill保持纵横比缩放图片，直到图片完全铺满边界。
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变

  • wx.chooseMedia获取本地图像展示
<button bindtap="hyImageUpload">选择图片上传</button>
<!-- 选择本地图片 -->
<image src="{{imageUrl}}"></image>

 hyImageUpload(){
    wx.chooseMedia({
      camera: 'image',
    }).then(res=>{
      this.setData({
        imageUrl:res.tempFiles[0].tempFilePath
      })
    })
  }

3. input

  • 支持双向绑定
<input type="text" model:value=" {{message}}"/>

4. 组件共有属性

  • 公共属性 ：参考官网
    • 属性名类型描述注解
      idString组件的唯一标示保持整个页面唯一
      classString组件的样式类在对应的 WXSS 中定义的样式类
      styleString组件的内联样式可以动态设置的内联样式
      hiddenBoolean组件是否显示所有组件默认显示
      data-*Any自定义属性组件上触发的事件时，会发送给事件处理函数
      bind* / catch*EventHandler组件的事件详见事件

五 . WXS使用

  • WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
  • 在WXML中是不能直接调用Page/Component中定义的函数的.
  • 但是某些情况, 可以使用函数来处理WXML中的数据(类似于Vue中的过滤器)，这个时候就使用WXS了
  • 必须利用es5语法
// 
<wxs module="format">
  function joinTgether(num) {
    return '￥' + num
  }
  // 必须模块化导出 
  module.exports={
    joinTgether:joinTgether
  }
</wxs>

<block wx:for="{{wxs}}" wx:key="*this">
  <button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>
  • 模块抽离utils 必须放在.wxs结尾的文件
<button>模块抽离wxs</button>
<wxs module="format" src="/utils_wxs/format.wxs"></wxs>
<block wx:for="{{wxs}}" wx:key="*this">
  <button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>

在这里插入图片描述

  • 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见；
  • 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现；
  • 其他使用参考官网

六，组件

6.1 全局与局部组件注册使用

  • 将页面拆分成一个个小的、可复用的组件，这样更加方便组织和管理，并且扩展性也更强
  • 在 .json 文件中进行自定义组件声明（将component 字段设为 true 可这一组文件设为自定义组件）：

在这里插入图片描述

  • 在需要使用的xx.json 文件中导入
{
  "usingComponents": {
    "sel-info": "/components/selection-info/sel-info"
  }
}
  • 自定义组件和页面所在项目根目录名 不能以“wx-”为前缀，否则会报错。
  • 全局组件在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件

6.2 组件样式

  • 组件内的样式 对 外部样式 的影响

    • 结论一：组件内的class样式，只对组件wxml内的节点生效, 对于引用组件的Page页面不生效。
    • 结论二：组件内不能使用id选择器、属性选择器、标签选择器
      在这里插入图片描述

  • 外部样式 对 组件内样式 的影响

    • 结论一：外部使用class的样式，只对外部wxml的class生效，对组件内是不生效
    • 结论二：外部使用了id选择器、属性选择器不会对组件内产生影响
    • 结论三：外部使用了标签选择器，会对组件内产生影响

  • 如何让class可以相互影响

    • 在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性。
    • styleIsolation有三个取值：
      • isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认取值）；
      • apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
      • shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置 了
  options: {
    // styleIsolation:"isolated"  // 默认值
    styleIsolation: "apply-shared"
  },

6.3 组件之间的通信

  • 文档参考
    在这里插入图片描述
    组件传递数据 - properties

在这里插入图片描述

  1. 定义子组件
<view style="width: 100%;height:80px;background-color: blueviolet;">
  <button>{{title}}</button>
  <view style="background-color: brown;margin-top: 10px; color: cornsilk;"> {{content}}</view>
</view>
  1. 子组件做数据接收并默认值
 properties: {
    title: {
      type: String,
      value: '默认标题'
    },content:{
      type:String,
      value:'默认内容'
    }
  },
  1. 父组件使用子组件并传递值
<props-data />
<view class="styl">
  <props-data title="通信" content='组件通信-传递参数-动态数据' />
</view>
<props-data title="z组件传参" content='组件通信-传递参数-动态数据' />

组件传递样式 -externalClasses

  • 在Component对象中，定义externalClasses属性
  • 在组件内的wxml中使用externalClasses属性中的class
  • 在页面中传入对应的class，并且给这个class设置样式
    在这里插入图片描述
    自定义事件
    在这里插入图片描述
    页面直接调用组件方法 相当于vue中ref
    • 可在父组件里调用 this.selectComponent ，获取子组件的实例对象。
    • 调用时需要传入一个匹配选择器 selector，
      在这里插入图片描述

6.4 单个插槽的使用

  • 组件的插槽也是为了让我们封装的组件更加具有扩展性

在这里插入图片描述

  • 注意slot 不支持默认值 可以利用兄弟选中器解决

在这里插入图片描述

  1. 子组件预留插槽
<view class="myslot">
  <view class="header">header</view>
  <!-- 小程序插槽不支持默认值 -->
  <view class="content">
    <slot></slot>
  </view>
  <view class="default">兄弟选择器解决默认值</view>
  <view class="footer">footer</view>
</view>
  1. 父组件传递结构
<my-slot>
  <button>按钮</button>
</my-slot>
<my-slot>
  <button size="mini" type="primary">default样式</button>
</my-slot>
<my-slot>
</my-slot>
  1. 兄弟选择器解决默认值问题
.default{
  display: none;
}
.content:empty + .default{
  display: block;
}

6.5 多个插槽的使用

在这里插入图片描述

  1. 子组件预留插槽
<view class="slot">
  <view class="t">
    <text >上插槽</text> : 
     <slot name="t"></slot>
  </view>
  <view class="c">
    <text>中间插槽</text> : 
    <slot name="c"></slot>
  </view>
  <view class="b">
    <text>下插槽</text> : 
    <slot name="b"></slot>
  </view>
</view>
  1. 允许可以定义多个插槽
Component({
  // 允许定义多个插槽
  options: {
    multipleSlots: true
  },
})
  1. 父组件传递结构

<more-slot>
  <text slot="t">上插入</text>
  <text slot="c">中间插入</text>
  <text slot="b">下插入</text>
</more-slot>

6.6 混入

  • behaviors 是用于组件间代码共享的特性，类似于Vue中的 “mixins”。
    • 每个 behavior 可以包含一组属性、数据、生命周期函数和方法；
    • 组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用；
    • 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior ；
    • 文档参考
  1. 编写混入
export const counterMinxin = Behavior({
  data: {
    counter: 100
  },
  methods: {
    add() {
      //  加一修改 ，不应该使用++，这会导致counter在修改this..data.counter也在修改
      this.setData({
        counter: this.data.counter + 1
      })
    }
  }
})
  1. 使用
import { counterMinxin } from "../../behaviors/counter"
Component({
  behaviors: [counterMinxin],
})

6.7 组件生命周期

  • 组件的的生命周期在 lifetimes 字段内进行声明
  • 组件生命周期文档参考
Component({
  behaviors: [counterMinxin],
  lifetimes:{
    created(){
      console.log('组件被创建');
    },
    attached(){
      console.log('组件添加到dom树中');
    },
    detached(){
      console.log('组件被删除');
    }
  }
})

6.8 数据侦听

文档参考链接

七 .生命周期

7.1.应用生命周期

应用生命周期钩子函数

属性说明
onLaunch生命周期回调——监听小程序初始化。
onShow生命周期回调——监听小程序启动或切前台。
onHide生命周期回调——监听小程序切后台。
onError错误监听函数。
  • 参数对象
    • 一般放在生命周期钩子函数的第一个参数。onLaunch钩子函数的参数对象为
      在这里插入图片描述

7.2 页面生命周期

  • 文档参考
属性说明
onLoad生命周期回调—监听页面加载
onShow生命周期回调—监听页面显示
onReady生命周期回调—监听页面初次渲染完成
onHide生命周期回调—监听页面隐藏
onUnload生命周期回调—监听页面卸载
onPullDownRefresh监听用户下拉动作
onReachBottom页面上拉触底事件的处理函数
onShareAppMessage用户点击右上角转发
onShareTimeline用户点击右上角转发到朋友圈
onAddToFavorites用户点击右上角收藏
onPageScroll页面滚动触发事件的处理函数
onResize页面尺寸改变时触发，详见 响应显示区域变化
 // 1. 页面路径 
 pages/index/index?id=10086&name='admin'
 // 2. onLoad 获取参数
 onLoad(query){}

7.3.组件生命周期

  • 文档参考
属性说明
created组件生命周期函数 - 在组件实例刚刚被创建时执行，注意此时不能调用 setData )
attached组件生命周期函数 - 在组件实例进入页面节点树时执行)
ready组件生命周期函数 - 在组件布局完成后执行)
moved组件生命周期函数 - 在组件实例被移动到节点树另一个位置时执行)
detached组件生命周期函数 - 在组件实例被从页面节点树移除时执行)

八 . API解析

8.1网络请求

  • 网络请求: wx.request(Object object)
  • 官网参考
  wx.request({
      url: "api",
      data: {
        page: 1
      },
      success: res => {
        console.log(res);
      },
      fail: err => {}
    })
  • 封装

//0. 封装成函数
export function hyRequest(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: res => {
        resolve(res.data)
      },
      fail: reject
    })
  })
}

//0. 类的方法封装
class hyService {
  request(options) {
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        success: res => {
          resolve(res.data)
        },
        fail: reject
      })
    })
  }
  get(options) {
    return this.request({ ...options, method: 'GET'})
  }
  post(options) {
    return this.request({
      ...options,
      method: 'POST'
    })
  }
}
export const serviceResponse = new hyService()
// 1. 导入
import {hyRequest} from '../../service/request'
// 2. 使用封装调用api
  hyRequest({url:"http://123.207.32.32:1888/api/city/all"}).then(res=>{
      console.log(res);
    })

8.2 展示弹窗效果

  • 具体配置参考在这里插入图片描述

8.3 获取设备|位置信息

  • 获取当前设备的信息，用于手机信息或者进行一些适配工作wx.getSystemInfo(Object object)
  • 官网参考
  • 获取用户的位置信息，以方便给用户提供相关的服务wx.getLocation(Object object) 
reqInfo() {
    // 获取设备信息
    // 我们需要经常获取当前设备的信息，用于手机信息或者进行一些适配工作
    wx.getSystemInfo({
      success: arr => {
        console.log(arr);
      }
    }),
    wx.getLocation({
      success:err=>{
        console.log(err);
      }
    })
  }
  • 注意获取位置信息需要相关权限
  • 配置参考
 "permission": {
    "scope.userLocation": {
      "desc": "位置信息将用于小程序位置接口的效果展示"
    }
  }

8.4 Storage存储

  • 同步存取数据的方法：
    • wx.setStorageSync(string key, any data)
    • wx.getStorageSync(string key)
    • wx.removeStorageSync(string key)
    • wx.clearStorageSync()
  • 异步存储数据的方法：
    • wx.setStorage(Object object)
    • wx.getStorage(Object object)
    • wx.removeStorage(Object object)
    • wx.clearStorage(Object object)
  • 具体使用参考

8.5 页面跳转

  • 通过navigator组件 和 通过wx的API跳转
  • 路由跳转参考配置
    在这里插入图片描述
    页面跳转 - navigateTo
    注意 跳转的页面是tarBar内的页面，需要使用wx.switchTab({})
 navigateTo() {
    // 跳转的页面是tarBar内的页面，需要使用wx.switchTab({}) 
    wx.navigateTo({
      // url: '/navPage/navigateTo/index',
      // 传参
      url: '/navPage/navigateTo/index?name=admin',
    })
  }
  • 接受页面跳转的参数
Page({
  // options接受路径参数
  onLoad(options) {
    console.log(options);
  },
})

8.6 回退页面传参

  • 主页面
Page({
  navigateTo() {
    // 方式二
    wx.navigateTo({
      url: '/navPage/navigateTo/index?name=admin',
      events: {
        backEvent(data) {
          console.log('接受跳转的参数', data);
        }
      }
    })
  }
})
  • 跳转的页面
Page({
  up() {
    wx.navigateBack()
    // //  传递数据给上一级
    // const pages = getCurrentPages()
    // //读取最后一个页面,的实例
    // const prePage = pages[pages.length - 2]
    // // 设置上一个页面的数据
    // prePage.setData({
    //   message: 'admin'
    // })
    // console.log(pages);

    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('backEvent', {
      name: 'admin',
      pad: 'password'
    })
  },
  // 回退过多可以直接在onLoad里面设置
  onUnload() {
    const pages = getCurrentPages()
    const prePage = pages[pages.length - 2]
    prePage.setData({
      message: 'admin',
      username: 'password'
    })
  },
})

九 .登录流程

  • 配置参考
    在这里插入图片描述
    openid: 用户唯一标识
    session_key: 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥
// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        const code = res.code
        wx.request({
          url: 'url',
          data: {
            code
          },
          method: 'POST',
          success: res => {
            const token = res.data.token
            wx.setStorageSync('token', token)
          }
        })
      }
    })
  },
})
  • 参考文章
    • 微信小程序开发（超详细保姆式教程）
    • coderwhy

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

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

相关文章

钓鱼攻击：相似域名识别及如何有效预防攻击

钓鱼攻击：相似域名识别及如何有效预防攻击

网络犯罪分子很乐意劫持目标公司或其供应商或业务合作伙伴的官方域名&#xff0c;但在攻击的早期阶段&#xff0c;他们通常没有这种选择。相反&#xff0c;在有针对性的攻击之前&#xff0c;他们会注册一个与受害组织的域名相似的域名 - 他们希望您不会发现其中的差异。此类技术…
阅读更多...
opencv基础51-图像轮廓04-轮廓多种图形拟合讲解及示例

opencv基础51-图像轮廓04-轮廓多种图形拟合讲解及示例

轮廓拟合&#xff08;Contour Fitting&#xff09;是指在图像处理中&#xff0c;通过一些数学模型或曲线拟合方法来近似描述图像中的轮廓。图像中的轮廓是指物体的边界&#xff0c;轮廓拟合可以用于提取、描述和分析物体的形状。 常用的轮廓拟合方法包括多项式拟合、贝塞尔曲线…
阅读更多...
【刷题笔记8.9】LeetCode题目：两数相加

【刷题笔记8.9】LeetCode题目：两数相加

LeetCode题目2&#xff1a;两数相加 题目及描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设…
阅读更多...
后端开发10.规格模块

后端开发10.规格模块

概述 简介 效果图 <
阅读更多...
【uniapp】封装一个全局自定义的模态框

【uniapp】封装一个全局自定义的模态框

【需求描述】 在接口401处&#xff0c;需要实现全局提示并弹出自定义模态框的功能。考虑到uni-app内置的模态框和app原生提示框的自定义能力有限&#xff0c;我决定自行封装全局自定义的模态框&#xff0c;以此为应用程序提供更加统一且个性化的界面。 【效果图】 【封装】 主…
阅读更多...
Ansible Playbook快速部署一主多从MySQL集群

Ansible Playbook快速部署一主多从MySQL集群

部署目标&#xff1a; 1、快速部署一套一主两从的mysql集群 2、部署过程中支持交互式定义安装目录及监听端口号 部署清单目录结构&#xff1a; rootmaster:/opt/mysql# tree . . ├── group_vars │ └── all.yml ├── hosts ├── mysql.yml └── roles└── mys…
阅读更多...
两个状态的马尔可夫链

两个状态的马尔可夫链

手动推导如下公式。 证明&#xff1a; 首先将如下矩阵对角化&#xff1a; { 1 − a a b 1 − b } \begin {Bmatrix} 1-a & a \\ b & 1-b \end {Bmatrix} {1−ab​a1−b​} (1)求如下矩阵的特征值&#xff1a; { 1 − a a b 1 − b } { x 1 x 2 } λ { x 1 x 2 }…
阅读更多...
Android Https

Android Https

本质&#xff1a;在客户端和服务端使用非对称加密协商出一套对称密钥&#xff0c;每次发送数据前加密&#xff0c;收到后解密&#xff0c;达到加密传输 http ssl 在http之下增加了安全层&#xff0c;用于保障http的加密传输 HTTPS连接 TLS连接步骤 1.客户端发送 client h…
阅读更多...
Apache Doris 入门教程25：通过开启 Debug 日志进行性能分析

Apache Doris 入门教程25：通过开启 Debug 日志进行性能分析

Doris 的 FE 和 BE 节点的系统运行日志默认为 INFO 级别。通常可以满足对系统行为的分析和基本问题的定位。但是某些情况下&#xff0c;可能需要开启 DEBUG 级别的日志来进一步排查问题。本文档主要介绍如何开启 FE、BE节点的 DEBUG 日志级别。 不建议将日志级别调整为 WARN 或…
阅读更多...
一维二维数组的指针于sizeof和strlen

一维二维数组的指针于sizeof和strlen

目录 一维数组于指针的一些题二维数组于指针的一些题 一维数组于指针的一些题 对数组名的理解 数组名表示首元素地址 //两个例外&#xff1a; //sizeof&#xff08;数组名&#xff09;:表示计算整个数组的大小 //&数组名&#xff1a;这里取的也是整个数组的大小,除了他两以…
阅读更多...
ArcGIS、ENVI、InVEST、FRAGSTATS技术教程

ArcGIS、ENVI、InVEST、FRAGSTATS技术教程

专题一 空间数据获取与制图 1.1 软件安装与应用讲解 1.2 空间数据介绍 1.3海量空间数据下载 1.4 ArcGIS软件快速入门 1.5 Geodatabase地理数据库 专题二 ArcGIS专题地图制作 2.1专题地图制作规范 2.2 空间数据的准备与处理 2.3 空间数据可视化&#xff1a;地图符号与注…
阅读更多...
23.8.9总结

23.8.9总结

接下来是答辩后的完善&#xff1a; 轮播图在管理员处可以进行修改&#xff0c; 消息处用websocket实现实时更新&#xff0c; 管理员审核界面&#xff0c;未审核的文章不能点赞&#xff0c;评论&#xff0c;收藏&#xff0c;不能用前端页面&#xff0c; 评论用二级评论&…
阅读更多...
(el-Table)操作：Element-plus 中Table 表格组件：多选修改成支持单选及表格相关样式的调整

(el-Table)操作：Element-plus 中Table 表格组件：多选修改成支持单选及表格相关样式的调整

Ⅰ、Element-plus 提供的 Table 表格组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供 Table 组件情况&#xff1a; 其一、Element-ui 自提供的 Table 代码情况为(示例的代码)&#xff1a; // Element-plus 自提供的代码&#xff1a; // 此时是使用了 ts 语言环境…
阅读更多...
.NET根据类的值进行序列化反序列化操作

.NET根据类的值进行序列化反序列化操作

前言&#xff1a; 在.NET种&#xff0c;序列化一般常用的方式是使用Newtonsoft.Json进行序列化和反序列化操作&#xff0c;比如创建一个Person类 public class Person {public string Name { get; set; }public int Age { get; set; } }序列化为json // 对象序列化为 JSONPe…
阅读更多...
vuejs 设计与实现 - 快速diff算法

vuejs 设计与实现 - 快速diff算法

Vue.js 2 所采用的双端 Diff 算法。既然快速 Diff 算法如此高效&#xff0c;我们有必要了解它的思路。接下来&#xff0c;我们就着重讨论快速 Diff 算法的实现原理。 相同的前置元素和后置元素 快速 Diff 算法借鉴了纯文本 Diff 算法中预处理的步骤。 案例&#xff1a; 旧的…
阅读更多...
数据结构-队列（C语言的简单实现）

数据结构-队列（C语言的简单实现）

简介 队列也是一种数据结构&#xff0c;队列也可以用来存放数字每次只能向队列里将入一个数字&#xff0c;每次只能从队列里获得一个数字在队列中&#xff0c;允许插入的一段称为入队口&#xff0c;允许删除的一段称为出队口它的原则是先进先出(FIFO: first in first out)&…
阅读更多...
Java8实战-总结15

Java8实战-总结15

Java8实战-总结15 引入流流简介流与集合 引入流 流简介 要讨论流&#xff0c;先来谈谈集合&#xff0c;这是最容易上手的方式。Java 8中的集合支持一个新的stream方法&#xff0c;它会返回一个流(接口定义在java.util.stream.Stream里)。在后面会看到&#xff0c;还有很多其他…
阅读更多...
自从学了C++之后，小雅兰就有对象了！！！（类与对象）（中）——“C++”

自从学了C++之后，小雅兰就有对象了！！！（类与对象）（中）——“C++”

各位CSDN的uu们好呀&#xff0c;好久没有更新小雅兰的C专栏啦&#xff0c;话不多说&#xff0c;让我们进入类和对象的世界吧&#xff01;&#xff01;&#xff01; 类的6个默认成员函数 构造函数 析构函数 拷贝构造函数 类的6个默认成员函数 如果一个类中什么成员都没有&am…
阅读更多...
C 语言中，「.」与「-＞」有什么区别？

C 语言中，「.」与「-＞」有什么区别？

使用“.”的话&#xff0c;只需要声明一个结构体。格式是结构体类型名结构体名。然后通过结构体名加上“.”再加上域名&#xff0c;就可以引用结构体的域了。因为结构体的内存是自动分配的&#xff0c;就像使用int a;一样。而使用“->”的话&#xff0c;需要声明一个结构体的…
阅读更多...
【三维编辑】Seal-3D：基于NeRF的交互式像素级编辑

【三维编辑】Seal-3D：基于NeRF的交互式像素级编辑

文章目录 摘要一、引言二、方法2.1.基于nerf的编辑问题概述2.2.编辑指导生成2.3.即时预览的两阶段学生训练 三、实验总结 项目主页: https://windingwind.github.io/seal-3d/ 代码&#xff1a;https://github.com/windingwind/seal-3d/ 论文: https://arxiv.org/pdf/2307.15131…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023