Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >鸿蒙开发:自定义一个任意位置弹出的Dialog

鸿蒙开发:自定义一个任意位置弹出的Dialog

原创
作者头像
程序员一鸣
修改于 2025-03-21 09:27:05
修改于 2025-03-21 09:27:05
23411
代码可运行
举报
运行总次数:1
代码可运行

前言

本文基于Api12

鸿蒙开发中,一直有个问题困扰着自己,想必也困扰着大多数开发者,那就是,系统提供的dialog自定义弹窗,无法实现在任意位置进行弹出,仅限于@CustomDialog和@Component struct的成员变量,这就导致了,我想在封装的工具类或者ViewModel,或者其他地方弹出,只能通过事件或者回调触发UI层才能执行,很是不方便,除此之外,虽然说UI我们可以共用,但CustomDialogController,每个使用的地方都需要定义,也是很冗余。当然了,本身dialog应该在UI层弹出,鸿蒙这样设计是不存在问题的,但为了兼顾到易用性,任意位置弹出,想必有很多人还是非常需要的。

系统自定义弹窗

代码语言:typescript
AI代码解释
复制
dialogController = new CustomDialogController({
    builder: this.customDialog,
    autoCancel: true,
  })

  /*
 * Author:AbnerMing
 * Describe:自定义Dialog
 */
  @Builder
  customDialog() {
    Text("我是自定义Dialog")
      .width("100%")
      .height(100)
  }


 this.dialogController.open()//弹出
 this.dialogController.close()//关闭

如何摆脱UI的限制,在任意位置弹出,目前有两种方案可以实现,第一种是使用window创建窗口的形式,这种形式,有初始化的需要,无论是依赖window.WindowStage还是普通的页面,都是前置的依赖项,当然了还有一点,就是弹出方式稍微生硬,不过可以满足正常的需求;第二种是通过promptAction中的openCustomDialog方式,不过这种方式需要在Api11及以上的版本,对于目前的使用需求,如果想实现任意位置弹出,还是建议使用openCustomDialog方式。

openCustomDialog简单使用

通过openCustomDialog方式弹出弹窗,通过closeCustomDialog方式关闭弹窗。

代码语言:typescript
AI代码解释
复制
private customDialogComponentId: number = 0

  build() {
    Column() {
      Button("简单Demo")
        .onClick(() => {
          promptAction.openCustomDialog({
            builder: () => {
              this.customDialogComponent()
            }
          }).then((dialogId: number) => {
            this.customDialogComponentId = dialogId
          })
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  customDialogComponent() {
    Column() {
      Text('弹窗').fontSize(30)
      Row({ space: 50 }) {
        Button("确认").onClick(() => {
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })
        Button("取消").onClick(() => {
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

目前基于openCustomDialog方式,自己也封装了一层,已支持市场上常见的大部分功能,比如信息弹窗,确认取消形式弹窗,底部弹窗,时间,城市等等样式,当然了,也支持自定义组件形式,几乎涵盖了所有的场景,有需要的朋友可以直接进行使用。

中心仓库地址:

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fdialog

目前针对各个功能也进行罗列一下,方便大家可以针对性的使用。

快速使用

方式一:在Terminal窗口中,执行如下命令安装三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议:在使用的模块路径下进行执行命令。

代码语言:typescript
AI代码解释
复制
ohpm install @abner/dialog

方式二:在工程的oh-package.json5中设置三方包依赖,配置示例如下:

代码语言:typescript
AI代码解释
复制
"dependencies": { "@abner/dialog": "^1.1.1"}

初始化

初始化可以更改统一的配置,比如宽高,比如大小、比如背景等等,当然是在需要的情况下,如果默认的样式满足需求,全局初始化可以省略,您也可以在单独调用的时候进行修改样式。

代码语言:typescript
AI代码解释
复制
initDialog(attribute)

属性介绍

属性

类型

概述

attribute

FusionAttribute

可选参数,dialog属性全局配置,用于修改弹窗样式,可根据UI在这里进行配置

FusionAttribute属性

FusionAttribute是全局的dialog属性配置,如果默认提供的dialog样式和您的项目中样式不一样,可通过此参数进行设置,全局配置一次 页面中的所有使用地方均会生效,方便您后续使用。

属性

类型

概述

infoOrConfirmAttribute

ContentAttribute

可选参数,信息或者确认形式弹窗属性配置

bottomListAttribute

BottomListAttribute

可选参数,底部列表弹窗属性配置

bottomGridAttribute

BottomGridAttribute

可选参数,底部网格列表弹窗属性配置

bottomListScrollAttribute

BottomListScrollAttribute

可选参数,底部的滑动列表属性

toastAttribute

ToastAttribute

可选参数,Toast属性配置

loadingAttribute

LoadingAttribute

可选参数,loading提示

isUseMainWindow

boolean

是使用主window还是子window,默认是子

ContentAttribute属性

ContentAttribute是信息或者确认形式弹窗属性配置。

属性

类型

概述

title

string / Resource

可选参数,标题,全局初始化中无需配置

message

string / Resource

可选参数,描述信息,全局初始化中无需配置

cancelText

string / Resource

可选参数,取消文字

confirmText

string / Resource

可选参数,确认文字

clickCancelHide

boolean

可选参数,默认点击取消隐藏

isHideTitle

boolean

可选参数,是否隐藏标题,默认不隐藏

clickCancel

回调

可选参数,点击取消回调事件

clickConfirm

回调

可选参数,点击确认回调事件

bottomMenuHeight

Length

可选参数,底部按钮高度

backgroundColor

ResourceColor

可选参数,背景颜色

radius

BorderRadiuses / Length

可选参数,角度

titleAttribute

TitleAttribute

可选参数,标题样式属性

messageAttribute

MessageAttribute

可选参数,描述样式属性

dividerHAttribute

DividerHAttribute

可选参数,横向分割线样式属性

dividerVAttribute

DividerVAttribute

可选参数,垂直分割线样式属性

confirmAttribute

ConfirmAttribute

可选参数,确认样式属性

cancelAttribute

CancelAttribute

可选参数,取消样式属性

dialogAttribute

DialogAttribute

可选参数,弹窗总体属性

BottomListAttribute属性

BottomListAttribute是底部列表弹窗属性配置。

属性

类型

概述

backgroundColor

ResourceColor

背景颜色

items

string[]

列表条目

itemClick

(position: number)

条目点击回调

cancelClick

()

取消点击回调

isHideCancel

boolean

是否隐藏取消按钮

isTransparent

boolean

是否透明展示

itemRadius

Length / BorderRadiuses

透明后条目整体的角度

cancelRadius

Length / BorderRadiuses

透明后取消按钮角度

topLeftRadius

Length

dialog左上角角度

topRightRadius

Length

dialog右上角角度

itemAttr

BottomListItem

条目属性

itemDivider

ListItemDivider

分割线属性

cancelAttr

BottomListCancel

底部取消属性

dialogAttribute

DialogAttribute

弹窗总体属性

BottomGridAttribute属性

属性

类型

概述

items

BottomGridModel[]

条目数据,用于网格

itemLineArray

Array<BottomGridModel[]>

条目数据,用户每行展示几个,每行几个就几个数据

columnSize

number

列数,默认是2列

barTitleAttr

BarTitleGridAttribute

网格上边的titlebar属性

barHeight

number

网格上边的titleBar的高度

barCancelTextAttr

BarCancelTextGridAttribute

titleBar中的取消属性

barCancelImageAttr

BarCancelImageGridAttribute

titleBar中的取消图片属性,和文字二选一

isBarCancelImage

boolean

titleBar中的取消是否图片方式,默认是false

itemMarginTop

number

item每一行距离顶部

backgroundColor

ResourceColor

背景颜色

topLeftRadius

Length

dialog左上角角度

topRightRadius

Length

dialog右上角角度

isHideBar

boolean

是否隐藏titlebar

dialogAttribute

DialogAttribute

全局dialog属性

isItemAttrGlobal

boolean

条目属性是否使用全局,默认是

itemAttr

ItemGridAttribute

条目属性

itemClick

(position: number)

条目点击回调

cancelClick

()

取消点击回调

dividerColor

ResourceColor

分割线颜色

dividerHeight

number

分割线高度

isLastDividerShow

boolean

最后一个是否显示,默认展示

dividerMarginTop

Margin / Length

分割线距离上边高度

isShowBottomCancel

boolean

是否展示底部取消按钮,默认不展示

bottomCancelTextAttr

CancelTextGridAttribute

底部的取消按钮属性

ToastAttribute属性

属性

类型

概述

msg

string / Resource

提示信息,初始化时无需

duration

number

弹出时间,默认2000

backgroundColor

ResourceColor

背景颜色

fontColor

ResourceColor

字体颜色 ,默认ffffff

fontWeight

number / FontWeight / string

字体粗细设置,默认400

fontSize

number / string / Resource

字体大小,默认16

fontFamily

string / Resource

字体样式

borderRadius

Length / BorderRadiuses

角度

padding

Padding / Length

内边距

flexAlign

FlexAlign

位置方向

leftSrc

PixelMap / ResourceStr/ DrawableDescriptor

左边图片

rightSrc

PixelMap / ResourceStr/ DrawableDescriptor

右边图片

topSrc

PixelMap / ResourceStr/ DrawableDescriptor

上边图片

bottomSrc

PixelMap / ResourceStr/ DrawableDescriptor

下边图片

imageMargin

Length

图片距离文字距离

imageWidth

Length

图片宽度

imageHeight

Length

图片高度

imageAlt

string /Resource

加载时显示的占位图

DialogAttribute属性

每个弹窗中都有一个dialogAttribute属性,用来控制整体的弹窗样式。

属性

类型

概述

windowAlignment

DialogAlignment

弹窗位置

dialogDismiss

(action?:DismissDialogAction) => void

dialog隐藏状态回调

dialogAppear

() => void

dialog显示回调

windowBottomAnimation

boolean

是否开启底部动画

isPrivacyMode

boolean

是否防止截屏,默认不是

isSystemAnimation

boolean

是否系统动画,默认既是

代码案例

1、信息弹窗

代码语言:typescript
AI代码解释
复制
showDialogInfo({
  title: "我是标题",
  message: "我是一段描述",
  clickConfirm: () => {
    //确认
    console.log("===确认")
    // hide() //隐藏
  }
})

2、确认/取消弹窗

代码语言:typescript
AI代码解释
复制
showDialogConfirm({
  title: "我是一个标题",
  message: "我是一段描述",
  clickCancel: () => {
    //取消
    console.log("===取消")
    // hide() //隐藏
  },
  clickConfirm: () => {
    //确认
    console.log("===确认")
    // hide() //隐藏
  }
})

3、底部列表

代码语言:typescript
AI代码解释
复制
showDialogBottomList({
  items: ["我是条目一", "我是条目二"],
  itemClick: (position: number) => {
    console.log("==========:" + position)
  }
})

4、确认提示信息弹窗

代码语言:typescript
AI代码解释
复制
showDialogConfirm({
  title: "我是一个标题",
  message: "我是一段描述",
  isShowInformation: true, //展示信息
  informationAttribute: {
    checkboxSelect: true, //是否默认选中
    iconAttribute: {
      srcSelect: $r("app.media.startIcon"), //选中
      srcUnselected: $r("app.media.loading001"), //未选中
    },
    onChange: (isChange) => {
      //点击改变了状态
      console.log("===" + isChange)
    }
  },
  clickCancel: () => {
    //取消
    //hide()
    console.log("===取消")
  },
  clickConfirm: () => {
    //确认
    console.log("===确认")
  }
})

5、底部列表

代码语言:typescript
AI代码解释
复制
showDialogBottomList({
  items: ["我是条目一", "我是条目二"],
  itemClick: (position: number) => {
    console.log("==========:" + position)
  }
})

6、底部列表透明

代码语言:typescript
AI代码解释
复制
showDialogBottomList({
  items: ["我是条目一", "我是条目二"],
  itemClick: (position: number) => {
    console.log("==========:" + position)
  },
  isTransparent: true,
  dialogAttribute: {
    dialogMarginLeft: 20,
    dialogMarginRight: 20
  }
})

7、底部列表多样式

代码语言:typescript
AI代码解释
复制
showDialogBottomList({
  itemModels: [new BottomListModel("条目一", { fontColor: Color.Red }), new BottomListModel("条目二")],
  itemClick: (position: number) => {
    hide()
  }
})

8、底部网格列表

代码语言:typescript
AI代码解释
复制
showDialogBottomGrid({
  columnSize: 4,
  items: [new BottomGridModel("微信", $r("app.media.app_icon")),
          new BottomGridModel("朋友圈", $r("app.media.app_icon")),
          new BottomGridModel("QQ", $r("app.media.app_icon")),
          new BottomGridModel("QQ空间", $r("app.media.app_icon")),
          new BottomGridModel("微博", $r("app.media.app_icon")),
          new BottomGridModel("微博", $r("app.media.app_icon")),
          new BottomGridModel("微博", $r("app.media.app_icon")),
          new BottomGridModel("微博", $r("app.media.app_icon"))
         ],
  itemClick: (position) => {
    console.log("==============:" + position)
  }
})

9、底部网格按行区分

代码语言:typescript
AI代码解释
复制
showDialogBottomGrid({
  columnSize: 4,
  isShowBottomCancel: true,
  isHideBar: true,
  itemLineArray: [
    [new BottomGridModel("测试", $r("app.media.app_icon")),
     new BottomGridModel("测试", $r("app.media.app_icon"))],
    [new BottomGridModel("测试", $r("app.media.app_icon")),
     new BottomGridModel("测试", $r("app.media.app_icon")),
     new BottomGridModel("测试", $r("app.media.app_icon"))]
  ],
  itemClick: (position) => {
    console.log("==============" + position)
  }
})

10、自定义组件弹窗

首先要自定义一个全局组件,可传入自定义的组件,或者直接写布局

代码语言:typescript
AI代码解释
复制
/*
* Author:AbnerMing
* Describe:自定义弹窗,布局自己定义
*/
@Builder
  function BuilderDialog() {
    Column() {
      Text("我是一个自定义弹窗")
        .margin({ top: 30 })
      Row() {
        Button("取消").onClick(() => {
          //隐藏dialog
          hide()
        })
        Button("确定")
          .margin({ left: 30 })
      }.margin({ top: 20 })
        .margin({ top: 30 })
    }.backgroundColor(Color.White)
      .width("60%")
  }

代码调用

代码语言:typescript
AI代码解释
复制
showDialog(wrapBuilder(BuilderDialog))

11、自定义组件弹窗带参数

首先要自定义一个全局组件,可传入自定义的组件,或者直接写布局

代码语言:typescript
AI代码解释
复制
class DialogParams {
  title?: string
}

@Builder
  function BuilderDialogParams(params: DialogParams) {
    Column() {
      Text(params.title)
        .margin({ top: 30 })
      Row() {
        Button("取消").onClick(() => {
          //隐藏dialog
          hide()
        })
        Button("确定")
          .margin({ left: 30 })
      }.margin({ top: 20 })
        .margin({ top: 30 })
    }.backgroundColor(Color.White)
      .width("60%")
  }

代码调用

代码语言:typescript
AI代码解释
复制
let params = new DialogParams()
params.title = "我是传递的参数"
showDialogParams(wrapBuilder(BuilderDialogParams), params)

12、toast提示

代码语言:typescript
AI代码解释
复制
toast("我是一个普通的toast")

13、toast改变背景

代码语言:typescript
AI代码解释
复制
toast("我是一个改变背景的Toast", { backgroundColor: Color.Red })

14、toast改变位置

代码语言:typescript
AI代码解释
复制
toast("我是一个改变位置的Toast", { alignment: DialogAlignment.Center })

15、toast图片设置

代码语言:typescript
AI代码解释
复制
toast("Toast设置Icon", { leftSrc: $r("app.media.app_icon") })

16、底部单列表

代码语言:typescript
AI代码解释
复制
showDialogBottomListScroll({
  items: ["男", "女"],
  titleBarAttribute: {
    titleText: "选择性别"
  },
  confirmClick: (value, index) => {
    console.log(value + "=========" + index)
  }
})

17、底部双列表不联动

代码语言:typescript
AI代码解释
复制
showDialogBottomListScroll({
  selected: [1, 2],
  items: [["第一列1", "第一列2"], ["第二列1", "第二列2", "第二列3"]],
  titleBarAttribute: {
    titleText: "底部双列表不联动"
  },
  confirmClick: (value, index) => {
    console.log(value + "=========" + index)
  }
})

18、底部双列表联动

代码语言:typescript
AI代码解释
复制
showDialogBottomListScroll({
  items: this.doubleList,
  titleBarAttribute: {
    titleText: "底部双列表联动"
  },
  confirmClick: (value, index) => {
    console.log(value + "=========" + index)
  }
})

19、底部三列表联动

代码语言:typescript
AI代码解释
复制
showDialogBottomListScroll({
  items: this.thirdList,
  titleBarAttribute: {
    titleText: "底部三列表联动",
  },
  confirmClick: (value, index) => {
    console.log(value + "=========" + index)
  }
})

20、年月日时分秒时间弹窗

代码语言:typescript
AI代码解释
复制
showDialogTime({
  titleBarAttribute: {
    titleText: "年月日时分秒-弹窗",
  },
  timeAttribute: {
    timeType: TimeDialogType.YMDHMS,
  },
  timeConfirmClick: (date) => {
    //时间回调
    console.log("===时间结果:" + date)
  },
  confirmClick: (value, index) => {
    //内容和索引回调
    console.log("===内容结果:" + value + "===索引结果:" + index)
  }
})

21、年月日时分弹窗

代码语言:typescript
AI代码解释
复制
showDialogTime({
  titleBarAttribute: {
    titleText: "年月日时分-弹窗",
  },
  timeAttribute: {
    timeType: TimeDialogType.YMDHM
  },
  timeConfirmClick: (date) => {
    //时间回调
    console.log("===时间结果:" + date)
  },
  confirmClick: (value, index) => {
    //内容和索引回调
    console.log("===内容结果:" + value + "===索引结果:" + index)
  }
})

22、年月日弹窗

代码语言:typescript
AI代码解释
复制
showDialogTime({
  titleBarAttribute: {
    titleText: "年月日-弹窗",
  },
  timeAttribute: {
    startTime: "2022-6-12",
    endTime: "2025-8-20",
  },
  timeConfirmClick: (date) => {
    //时间回调
  },
  confirmClick: (value, index) => {
    //内容和索引回调
  }
})

23、月日弹窗

代码语言:typescript
AI代码解释
复制
showDialogTime({
  titleBarAttribute: {
    titleText: "月日-弹窗",
  },
  timeAttribute: {
    timeType: TimeDialogType.MD
  },
  timeConfirmClick: (date) => {
    //时间回调
  },
  confirmClick: (value, index) => {
    //内容和索引回调
  }
})

24、时分秒弹窗

代码语言:typescript
AI代码解释
复制
showDialogTime({
  titleBarAttribute: {
    titleText: "时分秒-弹窗",
  },
  timeAttribute: {
    timeType: TimeDialogType.HMS,
  },
  timeConfirmClick: (date) => {
    //时间回调
  },
  confirmClick: (value, index) => {
    //内容和索引回调
  }
})

25、城市地址弹窗

代码语言:typescript
AI代码解释
复制
showDialogAddress({
  titleBarAttribute: {
    titleText: "城市地址弹窗",
  },
  confirmClick: (value, index) => {
  }
})

26、PopupWindow弹出

首先要定义弹出的组件,自定义即可,支持自定义组件形式,传入即可

代码语言:typescript
AI代码解释
复制
/**
 * AUTHOR:AbnerMing
 * INTRODUCE:popup 弹出框,可以自定义,任意组件
 * */
@Builder
  function BuilderWindowView() {
    Text("我是任意的组件")
      .backgroundColor(Color.Pink)
  }
任意位置
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  view: wrapBuilder(BuilderWindowView),
  x: 60,
  y: 300
})
上边
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupTop",//要弹出的组件id,也就是你要在哪一个组件进行弹出
  view: wrapBuilder(BuilderWindowView)
})
下边
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupBottom",//要弹出的组件id,也就是你要在哪一个组件进行弹出
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM
})
左边
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.LEFT
})
右边
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.RIGHT
})
左上
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupTopLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.TOP_LEFT
})
右上
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupTopRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.TOP_RIGHT
})
左下
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupBottomLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM_LEFT
})
右下
代码语言:typescript
AI代码解释
复制
showPopupWindow({
  id: "popupBottomRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM_RIGHT
})
携带参数
代码语言:typescript
AI代码解释
复制
class WindowParams {
  title?: string
}

@Builder
  function BuilderWindowParams(params: WindowParams) {
    Text(params.title)
      .backgroundColor(Color.Pink)
  }

//代码调用
let params = new WindowParams()
params.title = "我是携带的参数"
showPopupWindow({
  id: "popupParams",
  params: params,
  viewParams: wrapBuilder(BuilderWindowParams),
  direction: PopupDirection.BOTTOM
})

使用总结

每个弹窗都有一个统一的隐藏,直接调用hide方法即可,如果你想要底部弹窗的动画效果,目前有两种方式,一种是系统自带的,一种是自定义的,系统自带的,动画是,整个背景一起滑动,自定义的是背景不动,只弹出的组件动,具体使用哪种效果,主要看自己的需求,另外,底部的弹出动画,自己也封装了一个动画组件BottomAnimationView,可以很方便的实现动画方式,大家有需要也可以使用,相关Demo中也有案例。

需要注意,如果你的项目中有悬浮窗存在,有可能会出现,弹出的弹窗在悬浮窗的窗口,为了解决这个问题,您可以选择是弹出主窗口,还是子窗口。

代码语言:typescript
AI代码解释
复制
initDialog({
      isUseMainWindow:true
    })

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
大佬,遇到一个问题,执行 $ headscale namespaces create default 创建命名空间时,返回 FTL ../home/runner/work/headscale/headscale/cmd/headscale/cli/utils.go:122 > Could not connect: context deadline exceeded error="context deadline exceeded" 这个有啥解么
大佬,遇到一个问题,执行 $ headscale namespaces create default 创建命名空间时,返回 FTL ../home/runner/work/headscale/headscale/cmd/headscale/cli/utils.go:122 > Could not connect: context deadline exceeded error="context deadline exceeded" 这个有啥解么
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
贫苦家庭与野生公有云之间的 WireGuard Mesh 组网策略
熟悉我的小伙伴都知道我是一名与时俱进的 WireGuard 舔狗,我早就把所有的跨云组网都换成了 WireGuard。
米开朗基杨
2021/11/10
4.7K0
【Tailscale】自建境内Headscale实现点对点直连异地组网——以双栈腾讯云轻量为例
Tailscale是一个与ZeroTier、Netbird等工具类似的异地组网工具,支持通过STUN打洞实现客户端点对点直连,互联协议基于go实现的WireGuard,兼具高效与安全的特性。
LMSKK
2024/10/13
4.4K0
【Tailscale】自建境内Headscale实现点对点直连异地组网——以双栈腾讯云轻量为例
【里程碑】WireGuard系列文章(七):使用WireGuard和Netmaker创建Full Mesh网络
2.WireGuard 系列文章(二):WireGuard 简介 - 快速、现代、安全的 V** 隧道[2]
东风微鸣
2022/04/22
5K0
【里程碑】WireGuard系列文章(七):使用WireGuard和Netmaker创建Full Mesh网络
WireGuard 全互联模式终极指南(上)!
大家好,我是米开朗基杨。 关注我的读者应该都还记得我之前写过一篇 👉WireGuard 全互联模式 (full mesh) 的配置指南,限于当时还没有成熟的产品来帮助我们简化全互联模式的配置,所以我选择了使用可视化界面 👉wg-gen-web 来达成目的。但 👉wg-gen-web 的缺陷也很明显,它生成的每一个客户端的配置都要手动调整,终究还是不够便利。 今天我将为大家介绍一种更加完美的工具来配置 WireGuard 的全互联模式,这个工具就是 Netmaker[1]。 由于篇幅原因,本系列文章将会分成两
米开朗基杨
2021/10/27
8.6K1
WireGuard 全互联模式终极指南(上)!
Headscale搭建P2P内网穿透
究其根本因素在于, 在传统架构中如果两个位于多层 NAT(简单理解为多个路由器)之后的设备, 只能通过一些中央 (VPN / 远程软件) 中转服务器进行链接, 这时网络连接速度取决于中央服务器带宽和速度; 这种网络架构我这里简称为: 星型拓扑
入门笔记
2022/11/14
6.1K1
Headscale搭建P2P内网穿透
自建 DERP 中继服务器,从此 Tailscale 畅通无阻
原文链接🔗 https://fuckcloudnative.io/posts/custom-derp-servers/ 👉上篇文章介绍了如何使用 Headscale 替代 Tailscale 官方的控制服务器,并接入各个平台的客户端。本文将会介绍如何让 Tailscale 使用自定义的 DERP Servers。可能很多人都不知道 DERP 是个啥玩意儿,没关系,我先从中继服务器开始讲起。 STUN 是什么 Tailscale 的终极目标是让两台处于网络上的任何位置的机器建立点对点连接(直连),但现实世
米开朗基杨
2022/04/11
29.8K1
自建 DERP 中继服务器,从此 Tailscale 畅通无阻
比 Tailscale 更好的内网穿透方案 - Headscale
headscale[1] 是一款今年 2021 年出现的一款 Tailscale 控制服务器的开源实现。也是唯一的一款。望能发展壮大。
公众号: 云原生生态圈
2022/04/08
7.2K1
比 Tailscale 更好的内网穿透方案 - Headscale
WireGuard 系列文章(四):WireGuard 快速上手
2.WireGuard 系列文章(二):WireGuard 简介 - 快速、现代、安全的 V** 隧道[2]
东风微鸣
2022/04/22
6.6K0
WireGuard 系列文章(四):WireGuard 快速上手
Openwrt 使用 Wireguard 异地组网(远程家庭网所有设备)
最近入手了一款友善 Nano pi (型号 FriendlyElec NanoPi R2S (CpuMark : 20651.944334 Scores)),直接作为家庭内网的主路由使用,各项性能比之前的 新路由3 要好太多了。
宋天伦
2023/10/20
13.5K0
Openwrt 使用 Wireguard 异地组网(远程家庭网所有设备)
Tailscale ACL 访问控制策略完全指南!
❝原文链接🔗:https://icloudnative.io/posts/tailscale-acls/ 大家好,我是米开朗基杨。 前面几篇文章给大家给介绍了 Tailscale 和 Headscale,包括 👉Headscale 的安装部署和各个平台客户端的接入,以及如何打通各个节点所在的局域网。同时还介绍了👉如何自建私有的 DERP 服务器,并让 Tailscale 使用我们自建的 DERP 服务器。 还没看的赶紧去看!👇 芜湖,Tailscale 开源版本让你的 WireGuard 直接起飞~ 自建
米开朗基杨
2023/01/09
3.8K0
下一代VPN工具:体验TailScale的简便和高效
tailscale管理端:https://login.tailscale.com/admin/machines
小尘要自信
2023/11/16
8.9K0
下一代VPN工具:体验TailScale的简便和高效
NAS新福音,“Tailscale”解决你的公网安全焦虑的新方案!(免费+开源+不限流量+内网穿透)
近期阿祥发表的文章“如何让自己家里NAS硬盘的小电影不被发现?现在就教你涨知识了!”引发了很多粉丝的关注和支持。而其中关于“使用桥接获取公网ip的方式”引发很多粉丝的争论,有些粉丝认为公网ip获取不到,有些粉丝认为获取了公网ip,也是存在一定的安全风险。这里想说的是条条道路通罗马,需求不同就会有不同的解决方式。既然有不同的需求场景,那阿祥就用两期的文章介绍内网穿透工具tailscale和szrotier,这两工具可以使个人在外地就能访问访问家里的电脑和NAS,来解决粉丝们公网和安全方面的顾虑。本文先介绍第一个工具tailscale。
ICT系统集成阿祥
2024/12/03
6.5K1
NAS新福音,“Tailscale”解决你的公网安全焦虑的新方案!(免费+开源+不限流量+内网穿透)
WireGuard 系列文章(六):Netmaker 安装
2.WireGuard 系列文章(二):WireGuard 简介 - 快速、现代、安全的 V** 隧道[2
东风微鸣
2022/04/22
4K0
WireGuard 系列文章(六):Netmaker 安装
基于 WireGuard 和 OpenVPN 的混合云基础架构建设
可以找一台能联网的 centos7 测试一下这个端口,如果没有 nc 工具可以yum install nc安装下。:
米开朗基杨
2021/04/23
8.1K1
基于 WireGuard 和 OpenVPN 的混合云基础架构建设
netmarker安装部署
Netmaker 是一个用来配置 WireGuard 全互联模式的可视化工具,它的功能非常强大,不仅支持 UDP 打洞、NAT 穿透、多租户,还可以使用 Kubernetes 配置清单来部署,客户端几乎适配了所有平台,包括 Linux, Mac 和 Windows,还可以通过 WireGuard 原生客户端连接 iPhone 和 Android。
吴易娃
2024/07/23
6470
netmarker安装部署
OpenWRT搭建WireGuard服务器
By HKL, on Friday 2019-11-29 15:25, tagged: 🏷️Networking 🏷️Operating
hiplon
2023/10/18
4.7K0
OpenWRT搭建WireGuard服务器
【运维】Wireguard+OpenVPN解决跨地区VPN的连接稳定性问题
UDP在实际使用上可能会被QOS限速,但是在长距离、高延迟的VPN环境中还是可以发挥不错的效果,不容易出现TCP经常断连的情况。
正汰
2024/01/16
4.5K0
【运维】Wireguard+OpenVPN解决跨地区VPN的连接稳定性问题
Nomad 系列-Nomad+Traefik+Tailscale 集成实现零信任安全
•Nomad 系列文章[1]•Traefik 系列文章[2]•Tailscale 系列文章[3]
东风微鸣
2023/09/14
6290
Nomad 系列-Nomad+Traefik+Tailscale 集成实现零信任安全
Fedora33下搭建WireGuard虚拟专用网
WireGuard 是一个易于配置、快速且安全的开源 Virtual Private Network,它利用了最新的加密技术。目的是提供一种更快、更简单、更精简的通用 Virtual Private Network,它可以轻松地在树莓派这类低端设备到高端服务器上部署。
yuanfan2012
2020/12/31
2.4K0
Fedora33下搭建WireGuard虚拟专用网
Tailscale 构建私有网络访问家中设备
在此前,我都是通过一些硬件设备来构建一个私有网络,并且能有一个稳定的公网 IP,外部可以通过设备厂商对应的外部资源来构建一个私有网络,随时随地访问家中设备,如:NAS 。但,人生无常,大肠包小肠,最近很不稳定,于是准备了一个后手方案,防止意外。
LinkinStar
2023/10/18
1.6K0
推荐阅读
相关推荐
贫苦家庭与野生公有云之间的 WireGuard Mesh 组网策略
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验