更新记录

1.1.0（2022-08-08）

新增依附弹窗，更多内容可下载示例文件查看

1.0.0（2022-08-02）

首次发布

平台兼容性

Android Android CPU类型 iOS
适用版本区间：4.4 - 11.0 armeabi-v7a：支持，arm64-v8a：支持，x86：支持 ×

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

插件使用说明

  • 插件申请权限
    • 无
  • 用法如下：
    • 在需要使用插件的页面加载以下代码 
      const dialogModule = uni.requireNativePlugin("leven-popDialog-PopDialogModule");

插件方法

  • 基本弹窗：baseDialog

    • 用法如下：

      dialogModule.baseDialog({
title: this.baseDialogForm.title,
content: this.baseDialogForm.content,
cancelBtnText: this.baseDialogForm.cancelBtnText,
confirmBtnText: this.baseDialogForm.confirmBtnText,
theme: this.baseDialogForm.themeValue,
isHideCancel: this.baseDialogForm.isHideCancelValue == 0,
dismissOnTouchOutside: this.baseDialogForm.dismissOnTouchOutsideValue == 1,
animation: this.baseDialogForm.animationValue
}, res => {
console.log(res)
})

    • 参数说明：

    参数名 参数类型 是否必填 默认值 参数描述
    title String 否 空 标题，空字符串不显示
    content String 否 空 内容
    theme Integer 否 0 主题，0.普通主题，1.深色主题
    cancelBtnText String 否 取消 取消按钮的文字
    confirmBtnText String 否 确认 确认按钮的文字
    isHideCancel Boolean 否 false 是否隐藏取消按钮
    dismissOnTouchOutside Boolean 否 true 击弹窗外侧是否关闭弹窗
    animation String 否 ScaleAlphaFromCenter 动画，动画类型请参考示例
    • 回调说明：
    参数名 参数类型 参数描述
    message String 消息提示
    data Object 数据对象
    data.clickBtn String 点击的按钮，confirm：确认按钮，cancel：取消按钮
    code Integer 返回类型，0.成功，其他：失败

  • 输入框弹窗：inputDialog

    • 用法如下：

      dialogModule.inputDialog({
title: this.dialogForm.title,
content: this.dialogForm.content,
inputContent: this.dialogForm.inputContent,
placeholder: this.dialogForm.placeholder,
theme: this.dialogForm.themeValue,
dismissOnTouchOutside: this.dialogForm.dismissOnTouchOutsideValue == 1,
autoOpenSoftInput: this.dialogForm.autoOpenSoftInputValue == 1,
isMoveUpToKeyboard: this.dialogForm.isMoveUpToKeyboardValue == 1,
autoFocusEditText: this.dialogForm.autoFocusEditTextValue == 1
}, res => {
console.log(res)
})

    • 参数说明：

    参数名 参数类型 是否必填 默认值 参数描述
    title String 否 空 标题，空字符串不显示
    content String 否 空 内容，空字符串不显示
    inputContent String 否 空 输入框内容
    placeholder String 否 空 输入框提示文字
    theme Integer 否 0 主题，0.普通主题，1.深色主题
    dismissOnTouchOutside Boolean 否 true 击弹窗外侧是否关闭弹窗
    autoOpenSoftInput Boolean 否 true 是否自动打开输入法，在是否自动回去焦点为false时有效
    isMoveUpToKeyboard Boolean 否 true 是否要移动到输入法之上
    autoFocusEditText Boolean 否 true 是否自动获取焦点
    • 回调说明：
    参数名 参数类型 参数描述
    message String 消息提示
    data Object 数据对象
    data.clickBtn String 点击的按钮，confirm：确认按钮，cancel：取消按钮
    data.text String 输入框输入的内容
    code Integer 返回类型，0.成功，其他：失败

  • 列表弹窗：listDialog

    • 用法如下： 
      let list = [];
for (let i = 0; i < 20; i++) {
list.push("条目" + (i + 1))
}
dialogModule.listDialog({
title: this.dialogForm.title,
maxHeight: this.dialogForm.maxHeight,
list: list,
checkedIndex: 2,
theme: this.dialogForm.themeValue,
position: this.dialogForm.positionValue
}, res => {
console.log(res)
})
    • 参数说明：
    参数名 参数类型 是否必填 默认值 参数描述
    title String 否 空 标题，空字符串不显示
    maxHeight Integer 否 无 最大高度，默认内容高度
    list Array 是 无 列表内容
    checkedIndex Integer 否 -1 选中的索引
    theme Integer 否 0 主题，0.普通主题，1.深色主题
    position Integer 否 0 位置，0.中间，1.底部（默认）
    • 回调说明：
    参数名 参数类型 参数描述
    message String 消息提示
    data Object 数据对象
    data.position Integer 选中的索引
    data.text String 选中的内容描述
    code Integer 返回类型，0.成功，其他：失败

  • loading弹窗：loadingDialog(打开弹窗)，hideLoadingDialog（关闭弹窗）

    • 用法如下： 
      dialogModule.loadingDialog({
title: this.dialogForm.title,
theme: this.dialogForm.themeValue,
style: this.dialogForm.styleValue
});
setTimeout(() => {
dialogModule.hideLoadingDialog();
}, 5000)
    • 参数说明：
    参数名 参数类型 是否必填 默认值 参数描述
    title String 否 空 标题，空字符串不显示
    style String 否 spinner 弹窗样式，spinner：菊花式，progressBar：圆圈

  • 图片预览弹窗：imageViewerDialog

    • 用法如下： 
      dialogModule.imageViewerDialog({
current: index,
list: this.urls,
isInfinite: this.dialogForm.isInfiniteValue == 1,
isShowSaveBtn: this.dialogForm.saveBtnValue == 1
})
    • 参数说明：
    参数名 参数类型 是否必填 默认值 参数描述
    current Integer 是 无 当前展示的图片索引
    data Array 是 [] 图片的url集合
    isInfinite Boolean 否 false 是否无限滚动
    isShowSaveBtn Boolean 否 true 是否显示保存按钮

  • 消息提示弹窗：noticeDialog

    • 用法如下： 
      dialogModule.noticeDialog({
content: this.dialogForm.content,
hideTime: 3000, //消失时间，单位：毫秒
hasShadowBg: this.dialogForm.hasShadowBgValue == 1,
isCenterHorizontal: this.dialogForm.isCenterHorizontalValue == 1,
offsetX: this.dialogForm.offsetX,
offsetY: this.dialogForm.offsetY,
bgColor: this.dialogForm.bgColor,
textColor: this.dialogForm.textColor,
radius: this.dialogForm.radius
});
    • 参数说明：
    参数名 参数类型 是否必填 默认值 参数描述
    content String 否 空 内容
    hideTime Integer 否 2000 消失时间，单位：毫秒
    hasShadowBg Boolean 否 true 弹窗是否有半透明背景遮罩
    isCenterHorizontal Boolean 否 true 是否水平居中
    offsetX Integer 否 0 x偏移量，isCenterHorizontal为false时有效
    offsetY Integer 否 100 y偏移量
    bgColor String 否 #ffffff 背景颜色
    textColor String 否 #000000 文本颜色
    radius Integer 否 50 圆角

  • 依附弹窗（1.1.0）

    这是一个特殊的弹窗，使用该弹窗必须使用插件自定义的组件leven-popDialogAttach 来包裹你的视图内容，每个组件必须要传递一个属性fid用来确定是哪个组件需要出现弹窗 且同一个页面每个组件的fid不能重复，fid的取值范围1-10

    • 用法如下：
    • 视图代码 
      <leven-popDialogAttach ref="refDialogView" fid="1" @onError="error">
<view @click="attachList('refDialogView')"><text>第一个</text></view>
</leven-popDialogAttach>
<leven-popDialogAttach ref="refDialogView1" fid="2" @onError="error">
<view @click="attachList('refDialogView1')"><text>第二个</text></view>
</leven-popDialogAttach>
<leven-popDialogAttach ref="refDialogView3" fid="3" @onError="error">
<view @click="attachList('refDialogView3')"><text>第三个</text></view>
</leven-popDialogAttach>

      *js代码

      attachList(type) {
let data = {};
if (type == "refDialogView") {
// 列表
data.list = ["列表1", "列表2", "列表3", "长列表长列表"];
// 弹窗是否有半透明背景遮罩
data.hasShadowBg = false;
// 主题，0.普通主题，1.深色主题
data.theme = 1;
// 列表对齐方式,left center(默认) right
data.gravity = 'left'
} else if (type == "refDialogView1") {
data.list = ["列表11", "列表12", "列表13", "长列表长列表"];
} else {
data.list = ["列表21", "列表22", "列表23", "长列表长列表"];
data.gravity = 'right'
}
this.$refs[type].attachListDialog(data, res => {
console.log(res)
});
}
    • 内置方法：

    1 依附列表弹窗 attachListDialog

    • 参数说明：

      参数名 参数类型 是否必填 默认值 参数描述
      list Array 是 无 数据集合
      theme Integer 否 0 主题，0.普通主题，1.深色主题
      hasShadowBg Boolean 否 true 弹窗是否有半透明背景遮罩
      gravity String 否 center 列表对齐方式,left center right

    • 回调说明：

      参数名 参数类型 参数描述
      message String 消息提示
      data Object 数据对象
      data.position Integer 选中的索引
      data.text String 选中的内容描述
      code Integer 返回类型，0.成功，其他：失败

    2 依附水平列表弹窗（类似点赞效果） attachHorizontalListDialog

    • 参数说明：

      参数名 参数类型 是否必填 默认值 参数描述
      list Array 是 无 数据集合
      lineColor String 否 #eeeeee 间隔线的颜色
      textColor String 否 #ffffff 文本颜色
      bgColor String 否 #4D5063 背景颜色
      shadowColor String 否 无 阴影颜色
      shadowSize Integer 否 无 阴影大小
      radius Integer 否 8 圆角

    • 回调说明：

      参数名 参数类型 参数描述
      message String 消息提示
      data Object 数据对象
      data.position Integer 选中的索引
      data.text String 选中的内容描述
      code Integer 返回类型，0.成功，其他：失败

    3 依附内容弹窗 attachContentDialog

    • 参数说明：

      参数名 参数类型 是否必填 默认值 参数描述
      content String 否 无 内容
      textColor String 否 #ffffff 文本颜色
      bgColor String 否 #3b3c3d 背景颜色
      shadowColor String 否 无 阴影颜色
      shadowSize Integer 否 无 阴影大小
      radius Integer 否 8 圆角

    • 内置事件

    • onError 错误提示（具体可查看示例）

  • 购买插件前请先试用，试用通过再购买。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...