
Wot Design Uni 上新 Navbar 自定义导航栏组件 ,赶快进来看看效果吧!
Navbar 导航栏
为页面提供导航功能,常用于页面顶部。
地址
先看交互效果

:: tip 常见问题
右图标被小程序胶囊挡住?
在小程序平台开启自定义顶部导航时,右上角会固定显示胶囊,所以此时右侧插槽及选项是不建议使用。
如何设置为背景透明?
通过 custom-style
设置组件 background-color
为 transparent
。
<wd-navbar title="标题" custom-style="background-color: transparent !important;"></wd-navbar>
组件会被 video
覆盖?
video
为原生组件,层级较高,目前无法遮盖,需要具体平台具体分析。
::
基础用法
通过 title
属性设置导航栏标题。
<wd-navbar title="标题"></wd-navbar>
返回上级
在导航栏实现返回上级功能。
<wd-navbar title="标题" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>
function handleClickLeft() {
uni.navigateBack()
}
右侧按钮
在导航栏右侧添加可点击的按钮。
<wd-toast></wd-toast>
<wd-navbar title="标题" left-text="返回" left-arrow right-text="按钮" @click-left="handleClickLeft" @click-right="handleClickRight"></wd-navbar>
import { useToast } from '@/uni_modules/wot-design-uni'
const { show: showToast } = useToast()
function handleClickRight() {
showToast('按钮')
}
使用插槽
可以通过 left
和 right
插槽自定义导航栏两侧的内容。
<wd-navbar title="标题" left-text="返回" left-arrow>
<template #right>
<wd-icon name="search" size="18" />
</template>
</wd-navbar>
固定在顶部
通过 fixed
可以设置导航条固定在页面顶部,通过设置 placeholder
可以在顶部生成占位空间,通过设置 safeAreaInsetTop
可以开启顶部安全区的适配。
<wd-navbar fixed placeholder title="Navbar 导航条" left-arrow safeAreaInsetTop></wd-navbar>
禁用按钮
通过 left-disabled
或 right-disabled
属性来禁用两侧的按钮。按钮被禁用时透明度降低,且无法点击。
<wd-navbar title="标题" left-text="返回" right-text="按钮" left-arrow left-disabled right-disabled></wd-navbar>
胶囊样式
通过 capsule
插槽和 navbar-capsule
组件定制返回胶囊。
<wd-navbar title="标题" left-text="返回" right-text="设置" left-arrow>
<template #capsule>
<wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
</template>
</wd-navbar>
function handleBack() {
uni.navigateBack({})
}
function handleBackHome() {
uni.reLaunch({ url: '/pages/index/Index' })
}
带搜索栏
通过 title
插槽,自定义标题。
<wd-navbar left-text="返回" right-text="设置" left-arrow>
<template #title>
<view class="search-box">
<wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
</view>
</template>
</wd-navbar>
.search-box {
display: flex;
height: 100%;
align-items: center;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
}
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
title | 卡片标题 | string | - | '' | 0.1.33 |
leftText | 左侧文案 | string | - | '' | 0.1.33 |
rightText | 右侧文案 | string | - | '' | 0.1.33 |
leftArrow | 显示左侧箭头 | boolean | true, false | false | 0.1.33 |
bordered | 显示下边框 | boolean | true, false | true | 0.1.33 |
fixed | 固定到顶部 | boolean | true, false | false | 0.1.33 |
placeholder | 固定在顶部时,在标签位置生成一个等高的占位元素 | boolean | true, false | false | 0.1.33 |
zIndex | 导航栏 z-index | number | - | 1 | 0.1.33 |
safeAreaInsetTop | 开启顶部安全区适配 | boolean | true, false | false | 0.1.33 |
leftDisabled | 禁用左侧按钮,禁用时透明度降低,且无法点击 | boolean | true, false | false | 0.1.33 |
rightDisabled | 禁用右侧按钮,禁用时透明度降低,且无法点击 | boolean | true, false | false | 0.1.33 |
Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
click-left | 点击左侧按钮时触发 | - | 0.1.33 |
click-right | 点击右侧按钮时触发 | - | 0.1.33 |
Capsule Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
back | 点击返回按钮时触发 | - | 0.1.33 |
back-home | 点击返回首页按钮时触发 | - | 0.1.33 |
Slot
名称 | 说明 | 最低版本 |
---|---|---|
capsule | 自定义胶囊(当存在胶囊时,left不生效) | 0.1.33 |
left | 左侧内容 | 0.1.33 |
title | 标题内容 | 0.1.33 |
right | 右侧内容 | 0.1.33 |
外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式类 | 0.1.33 |
custom-style | 根节点样式 | 0.1.33 |
地址
Navbar 导航栏
为页面提供导航功能,常用于页面顶部。
地址
先看交互效果
:: tip 常见问题
右图标被小程序胶囊挡住?
在小程序平台开启自定义顶部导航时,右上角会固定显示胶囊,所以此时右侧插槽及选项是不建议使用。
如何设置为背景透明?
通过 custom-style
设置组件 background-color
为 transparent
。
<wd-navbar title="标题" custom-style="background-color: transparent !important;"></wd-navbar>
组件会被 video
覆盖?
video
为原生组件,层级较高,目前无法遮盖,需要具体平台具体分析。
::
基础用法
通过 title
属性设置导航栏标题。
<wd-navbar title="标题"></wd-navbar>
返回上级
在导航栏实现返回上级功能。
<wd-navbar title="标题" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>
function handleClickLeft() {
uni.navigateBack()
}
右侧按钮
在导航栏右侧添加可点击的按钮。
<wd-toast></wd-toast>
<wd-navbar title="标题" left-text="返回" left-arrow right-text="按钮" @click-left="handleClickLeft" @click-right="handleClickRight"></wd-navbar>
import { useToast } from '@/uni_modules/wot-design-uni'
const { show: showToast } = useToast()
function handleClickRight() {
showToast('按钮')
}
使用插槽
可以通过 left
和 right
插槽自定义导航栏两侧的内容。
<wd-navbar title="标题" left-text="返回" left-arrow>
<template #right>
<wd-icon name="search" size="18" />
</template>
</wd-navbar>
固定在顶部
通过 fixed
可以设置导航条固定在页面顶部,通过设置 placeholder
可以在顶部生成占位空间,通过设置 safeAreaInsetTop
可以开启顶部安全区的适配。
<wd-navbar fixed placeholder title="Navbar 导航条" left-arrow safeAreaInsetTop></wd-navbar>
禁用按钮
通过 left-disabled
或 right-disabled
属性来禁用两侧的按钮。按钮被禁用时透明度降低,且无法点击。
<wd-navbar title="标题" left-text="返回" right-text="按钮" left-arrow left-disabled right-disabled></wd-navbar>
胶囊样式
通过 capsule
插槽和 navbar-capsule
组件定制返回胶囊。
<wd-navbar title="标题" left-text="返回" right-text="设置" left-arrow>
<template #capsule>
<wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
</template>
</wd-navbar>
function handleBack() {
uni.navigateBack({})
}
function handleBackHome() {
uni.reLaunch({ url: '/pages/index/Index' })
}
带搜索栏
通过 title
插槽,自定义标题。
<wd-navbar left-text="返回" right-text="设置" left-arrow>
<template #title>
<view class="search-box">
<wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
</view>
</template>
</wd-navbar>
.search-box {
display: flex;
height: 100%;
align-items: center;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
}
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
title | 卡片标题 | string | - | '' | 0.1.33 |
leftText | 左侧文案 | string | - | '' | 0.1.33 |
rightText | 右侧文案 | string | - | '' | 0.1.33 |
leftArrow | 显示左侧箭头 | boolean | true, false | false | 0.1.33 |
bordered | 显示下边框 | boolean | true, false | true | 0.1.33 |
fixed | 固定到顶部 | boolean | true, false | false | 0.1.33 |
placeholder | 固定在顶部时,在标签位置生成一个等高的占位元素 | boolean | true, false | false | 0.1.33 |
zIndex | 导航栏 z-index | number | - | 1 | 0.1.33 |
safeAreaInsetTop | 开启顶部安全区适配 | boolean | true, false | false | 0.1.33 |
leftDisabled | 禁用左侧按钮,禁用时透明度降低,且无法点击 | boolean | true, false | false | 0.1.33 |
rightDisabled | 禁用右侧按钮,禁用时透明度降低,且无法点击 | boolean | true, false | false | 0.1.33 |
Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
click-left | 点击左侧按钮时触发 | - | 0.1.33 |
click-right | 点击右侧按钮时触发 | - | 0.1.33 |
Capsule Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
back | 点击返回按钮时触发 | - | 0.1.33 |
back-home | 点击返回首页按钮时触发 | - | 0.1.33 |
Slot
名称 | 说明 | 最低版本 |
---|---|---|
capsule | 自定义胶囊(当存在胶囊时,left不生效) | 0.1.33 |
left | 左侧内容 | 0.1.33 |
title | 标题内容 | 0.1.33 |
right | 右侧内容 | 0.1.33 |
外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式类 | 0.1.33 |
custom-style | 根节点样式 | 0.1.33 |
地址
收起阅读 »
关于在uniapp中使用v-html渲染html字符串时,html字符串内容过多且html内容渲染出来后超出可视区域的解决方案
问题:使用v-html渲染html字符串时,html字符串内容过多且html内容渲染出来后超出可视区域
- 在H5和app中解决方案
在h5中可使用canvas是绘制生成图片实现,app是通过缩放实现,为了适配不同机型需要动态计算一个缩放比,且缩放原点为style="transform-origin: top left;- 下载 npm install html2canvas
- 在渲染html的页面引入html2canvas
import html2canvas from 'html2canvas'
- 在template中编写
<!-- #ifdef APP-PLUS -->
<view v-if="!ratioX" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view v-if="!pdfImage" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>
<!-- #endif -->
<scroll-view scroll-y="true" scroll-with-animation="true" style="width: 100%; height: 100%; margin-top: 10rpx;">
<!-- #ifdef APP-PLUS -->
<view v-html="html" style="transform-origin: top left;" :style="{ 'transform': `scale(${ratioX})` }"></view>
<!-- #endif -->
<!-- #ifdef H5 -->
<img style="width: 100%; height: auto;" v-if="pdfImage" :src="pdfImage" alt="Rendered PDF"></img>
<!-- #endif -->
</scroll-view>
- 在data() {},中定义
data() {
return {
html: null,
pdfImage: null,
ratioX: null,
};
},
- 重点:通过接口获得html字符串并且生成图片
async onLoad(option) { await this.getPrictOrder() await this.$nextTick() setTimeout(async () => { // #ifdef H5 await this.convertToPDF() // #endif // #ifdef APP-PLUS await this.toGetContentToConvert() // #endif }, 0) } methods: { //计算ratioX,缩放比 toGetContentToConvert() { let winInfo = uni.getSystemInfoSync(); const query = uni.createSelectorQuery().in(this); query.select('#contentToConvert').boundingClientRect(data => { if (data.width === 0) { this.toGetContentToConvert() return } this.ratioX = winInfo.windowWidth / data.width }).exec(); }, convertToPDF() { return new Promise((resolve) => { setTimeout(() => { // #capture 就是我们要获取截图对应的 DOM 元素选择器 html2canvas(document.getElementById('contentToConvert'), { useCORS: true, // 【重要】开启跨域配置 allowTaint: true, // 允许跨域图片 }).then((canvas) => { this.pdfImage = canvas.toDataURL('image/jpeg'); }); uni.hideLoading() }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成 }); }, }
问题:使用v-html渲染html字符串时,html字符串内容过多且html内容渲染出来后超出可视区域
- 在H5和app中解决方案
在h5中可使用canvas是绘制生成图片实现,app是通过缩放实现,为了适配不同机型需要动态计算一个缩放比,且缩放原点为style="transform-origin: top left;- 下载 npm install html2canvas
- 在渲染html的页面引入html2canvas
import html2canvas from 'html2canvas'
- 在template中编写
<!-- #ifdef APP-PLUS -->
<view v-if="!ratioX" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view v-if="!pdfImage" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>
<!-- #endif -->
<scroll-view scroll-y="true" scroll-with-animation="true" style="width: 100%; height: 100%; margin-top: 10rpx;">
<!-- #ifdef APP-PLUS -->
<view v-html="html" style="transform-origin: top left;" :style="{ 'transform': `scale(${ratioX})` }"></view>
<!-- #endif -->
<!-- #ifdef H5 -->
<img style="width: 100%; height: auto;" v-if="pdfImage" :src="pdfImage" alt="Rendered PDF"></img>
<!-- #endif -->
</scroll-view>
- 在data() {},中定义
data() {
return {
html: null,
pdfImage: null,
ratioX: null,
};
},
- 重点:通过接口获得html字符串并且生成图片
async onLoad(option) { await this.getPrictOrder() await this.$nextTick() setTimeout(async () => { // #ifdef H5 await this.convertToPDF() // #endif // #ifdef APP-PLUS await this.toGetContentToConvert() // #endif }, 0) } methods: { //计算ratioX,缩放比 toGetContentToConvert() { let winInfo = uni.getSystemInfoSync(); const query = uni.createSelectorQuery().in(this); query.select('#contentToConvert').boundingClientRect(data => { if (data.width === 0) { this.toGetContentToConvert() return } this.ratioX = winInfo.windowWidth / data.width }).exec(); }, convertToPDF() { return new Promise((resolve) => { setTimeout(() => { // #capture 就是我们要获取截图对应的 DOM 元素选择器 html2canvas(document.getElementById('contentToConvert'), { useCORS: true, // 【重要】开启跨域配置 allowTaint: true, // 允许跨域图片 }).then((canvas) => { this.pdfImage = canvas.toDataURL('image/jpeg'); }); uni.hideLoading() }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成 }); }, }

uni-app实现弹出框组件禁止滚动穿透
在uni-app开发中,经常会使用弹出框、遮罩层以及日期选择器等组件,但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时,继续滑动会导致底层页面的滚动,这可能会影响用户体验。为了解决这个问题,我们可以采用以下方法。
滚动穿透是什么?
滚动穿透问题通常在使用弹出层、遮罩层或日期选择器等组件时出现。用户在组件内滚动内容时,当内容滚动到底部后,继续滑动可能导致底层页面也滚动,这不符合用户的期望。以下是两种解决方法。
解决方案
1. 禁止蒙版的滚动穿透
如果你想要禁止蒙版下的页面滚动,可以使用以下方法:
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>
<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>
在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow
属性,通过绑定 show10
变量的值来控制页面的滚动。当 show10
为 true
时,底层页面的滚动被禁止,从而解决了滚动穿透问题。
2. 禁止Popup内容区域的滚动穿透
注意:在h5平台可以通过动态修改
body
标签的样式,设置overflow:hidden
即可解决滚动穿透,无循进行本章节的配置
a) 使用 page-meta 组件动态修改 page-meta
的 overflow
属性
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>
<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>
这个方法与上述禁止蒙版滚动穿透的方法类似,但它专门用于禁止Popup内容区域的滚动穿透。
b) 将页面包裹在 <scroll-view> 标签中,并设置高度为100vh
<scroll-view style="height: 100vh;">
<!-- 页面内容 -->
</scroll-view>
通过将页面内容包裹在 <scroll-view>
标签中,并设置高度为100vh(即视口的高度),可以有效地防止Popup内容区域的滚动穿透。这种方法不需要额外的组件配置,非常简单。
关于 page-meta
page-meta 是一个用于指定页面属性和监听页面事件的组件,它可以部分替代 pages.json
的功能。它的引入使得在vue文件中配置页面属性成为可能,从而实现更灵活的页面管理。
尽管 page-meta
具有一定的替代作用,但在性能方面不如 pages.json
的配置。在新页面加载时,使用 pages.json
的方式更为高效。
综上所述,通过合理使用上述方法,你可以轻松解决uni-app中的滚动穿透问题,提升用户体验
完整实现
在uni-app开发中,经常会使用弹出框、遮罩层以及日期选择器等组件,但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时,继续滑动会导致底层页面的滚动,这可能会影响用户体验。为了解决这个问题,我们可以采用以下方法。
滚动穿透是什么?
滚动穿透问题通常在使用弹出层、遮罩层或日期选择器等组件时出现。用户在组件内滚动内容时,当内容滚动到底部后,继续滑动可能导致底层页面也滚动,这不符合用户的期望。以下是两种解决方法。
解决方案
1. 禁止蒙版的滚动穿透
如果你想要禁止蒙版下的页面滚动,可以使用以下方法:
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>
<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>
在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow
属性,通过绑定 show10
变量的值来控制页面的滚动。当 show10
为 true
时,底层页面的滚动被禁止,从而解决了滚动穿透问题。
2. 禁止Popup内容区域的滚动穿透
注意:在h5平台可以通过动态修改
body
标签的样式,设置overflow:hidden
即可解决滚动穿透,无循进行本章节的配置
a) 使用 page-meta 组件动态修改 page-meta
的 overflow
属性
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>
<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>
这个方法与上述禁止蒙版滚动穿透的方法类似,但它专门用于禁止Popup内容区域的滚动穿透。
b) 将页面包裹在 <scroll-view> 标签中,并设置高度为100vh
<scroll-view style="height: 100vh;">
<!-- 页面内容 -->
</scroll-view>
通过将页面内容包裹在 <scroll-view>
标签中,并设置高度为100vh(即视口的高度),可以有效地防止Popup内容区域的滚动穿透。这种方法不需要额外的组件配置,非常简单。
关于 page-meta
page-meta 是一个用于指定页面属性和监听页面事件的组件,它可以部分替代 pages.json
的功能。它的引入使得在vue文件中配置页面属性成为可能,从而实现更灵活的页面管理。
尽管 page-meta
具有一定的替代作用,但在性能方面不如 pages.json
的配置。在新页面加载时,使用 pages.json
的方式更为高效。
综上所述,通过合理使用上述方法,你可以轻松解决uni-app中的滚动穿透问题,提升用户体验
完整实现
可以参考 wot-design-uni
组件库的 popup
组件的实现。
Github
文档网站
插件市场
QQ群

有偿,写一个unicloud后台搜索功能
此需求已经有人帮忙实现。。结题。
有个管理后台的小需求,有偿求助。 [表情]
需求是对A表数据进行筛选。
有3个unicloud的表:
一张A表,
一张B表,
一张AB关联表(存的是A_id,B_id)。
需求是对A表数据进行筛选。操作看下图。在A表列表上,通过下拉选择1个B_id, 然后查询AB表,找出所有与B_id关联的A_id. 然后在A表中把这些数据显示出来 。
此需求已经有人帮忙实现。。结题。
有个管理后台的小需求,有偿求助。 [表情]
需求是对A表数据进行筛选。
有3个unicloud的表:
一张A表,
一张B表,
一张AB关联表(存的是A_id,B_id)。
需求是对A表数据进行筛选。操作看下图。在A表列表上,通过下拉选择1个B_id, 然后查询AB表,找出所有与B_id关联的A_id. 然后在A表中把这些数据显示出来 。

通用社区、论坛前端模板,无缝集成
星之链社区-通用前端模板
让你的项目无缝接入社区功能,组件高可复用,全端兼容
插件市场地址:https://ext.dcloud.net.cn/plugin?id=14841
星之链社区-通用前端模板
让你的项目无缝接入社区功能,组件高可复用,全端兼容
插件市场地址:https://ext.dcloud.net.cn/plugin?id=14841

Wot Design Uni 上新 Tabbar 标签栏组件 ,赶快进来看看效果吧!
Tabbar 标签栏
底部导航栏,用于在不同页面之间进行切换。
何时使用
- 需要定制底部导航栏时
地址
先看交互效果
基础用法
v-model
为绑定值,表示选中标签的索引值或者名称。
<wd-tabbar v-model="tabbar1">
<wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
import { ref } from 'vue'
const tabbar1 = ref('home')
通过名称匹配
通过设置 name
属性,可以通过名称匹配选中标签。
<wd-tabbar v-model="tabbar1">
<wd-tabbar-item name="home" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="cart" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="setting" title="设置" icon="setting"></wd-tabbar-item>
<wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
徽标提示
通过设置 value
属性,可以显示徽标提示,而设置 is-dot 属性后,会在图标右上角展示一个小红点。
<wd-tabbar v-model="tabbar5">
<wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" :value="200" title="最大值" icon="user"></wd-tabbar-item>
</wd-tabbar>
悬浮标签栏
通过设置 shape
属性为 round
,可以将标签栏设置为悬浮样式。
<wd-tabbar shape="round" v-model="tabbar2">
<wd-tabbar-item name="1" title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" title="分类" :value="2" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="3" title="相册" :value="30" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="4" title="我的" :value="200" icon="user"></wd-tabbar-item>
</wd-tabbar>
自定义图标
通过使用 <template #icon>
可以自定义标签页的图标。
<wd-tabbar v-model="tabbar4">
<wd-tabbar-item name="1" :value="2" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" :value="2" icon="cart" title="分类">
<template #icon>
<wd-img round height="40rpx" width="40rpx" src="https://unpkg.com/wot-design-uni-assets/panda.jpg"></wd-img>
</template>
</wd-tabbar-item>
<wd-tabbar-item name="3" :value="3" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
自定义颜色
通过设置 active-color
和 inactive-color
属性,可以自定义激活和未激活标签的颜色。
<wd-tabbar v-model="tabbar5" active-color="#ee0a24" inactive-color="#7d7e80">
<wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" :value="200" title="最大值" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
监听切换事件
通过监听 change
事件,可以获取选中标签的值。
<wd-tabbar v-model="tabbar6" @change="handleChange1" active-color="#ee0a24" inactive-color="#7d7e80">
<wd-tabbar-item name="1" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="5" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
function handleChange1({ value }: { value: string }) {
show(`选中标签:${value}`)
}
固定底部
通过设置 fixed
属性,可以将标签栏固定在底部;通过设置 placeholder
属性,可以在固定在底部时在标签位置生成一个等高的占位元素。
<wd-tabbar fixed v-model="tabbar3" bordered safeAreaInsetBottom placeholder>
<wd-tabbar-item name="1" :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" :value="200" title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
Tabbar Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
v-model/modelValue | 选中标签的索引值或者名称 | number / string | - | 0 | 0.1.27 |
fixed | 是否固定在底部 | boolean | - | false | 0.1.27 |
safeAreaInsetBottom | 是否设置底部安全距离(iPhone X 类型的机型) | boolean | - | false | 0.1.27 |
bordered | 是否显示顶部边框 | boolean | - | true | 0.1.27 |
shape | 标签栏的形状 | TabbarShape | 'default' / 'round' | 'default' | 0.1.27 |
activeColor | 激活标签的颜色 | string | - | - | 0.1.27 |
inactiveColor | 未激活标签的颜色 | string | - | - | 0.1.27 |
placeholder | 固定在底部时,是否在标签位置生成一个等高的占位元素 | boolean | - | false | 0.1.27 |
zIndex | tabbar组件的层级 | number | - | 500 | 0.1.27 |
Tabbar Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
change | tabbar标签切换时触发 | { value } |
0.1.27 |
Tabbar 外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式类 | 0.1.27 |
custom-style | 根节点样式 | 0.1.27 |
TabbarItem Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
title | 标签页的标题 | string | - | - | 0.1.27 |
name | 唯一标识符 | string / number | - | - | 0.1.27 |
icon | 图标 | string | - | - | 0.1.27 |
value | 徽标显示值 | number / string | - | - | 0.1.27 |
isDot | 是否点状徽标 | boolean | - | false | 0.1.27 |
max | 徽标最大值 | number | - | 99 | 0.1.27 |
TabbarItem Slots
name | 说明 | 参数 | 最低版本 |
---|---|---|---|
icon | 自定义图标 | active: boolean |
0.1.27 |
TabbarItem 外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式类 | 0.1.27 |
custom-style | 根节点样式 | 0.1.27 |
地址
Tabbar 标签栏
底部导航栏,用于在不同页面之间进行切换。
何时使用
- 需要定制底部导航栏时
地址
先看交互效果
基础用法
v-model
为绑定值,表示选中标签的索引值或者名称。
<wd-tabbar v-model="tabbar1">
<wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
import { ref } from 'vue'
const tabbar1 = ref('home')
通过名称匹配
通过设置 name
属性,可以通过名称匹配选中标签。
<wd-tabbar v-model="tabbar1">
<wd-tabbar-item name="home" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="cart" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="setting" title="设置" icon="setting"></wd-tabbar-item>
<wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
徽标提示
通过设置 value
属性,可以显示徽标提示,而设置 is-dot 属性后,会在图标右上角展示一个小红点。
<wd-tabbar v-model="tabbar5">
<wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" :value="200" title="最大值" icon="user"></wd-tabbar-item>
</wd-tabbar>
悬浮标签栏
通过设置 shape
属性为 round
,可以将标签栏设置为悬浮样式。
<wd-tabbar shape="round" v-model="tabbar2">
<wd-tabbar-item name="1" title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" title="分类" :value="2" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="3" title="相册" :value="30" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="4" title="我的" :value="200" icon="user"></wd-tabbar-item>
</wd-tabbar>
自定义图标
通过使用 <template #icon>
可以自定义标签页的图标。
<wd-tabbar v-model="tabbar4">
<wd-tabbar-item name="1" :value="2" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" :value="2" icon="cart" title="分类">
<template #icon>
<wd-img round height="40rpx" width="40rpx" src="https://unpkg.com/wot-design-uni-assets/panda.jpg"></wd-img>
</template>
</wd-tabbar-item>
<wd-tabbar-item name="3" :value="3" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
自定义颜色
通过设置 active-color
和 inactive-color
属性,可以自定义激活和未激活标签的颜色。
<wd-tabbar v-model="tabbar5" active-color="#ee0a24" inactive-color="#7d7e80">
<wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>
<wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" :value="200" title="最大值" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
监听切换事件
通过监听 change
事件,可以获取选中标签的值。
<wd-tabbar v-model="tabbar6" @change="handleChange1" active-color="#ee0a24" inactive-color="#7d7e80">
<wd-tabbar-item name="1" title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="5" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
function handleChange1({ value }: { value: string }) {
show(`选中标签:${value}`)
}
固定底部
通过设置 fixed
属性,可以将标签栏固定在底部;通过设置 placeholder
属性,可以在固定在底部时在标签位置生成一个等高的占位元素。
<wd-tabbar fixed v-model="tabbar3" bordered safeAreaInsetBottom placeholder>
<wd-tabbar-item name="1" :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>
<wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>
<wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>
<wd-tabbar-item name="4" :value="200" title="相册" icon="photo"></wd-tabbar-item>
<wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
Tabbar Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
v-model/modelValue | 选中标签的索引值或者名称 | number / string | - | 0 | 0.1.27 |
fixed | 是否固定在底部 | boolean | - | false | 0.1.27 |
safeAreaInsetBottom | 是否设置底部安全距离(iPhone X 类型的机型) | boolean | - | false | 0.1.27 |
bordered | 是否显示顶部边框 | boolean | - | true | 0.1.27 |
shape | 标签栏的形状 | TabbarShape | 'default' / 'round' | 'default' | 0.1.27 |
activeColor | 激活标签的颜色 | string | - | - | 0.1.27 |
inactiveColor | 未激活标签的颜色 | string | - | - | 0.1.27 |
placeholder | 固定在底部时,是否在标签位置生成一个等高的占位元素 | boolean | - | false | 0.1.27 |
zIndex | tabbar组件的层级 | number | - | 500 | 0.1.27 |
Tabbar Events
事件名称 | 说明 | 参数 | 最低版本 |
---|---|---|---|
change | tabbar标签切换时触发 | { value } |
0.1.27 |
Tabbar 外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式类 | 0.1.27 |
custom-style | 根节点样式 | 0.1.27 |
TabbarItem Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
---|---|---|---|---|---|
title | 标签页的标题 | string | - | - | 0.1.27 |
name | 唯一标识符 | string / number | - | - | 0.1.27 |
icon | 图标 | string | - | - | 0.1.27 |
value | 徽标显示值 | number / string | - | - | 0.1.27 |
isDot | 是否点状徽标 | boolean | - | false | 0.1.27 |
max | 徽标最大值 | number | - | 99 | 0.1.27 |
TabbarItem Slots
name | 说明 | 参数 | 最低版本 |
---|---|---|---|
icon | 自定义图标 | active: boolean |
0.1.27 |
TabbarItem 外部样式类
类名 | 说明 | 最低版本 |
---|---|---|
custom-class | 根节点样式类 | 0.1.27 |
custom-style | 根节点样式 | 0.1.27 |
地址
收起阅读 »
uniapp 开发的app作为宿主app集成uniapp开发的uni小程序
一直有需求,想做uniapp开发的宿主app的小程序,但是,官网上没有找到相关的文档,但官方确实也有提供该功能,功能不是十分完善,但是也几乎足够用了。当时找相关文档很辛苦,以下是官方大哥提供给的各api的相关文档介绍,为了大家不至于很难找,现整理下贴出来。
用法其实十分简单,在Hbuilder x中,目前已经集成了相关api,直接调用即可(配置后需提交云端打包后才能⽣效,真机运⾏时推荐使⽤⾃定义调试基座)。
关于宿主app使用的api
宿主App是通过uniMP模块管理uni⼩程序,云端打包时需要在宿主App项⽬的manifest.json中配置使⽤uni⼩
程序模块。 在"app-plus"->"modules"节点下添加"UniMP"模块,示例如下:
"app-plus" : {
"modules" : {
"UniMP": {
"description": "uni⼩程序"
}
},
//...
}
加载uniMP模块
在调⽤uni⼩程序API时需先调⽤uni.requireNativePlugin⽅法加载uni⼩程序管理模块。如果返回的mp为undefined,说明当前环境不⽀持uni⼩程序
示例如下:
const mp = uni.requireNativePlugin('uniMP');
//通过mp可调⽤⽅法操作uni⼩程序
mp.openUniMP({
appid:'⼩程序的appid'
});
installUniMP(options,callback)
通过wgt安装uni⼩程序到宿主App中,示例如下:
mp.installUniMP({
appid: 'uni⼩程序的appid',
wgtFile: 'uni⼩程序的wgt⽂件路径'
}, (ret)=>{
console.log('installUniMP: ' JSON.stringify(ret));
});
options参数说明
JSON Object类型
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
wgtFile | String | ⽆ | 是 | wgt资源⽂件路径 |
password | String | ⽆ | 否 | wgt解压密码 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
openUniMP(options,callback)
打开uni⼩程序,示例如下:
mp.openUniMP({
appid: 'uni⼩程序的appid'
}, (ret)=>{
console.log('openUniMP: ' JSON.stringify(ret));
});
options参数说明
JSON Object类型
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
icon | String | ⽆ | 否 | 启动⼩程序 splash ⻚⾯显示的图⽚,默认显示 app logo |
path | String | ⽆ | 否 | HBuilderX3.3.1 版本新增 <br />打开的⻚⾯路径,如果为空则打开⾸⻚。path 中 ?后⾯的部分会成为 query,注意:传⼊此参数后应⽤会重启 |
extraData | Object | ⽆ | 否 | HBuilderX3.3.1 版本新增 <br />需要传递给⽬标⼩程序的数据。⼩程序接收参考uni⼩程序中获取启动参数 |
fromAppid | String | ⽆ | 否 | HBuilderX3.3.1 版本新增<br /> 打开uni⼩程序的来源appid |
scene | Number | ⽆ | 否 | HBuilderX3.3.1 版本新增<br />启动⼩程序的场景值,由宿主⾃定义 |
openMode | String | present | 否 | HBuilderX3.5.1 版本新增<br />启动⼩程序的动画⽅式<br />present : 从当前⻚⾯下⾯打<br />push : 从当前⻚⾯右侧打开⼩程序 (仅ios⽀持) |
enableGestureClose | Boolean | true | 否 | HBuilderX3.5.1 版本新增<br />是否开启打开⼩程序时的动画 默认开启 (仅ios⽀持) |
enableHideAnimated | Boolean | true | 否 | HBuilderX3.5.1 版本新增<br />是否开启关闭⼩程序时的动画 默认开启 (仅ios⽀持) |
enableBackground | Boolean | true | 否 | HBuilderX3.5.1 版本新增<br />是否开启⼩程序后台运⾏的能⼒ 默认开启 如果设置为 false 退出⼩程序后⼩程序⽴即会被释放,下次打开后会重新加载 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
closeUniMP(appid,callback)
关闭已经运⾏的uni⼩程序,示例如下:
mp.closeUniMP('uni⼩程序的appid', (ret)=>{
console.log('closeUniMP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 关闭操作结果回调函数 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
hideUniMP(appid,callback)
隐藏运⾏在前台的uni⼩程序,示例如下:
mp.hideUniMP('uni⼩程序的appid', (ret)=>{
console.log('hideUniMP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 隐藏操作结果回调函数 |
callback回调参数说明
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
showUniMP(appid,callback)
将运⾏在后台的uni⼩程序切换到前台显示,示例如下:
mp.showUniMP('uni⼩程序的appid', (ret)=>{
console.log('showUniMP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 显示操作结果回调函数 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
getUniMPVersion(appid,callback)
获取安装的uni⼩程序版本信息,示例如下:
mp.getUniMPVersion('uni⼩程序的appid', (ret)=>{
console.log('getUniMPVersion: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 获取版本信息回调函数 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
versionInfo | Object | uni⼩程序的版本信息,参考versionInfo参数说明 |
versionInfo参数说明
属性 | 类型 | 说明 |
---|---|---|
name | String | 应⽤版本名称 (对应 manifest.json 中的 versionName) |
code | String | 应⽤版本号 (对应 manifest.json 中的 versionCode) |
onUniMPEventReceive(callback)
监听uni⼩程序发送的event事件,建议在宿主App的应⽤⽣命周期onLaunch中进⾏监听。在uni⼩程序中调
⽤uni.sendHostEvent发送event事件后触发。
示例如下:
export default {
onLaunch: function() {
console.log('Host App Launch');
//监听uni⼩程序发送的事件
mp.onUniMPEventReceive(ret=>{
console.log('Receive event from MP: ' JSON.stringify(ret));
});
},
//...
}
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
fromAppid | String | 发送事件的uni⼩程序的appid |
event | String | 事件名称,uni⼩程序中调⽤sendHostEvent传⼊的event参数 |
data | String或 Object | 传递的数据,⼩程序中调⽤sendHostEvent传⼊的data参数 |
sendUniMPEvent(appid,event,data,callback)
注:uni⼩程序必须处于运⾏状态,否则会发送失败
宿主App向uni⼩程序发送event事件,在uni⼩程序中调⽤uni.onHostEventReceive监听。
示例如下:
mp.sendUniMPEvent('uni⼩程序的appid', 'event事件名称', '要传递的数据', (ret) =>
{
//发送消息成功回调
console.log('Send event to MP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 说明 |
---|---|---|
appid | String | ⽬标⼩程序appid |
event | String | 事件名称 |
data | String或 Object | 传递的数据 |
setDefaultMenuItems(options,callback)
设置胶囊按钮菜单 ActionSheet 项
示例如下:
mp.setDefaultMenuItems({
items: [{
title: "关于",
id: "about"
}, {
title: "分享",
id: "share"
}]
}, ret => {
if (ret.id == "about") {
console.log("点击了 关于")
}
})
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
options | object | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 获取版本信息回调函数 |
options 参数说明
属性 | 类型 | 说明 |
---|---|---|
items | Array.<actionSheetItem> | ActionSheet 项 |
actionSheetItem 参数说明
属性 | 类型 | 说明 |
---|---|---|
title | String | ActionSheet 按钮的标题 |
id | String | 点击 ActionSheet 按钮返回的标识 |
callback回调参数说明
**
属性 | 类型 | 说明 |
---|---|---|
appid | String | ⽬标⼩程序的appid |
id | String | 成功时存在,返回被点击 ActionSheet 按钮对应的标识 |
uni⼩程序使⽤的API
获取启动参数
宿主App启动uni⼩程序传⼊的extraData参数可在⼩程序项⽬App.vue的应⽤⽣命周期onLaunch、onShow中
获取,
示例如下:
//⾸次启动
onLaunch: function(info) {
console.log('App Launch:',info);
}
//从后台切换到前台
onShow: function(info) {
console.log('App Launch:',info);
}
info参数说明
属性 | 类型 | 说明 |
---|---|---|
appId | String | 打开uni⼩程序时的来源应⽤appid |
extraData | Object | 启动时传递的数据 |
uni.sendHostEvent(event,data,ret,callback)
uni⼩程序向宿主App发送event事件,在宿主App中可调⽤onUniMPEventReceive监听接收event事件。
示例如下:
uni.sendHostEvent(event, data, (ret) => {
//发送消息成功回调
console.log('Send event to Host: ' JSON.stringify(ret));
});
参数说明
参数 | 类型 | 说明 |
---|---|---|
event | String | 事件名称 |
data | String 或 Object | 传递的数据 |
callback | Function(ret) | 操作回调函数,ret参数为SendHostEventRet类型 |
callback回调参数说明
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
uni.onHostEventReceive(callback)
uni⼩程序监听宿主App发送的event事件,建议在uni⼩程序应⽤⽣命周期onLaunch中监听。在uni宿主App
中调⽤sendUniMPEvent发送event事件后触发。
示例如下:
export default {
onLaunch: function() {
console.log('App Launch');
//监听宿主App通讯数据
uni.onHostEventReceive((event,data)=>{
console.log('Receive event(' event ') from HOST:
' JSON.stringify(data));
});
},
//...
}
callback回调参数说明
参数 | 类型 | 说明 |
---|---|---|
event | String | 事件名称,宿主调⽤sendUniMPEvent传⼊的event参数 |
data | String 或 Object | 传递的数据,宿主调⽤sendUniMPEvent传⼊的data参数 |
如何打包小程序
选中需要打包的项目
发行-原生APP制作应用wgt包,确定即可。
将wgt包防止到宿主项目中,mp.installUniMP中,wgtFile直接引用(以下是放到static文件夹下的applet文件夹示例)
mp.installUniMP({
appid: this.TRAIN_APPLET_APPID,
wgtFile: '/static/applet/ceshi.wgt',
},
一直有需求,想做uniapp开发的宿主app的小程序,但是,官网上没有找到相关的文档,但官方确实也有提供该功能,功能不是十分完善,但是也几乎足够用了。当时找相关文档很辛苦,以下是官方大哥提供给的各api的相关文档介绍,为了大家不至于很难找,现整理下贴出来。
用法其实十分简单,在Hbuilder x中,目前已经集成了相关api,直接调用即可(配置后需提交云端打包后才能⽣效,真机运⾏时推荐使⽤⾃定义调试基座)。
关于宿主app使用的api
宿主App是通过uniMP模块管理uni⼩程序,云端打包时需要在宿主App项⽬的manifest.json中配置使⽤uni⼩
程序模块。 在"app-plus"->"modules"节点下添加"UniMP"模块,示例如下:
"app-plus" : {
"modules" : {
"UniMP": {
"description": "uni⼩程序"
}
},
//...
}
加载uniMP模块
在调⽤uni⼩程序API时需先调⽤uni.requireNativePlugin⽅法加载uni⼩程序管理模块。如果返回的mp为undefined,说明当前环境不⽀持uni⼩程序
示例如下:
const mp = uni.requireNativePlugin('uniMP');
//通过mp可调⽤⽅法操作uni⼩程序
mp.openUniMP({
appid:'⼩程序的appid'
});
installUniMP(options,callback)
通过wgt安装uni⼩程序到宿主App中,示例如下:
mp.installUniMP({
appid: 'uni⼩程序的appid',
wgtFile: 'uni⼩程序的wgt⽂件路径'
}, (ret)=>{
console.log('installUniMP: ' JSON.stringify(ret));
});
options参数说明
JSON Object类型
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
wgtFile | String | ⽆ | 是 | wgt资源⽂件路径 |
password | String | ⽆ | 否 | wgt解压密码 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
openUniMP(options,callback)
打开uni⼩程序,示例如下:
mp.openUniMP({
appid: 'uni⼩程序的appid'
}, (ret)=>{
console.log('openUniMP: ' JSON.stringify(ret));
});
options参数说明
JSON Object类型
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
icon | String | ⽆ | 否 | 启动⼩程序 splash ⻚⾯显示的图⽚,默认显示 app logo |
path | String | ⽆ | 否 | HBuilderX3.3.1 版本新增 <br />打开的⻚⾯路径,如果为空则打开⾸⻚。path 中 ?后⾯的部分会成为 query,注意:传⼊此参数后应⽤会重启 |
extraData | Object | ⽆ | 否 | HBuilderX3.3.1 版本新增 <br />需要传递给⽬标⼩程序的数据。⼩程序接收参考uni⼩程序中获取启动参数 |
fromAppid | String | ⽆ | 否 | HBuilderX3.3.1 版本新增<br /> 打开uni⼩程序的来源appid |
scene | Number | ⽆ | 否 | HBuilderX3.3.1 版本新增<br />启动⼩程序的场景值,由宿主⾃定义 |
openMode | String | present | 否 | HBuilderX3.5.1 版本新增<br />启动⼩程序的动画⽅式<br />present : 从当前⻚⾯下⾯打<br />push : 从当前⻚⾯右侧打开⼩程序 (仅ios⽀持) |
enableGestureClose | Boolean | true | 否 | HBuilderX3.5.1 版本新增<br />是否开启打开⼩程序时的动画 默认开启 (仅ios⽀持) |
enableHideAnimated | Boolean | true | 否 | HBuilderX3.5.1 版本新增<br />是否开启关闭⼩程序时的动画 默认开启 (仅ios⽀持) |
enableBackground | Boolean | true | 否 | HBuilderX3.5.1 版本新增<br />是否开启⼩程序后台运⾏的能⼒ 默认开启 如果设置为 false 退出⼩程序后⼩程序⽴即会被释放,下次打开后会重新加载 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
closeUniMP(appid,callback)
关闭已经运⾏的uni⼩程序,示例如下:
mp.closeUniMP('uni⼩程序的appid', (ret)=>{
console.log('closeUniMP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 关闭操作结果回调函数 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
hideUniMP(appid,callback)
隐藏运⾏在前台的uni⼩程序,示例如下:
mp.hideUniMP('uni⼩程序的appid', (ret)=>{
console.log('hideUniMP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 隐藏操作结果回调函数 |
callback回调参数说明
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
showUniMP(appid,callback)
将运⾏在后台的uni⼩程序切换到前台显示,示例如下:
mp.showUniMP('uni⼩程序的appid', (ret)=>{
console.log('showUniMP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 显示操作结果回调函数 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
getUniMPVersion(appid,callback)
获取安装的uni⼩程序版本信息,示例如下:
mp.getUniMPVersion('uni⼩程序的appid', (ret)=>{
console.log('getUniMPVersion: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
appid | String | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 获取版本信息回调函数 |
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
message | String | 失败描述 |
versionInfo | Object | uni⼩程序的版本信息,参考versionInfo参数说明 |
versionInfo参数说明
属性 | 类型 | 说明 |
---|---|---|
name | String | 应⽤版本名称 (对应 manifest.json 中的 versionName) |
code | String | 应⽤版本号 (对应 manifest.json 中的 versionCode) |
onUniMPEventReceive(callback)
监听uni⼩程序发送的event事件,建议在宿主App的应⽤⽣命周期onLaunch中进⾏监听。在uni⼩程序中调
⽤uni.sendHostEvent发送event事件后触发。
示例如下:
export default {
onLaunch: function() {
console.log('Host App Launch');
//监听uni⼩程序发送的事件
mp.onUniMPEventReceive(ret=>{
console.log('Receive event from MP: ' JSON.stringify(ret));
});
},
//...
}
callback回调参数说明
JSON Object类型
属性 | 类型 | 说明 |
---|---|---|
fromAppid | String | 发送事件的uni⼩程序的appid |
event | String | 事件名称,uni⼩程序中调⽤sendHostEvent传⼊的event参数 |
data | String或 Object | 传递的数据,⼩程序中调⽤sendHostEvent传⼊的data参数 |
sendUniMPEvent(appid,event,data,callback)
注:uni⼩程序必须处于运⾏状态,否则会发送失败
宿主App向uni⼩程序发送event事件,在uni⼩程序中调⽤uni.onHostEventReceive监听。
示例如下:
mp.sendUniMPEvent('uni⼩程序的appid', 'event事件名称', '要传递的数据', (ret) =>
{
//发送消息成功回调
console.log('Send event to MP: ' JSON.stringify(ret));
});
参数说明
属性 | 类型 | 说明 |
---|---|---|
appid | String | ⽬标⼩程序appid |
event | String | 事件名称 |
data | String或 Object | 传递的数据 |
setDefaultMenuItems(options,callback)
设置胶囊按钮菜单 ActionSheet 项
示例如下:
mp.setDefaultMenuItems({
items: [{
title: "关于",
id: "about"
}, {
title: "分享",
id: "share"
}]
}, ret => {
if (ret.id == "about") {
console.log("点击了 关于")
}
})
参数说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
options | object | ⽆ | 是 | uni⼩程序的appid |
callback | Function | ⽆ | 是 | 获取版本信息回调函数 |
options 参数说明
属性 | 类型 | 说明 |
---|---|---|
items | Array.<actionSheetItem> | ActionSheet 项 |
actionSheetItem 参数说明
属性 | 类型 | 说明 |
---|---|---|
title | String | ActionSheet 按钮的标题 |
id | String | 点击 ActionSheet 按钮返回的标识 |
callback回调参数说明
**
属性 | 类型 | 说明 |
---|---|---|
appid | String | ⽬标⼩程序的appid |
id | String | 成功时存在,返回被点击 ActionSheet 按钮对应的标识 |
uni⼩程序使⽤的API
获取启动参数
宿主App启动uni⼩程序传⼊的extraData参数可在⼩程序项⽬App.vue的应⽤⽣命周期onLaunch、onShow中
获取,
示例如下:
//⾸次启动
onLaunch: function(info) {
console.log('App Launch:',info);
}
//从后台切换到前台
onShow: function(info) {
console.log('App Launch:',info);
}
info参数说明
属性 | 类型 | 说明 |
---|---|---|
appId | String | 打开uni⼩程序时的来源应⽤appid |
extraData | Object | 启动时传递的数据 |
uni.sendHostEvent(event,data,ret,callback)
uni⼩程序向宿主App发送event事件,在宿主App中可调⽤onUniMPEventReceive监听接收event事件。
示例如下:
uni.sendHostEvent(event, data, (ret) => {
//发送消息成功回调
console.log('Send event to Host: ' JSON.stringify(ret));
});
参数说明
参数 | 类型 | 说明 |
---|---|---|
event | String | 事件名称 |
data | String 或 Object | 传递的数据 |
callback | Function(ret) | 操作回调函数,ret参数为SendHostEventRet类型 |
callback回调参数说明
属性 | 类型 | 说明 |
---|---|---|
type | String | "success" 表示成功, "fail" 表示失败 |
code | Number | 成功返回 0,失败返回相应 code 码 |
uni.onHostEventReceive(callback)
uni⼩程序监听宿主App发送的event事件,建议在uni⼩程序应⽤⽣命周期onLaunch中监听。在uni宿主App
中调⽤sendUniMPEvent发送event事件后触发。
示例如下:
export default {
onLaunch: function() {
console.log('App Launch');
//监听宿主App通讯数据
uni.onHostEventReceive((event,data)=>{
console.log('Receive event(' event ') from HOST:
' JSON.stringify(data));
});
},
//...
}
callback回调参数说明
参数 | 类型 | 说明 |
---|---|---|
event | String | 事件名称,宿主调⽤sendUniMPEvent传⼊的event参数 |
data | String 或 Object | 传递的数据,宿主调⽤sendUniMPEvent传⼊的data参数 |
如何打包小程序
选中需要打包的项目
发行-原生APP制作应用wgt包,确定即可。
将wgt包防止到宿主项目中,mp.installUniMP中,wgtFile直接引用(以下是放到static文件夹下的applet文件夹示例)
mp.installUniMP({
appid: this.TRAIN_APPLET_APPID,
wgtFile: '/static/applet/ceshi.wgt',
},
收起阅读 »

ios云打包获取微信权限提示
在 app-plus 下添加才能弹出自己添加的提示,只在权限配置中添加无效果,提交APP STORE审核时会被退回
"locales" : {
"zh" : {
// 中文(简体)
"name" : "****平台", // 应用名称
"android" : {
"strings" : {
//Android平台自定义字符串
"CustomKey" : "CustomValue"
}
},
//...
"ios" : {
"privacyDescription" : {
"NSPhotoLibraryUsageDescription" : "获取相册读权限用于上传照片",
"NSCameraUsageDescription" : "获取摄像头权限用于快捷拍照功能",
"NSLocationWhenInUseUsageDescription" : "用于计算距离与APP功能",
"NSLocationAlwaysUsageDescription" : "用于计算距离与APP功能",
"NSLocationAlwaysAndWhenInUseUsageDescription" : "用于计算距离与APP功能"
},
"infoPlist" : {
//iOS平台自定义InfoPlist.strings
"CustomKey" : "CustomValue"
}
}
}
},
在 app-plus 下添加才能弹出自己添加的提示,只在权限配置中添加无效果,提交APP STORE审核时会被退回
"locales" : {
"zh" : {
// 中文(简体)
"name" : "****平台", // 应用名称
"android" : {
"strings" : {
//Android平台自定义字符串
"CustomKey" : "CustomValue"
}
},
//...
"ios" : {
"privacyDescription" : {
"NSPhotoLibraryUsageDescription" : "获取相册读权限用于上传照片",
"NSCameraUsageDescription" : "获取摄像头权限用于快捷拍照功能",
"NSLocationWhenInUseUsageDescription" : "用于计算距离与APP功能",
"NSLocationAlwaysUsageDescription" : "用于计算距离与APP功能",
"NSLocationAlwaysAndWhenInUseUsageDescription" : "用于计算距离与APP功能"
},
"infoPlist" : {
//iOS平台自定义InfoPlist.strings
"CustomKey" : "CustomValue"
}
}
}
},

【报名开启】探索数字化未来,共赴DCloud & 支付宝小程序云战略合作分享会
随着移动互联网的迅猛发展,小程序正成为企业与用户互动的重要方式,小程序以低成本、低门槛、易传播、易维护等特点受到广泛青睐,小程序云开发技术应运而生。支付宝小程序云是蚂蚁集团提供的以云原生高可用为基础,降低成本,免运维,高并发业务支撑的服务端解决方案,它在技术上与支付宝生态无缝对接,在业务上与支付宝营销活动深度结合,能够有效为企业提高经营效率,并且助力行业数字化转型。
支付宝小程序云与DCloud公司达成战略合作,将于10月24日 在 北京市举办支付宝小程序云XDCloud战略合作分享会,本次战略合作将为小程序云引入更多前沿技术与创新理念,助力企业加速实现数字化转型。DCloud公司作为一家具有创新精神和技术实力的科技企业,国内领先的移动应用开发平台供应商,致力于为开发者提供高效、易用的移动应用开发解决方案。
本次合作将为企业和开发者带来更多的创新机会,共同推动小程序云的发展和应用。届时会议将正式宣布合作关系,分享双方合作的愿景和相关战略规划,并从多维度介绍小程序云的核心产品亮点功能,分享其在企业数字化转型中的成功案例,以及支付宝小程序云客户日专享优惠政策等。
本场会议将为与会者提供一个深入了解支付宝小程序云和Dcloud公司合作的机会,让您充分了解我们的产品与技术,并与行业大咖进行面对面的交流与探讨。我们诚邀您莅临现场,与我们一同见证这一创新合作的诞生。
会议时间:10月24日 14:00-17:30
会议地点:北京中关村皇冠假日酒店三层皇冠宴会厅B厅
活动议程
报名方式
请您使用支付宝/钉钉扫描下方二维码完成报名,更多活动信息我们将在活动钉群内同步
打开【支付宝/钉钉】扫码报名
我们期待与您在10月24日共同迎接这一创新合作分享会的到来!现场还有惊喜周边等你领取哦~
随着移动互联网的迅猛发展,小程序正成为企业与用户互动的重要方式,小程序以低成本、低门槛、易传播、易维护等特点受到广泛青睐,小程序云开发技术应运而生。支付宝小程序云是蚂蚁集团提供的以云原生高可用为基础,降低成本,免运维,高并发业务支撑的服务端解决方案,它在技术上与支付宝生态无缝对接,在业务上与支付宝营销活动深度结合,能够有效为企业提高经营效率,并且助力行业数字化转型。
支付宝小程序云与DCloud公司达成战略合作,将于10月24日 在 北京市举办支付宝小程序云XDCloud战略合作分享会,本次战略合作将为小程序云引入更多前沿技术与创新理念,助力企业加速实现数字化转型。DCloud公司作为一家具有创新精神和技术实力的科技企业,国内领先的移动应用开发平台供应商,致力于为开发者提供高效、易用的移动应用开发解决方案。
本次合作将为企业和开发者带来更多的创新机会,共同推动小程序云的发展和应用。届时会议将正式宣布合作关系,分享双方合作的愿景和相关战略规划,并从多维度介绍小程序云的核心产品亮点功能,分享其在企业数字化转型中的成功案例,以及支付宝小程序云客户日专享优惠政策等。
本场会议将为与会者提供一个深入了解支付宝小程序云和Dcloud公司合作的机会,让您充分了解我们的产品与技术,并与行业大咖进行面对面的交流与探讨。我们诚邀您莅临现场,与我们一同见证这一创新合作的诞生。
会议时间:10月24日 14:00-17:30
会议地点:北京中关村皇冠假日酒店三层皇冠宴会厅B厅
活动议程
报名方式
请您使用支付宝/钉钉扫描下方二维码完成报名,更多活动信息我们将在活动钉群内同步
打开【支付宝/钉钉】扫码报名
我们期待与您在10月24日共同迎接这一创新合作分享会的到来!现场还有惊喜周边等你领取哦~
收起阅读 »
apk加固后重签名
准备工作:
- 加固apk文件下载到本地
- 配置java 环境变量 (具体可以百度搜索相关配置教程,本地有java开发环境 这步可跳过)
- 下载附件apksigner.zip 里面有apksigner.jar
开始签名:
使用安卓官方apksigner工具进行v2重签名,重签名请使用原证书进行签名
java -jar xxxx/lib/apksigner.jar sign --min-sdk-version=17 --ks 签名文件路径 --ks-key-alias 密钥别名 --ks-pass pass:密钥密码 --in 指定要签名的apk路径
--out 指定签名后的apk输出路径
命令:
--ks 指定签名文件 云端证书:从dev开发者后台-我的应用-应用详情页-Android云端证书页-下载证书
--ks-key-alias 密钥别名 云端证书: 从dev开发者后台-我的应用-应用详情页-Android云端证书页-查看证书详情 详情页有别名
--ks-pass 密钥密码(使用的是ks签名方式需要,赋值格式pass:密钥密码) 云端证书: 从dev开发者后台-我的应用-应用详情页-Android云端证书页-查看证书详情
点击查看证书密码按钮 获取密码
准备工作:
- 加固apk文件下载到本地
- 配置java 环境变量 (具体可以百度搜索相关配置教程,本地有java开发环境 这步可跳过)
- 下载附件apksigner.zip 里面有apksigner.jar
开始签名:
使用安卓官方apksigner工具进行v2重签名,重签名请使用原证书进行签名
java -jar xxxx/lib/apksigner.jar sign --min-sdk-version=17 --ks 签名文件路径 --ks-key-alias 密钥别名 --ks-pass pass:密钥密码 --in 指定要签名的apk路径
--out 指定签名后的apk输出路径
命令:
--ks 指定签名文件 云端证书:从dev开发者后台-我的应用-应用详情页-Android云端证书页-下载证书
--ks-key-alias 密钥别名 云端证书: 从dev开发者后台-我的应用-应用详情页-Android云端证书页-查看证书详情 详情页有别名
--ks-pass 密钥密码(使用的是ks签名方式需要,赋值格式pass:密钥密码) 云端证书: 从dev开发者后台-我的应用-应用详情页-Android云端证书页-查看证书详情
点击查看证书密码按钮 获取密码