腾讯云微搭低代码
常见问题中心 > 腾讯云微搭低代码 > 页面和组件相关问题

组件相关

如何使用自定义组件实现 PC/移动端显示不同的界面,实现跨端适配?

可以通过 CSS 媒体查询 mediaQuery 来实现。
单纯样式控制:直接通过 CSS 的媒体查询来实现跨端的样式。

@media (min-width: 620px){
.link-list{
row-gap: 20px;
column-gap: 20px;
grid-template-columns: 1fr 1fr;
}
}
组件交互不同:通过 JS 判断媒体查询,在组件中根据不同的屏幕尺寸返回不同的组件,例如微搭官方的表格组件,在小屏幕下使用卡片组件来显示。
//平台类方法,如 BOM、DOM、区分 H5 和 PC 端
import { useMediaQuery } from '@react-hookz/web';

export function usePlatform() {
const smallScreen = useMediaQuery('(max-width: 1024px)')
const touchDevice = useMediaQuery('(pointer:coarse)') ?? smallScreen;

return (touchDevice || smallScreen) ? 'h5' : 'pc';

}

如何实现组件与数据源绑定?

详情请参见 数据绑定

提供的表单组件中某个组件的文本内容该如何获取?

可以选择 change 事件触发 赋值 可获取 value,或参见 触发条件

“组件-表单文件上传 ”该组件上传的文件会存储到哪里?

文件会存在微搭的云服务器上,通过数据模型中的数据管理后台可以查看到这些文件或其他数据,详情请参见 管理数据

找不到图文列表?

先选择列表视图组件,然后右侧属性模板选择图文列表即可,还有其他模板也可以按需选用。

个人区块怎么去创建?

选中一个模块,单击下图红框保存为个人区块。

可以实现点击图片后隐藏图片吗?

  1. 创建普通变量,变量类型选择 boolean,初始值为 true。
  2. 选中图片组件,进入右侧配置区 > 通用配置页面,单击开启条件展示,绑定步骤1中的普通变量。
  3. 创建自定义方法,自定义方法中令变量=false。
  4. 选中上述图片组件,绑定自定义方法,点击时触发。

如何对地图进行操作标记?

表单地图组件不支持标记,需要用 API 自己封装前端组件,详情请参见 自定义组件。 

个人小程序能使用腾讯位置服务插件吗?

目前微搭平台暂时不能使用插件,已经支持了表单地图定位组件,可以是否满足需求。

目前在列表组件内支持不同管理用户查看不同部门的数据吗?

支持。

新建自定义应用,可以添加这样的节点组件吗?

不支持添加。

如果有一些复杂逻辑或者复杂页面微搭实现不了,要怎么跟微搭配合一起使用呢?

复杂逻辑或页面可以考虑用低代码编辑器自己写 JS 逻辑实现,同时也可以自己开发源码组件,满足对应场景。

页面相关

如何实现页面之间参数传递?

在微搭编辑器中,可通过配置页面参数来实现跳转传参功能,通常可用于实现对详情页面的内容控制。详情请参见 实现页面跳转传参

如何在应用或页面中展示数据源中的数据?for 循环和 if 循环如何实现?

详情请参见 循环展示与条件展示

什么是触发条件,如何设置触发条件?

详情请参见 触发条件

平台方法是什么?如何使用?

详情请参见 平台方法

顶部导航栏覆盖了侧边导航栏的内容,怎么解决呢?

不可以同时使用。

预览区和扫码预览都正常,体验版报错,体验版不可以点击?

下图报错不影响使用,link 不支持小程序,需要绑定点击事件平台方法 navigateTo (链接组件不支持小程序)。

如何从 event 获取表单的值呢?

在表单输入组件中,行为配置,change 输入改变事件,通过 event.detail.value 可获取组件值。

然后再赋值到变量上。

表单选择或多选等如何实现动态下拉列表?

  1. 新建一个数据源,叫做选项,增加 label 和 value 字段。
  2. 单击操作栏下更多 > 发布之后,进入数据管理后台。
  3. 在选项这个数据源下的正式和体验环境分别单击新建,录入几条测试数据。
  4. 回到编辑器中刷新页面,单击左上方变量,新建一个模型变量 options,然后选择上面建的数据源,变量初始化方法选择查询列表,单击保存
  5. 然后在表单选择的属性上,单击选项列表旁边的绑定按钮

    选择模型变量下的 records 字段,该字段是一个包含 label 和 value 的数组,可以绑定到选项列表上。
  6. 最后在预览区预览效果。

如何使用微搭实现上拉加载功能?

  1. 在区块中选择列表展示区块。
  2. 选择列表展示区块后会自动生成对应的数据源与自定义方法。
  3. 通过左上角菜单进入低码编辑器,选择区块生成的自定义方法 listLoadMore
  4. 按照如下注释对代码逻辑进行修改即可。
    export default async function({event}) {
    const meta = $page.dataset.state.wedaListMeta //此处替换为需要实现分页加载的模型变量
    console.log(meta);

    // $page.setState('dataset.state.$status.wedaListMeta.status', 'loading');
    app.utils.set($page, 'dataset.state.$status.wedaListMeta.status', 'loading')
    // $page.dataset.state.$status.wedaListMeta.status = 'loading'
    try {
    const data = await app.cloud.callDataSource({
    dataSourceName: 'weda_list_uun20hm',//此处替换为自己的数据源标识
    methodName: 'wedaGetRecords',
    params: {
    pageNo: meta.pageNo + 1,
    pageSize: meta.pageSize
    }
    })
    console.log(data)
    $page.setState({
    "wedaListMeta": { //此处替换为自己的模型变量名称
    pageNo: data.pageNo,
    pageSize: data.pageSize,
    total: data.total,
    records: meta.records.concat(data.records)
    }
    })
    app.utils.set($page, 'dataset.state.$status.wedaListMeta.status', 'success')
    // $page.dataset.state.$status.wedaListMeta.status = 'success'
    }catch(e){
    console.log(e)
    app.utils.set($page, 'dataset.state.$status.wedaListMeta.status', 'fail')
    // $page.dataset.state.$status.wedaListMeta.status = 'fail'
    }
    }

文字版块布局统一大小问题?

需要固定最上面文字组件的 width。

怎样可以让 H5 页面一打开就是第三方页面?

可通过代码向页面插入节点。例如插入一个 script,可以直接在生命周期里面写一个插入脚本的语句。

说明:

该方式只支持 H5,不支持小程序。

为什么图片在小程序端不显示?

小程序图片组件不支持高度 auto,可以把高度改为指定的尺寸。

应用创建后,数据源如何配置?

应用创建后,数据源可单击左上角的数据源,进入数据模型页面进行配置。

微信的那些 API 例如拍照,本地存储,微搭都能实现吗?

本地存储调用 localstorage 需要写低代码, 拍照上传用表单图片上传组件可以实现。

能不能在程序加载的时候自动得到 openid 和用户信息,而不用通过事件触发?

打开低码编辑器,每个页面都有一个 lifecycle 的那个文件。在那个文件里面调用获取 openid 的云函数。只支持 openid,用户信息不可以,用户信息必须是触发获取。

如何链接点击后的内容?点击卡片后跳转到详情页面?

详情可参见 实现内容列表到内容详情页的页面跳转逻辑

如何设置控件表单输入的宽度?

进入右侧样式 > 布局里可以设置。

如何实现将用户所选的地理位置信息存储到数据库?

可以通过表单提交的方式,将选择的点位储存到数据源。

放一张二维码的图片怎么实现长按扫码功能呢?

图片组件的配置项里有,只在小程序的自定义应用中支持。

自定义页面,表单中一个字段,想让他作为 key,不能重复,怎么设置?

进入数据模型页面,把对应的字段设置成唯一。

轮播图,图片数组是在数据模型中存的,怎么实现绑定图片数组?

用模型变量连接数据模型,然后给轮播容器下的图片组件绑定模型变量中对应的字段。

页面分上下两部分内容,上部分内容多的话可以垂直滚动,下部分内容固定在底部不动,怎么实现?

上方滚动内容用滚动容器承接,下方固定内容,样式-定位,选择绝对定位,下方间距配置0,这样就会固定在底部。

微搭素材库能批量删除素材吗?

目前不支持批量删除,可以单独删除。

地埋位置字段是不是只能用于小程序,不可以用于 Web 和 H5?

是支持小程序、H5 和 PC 端定位。

用模板新建的应用后,为什么在应用编辑器搜索不到“数据容器”组件?

数据容器不是一个组件,是一个组件的分类。

需要在 index.html 的 head 引入“引入百度统计”脚本,怎么引入,可以修改 index 吗?

可以。需要在 lifecycle 里写 js 进行动态修改,append 一段统计的 js。

微搭现在支持链接蓝牙打印机吗?

需要调用小程序蓝牙能力,详情请参见 蓝牙微信开放文档。 

时间展示在前端,如何转换为日期格式展示?

在表达式里面写 app.utils.formatDate(new Date(forItems.idxx.xxy), 'yyyy-mm-dd')。

在数据模型创建了一个表单,想做一个可以查询这个表单的页面,如何操作呢?

页面中实现搜索功能,详情请参见 搜索功能。 

微搭如何获得图片或文件的 URL 链接?

微搭为了保证您的资源安全,设置了防盗链逻辑,用户不可获得永久地址。

  • 在数据管理后台可以实现图片、文件的下载和管理。
  • 在应用内展示图片可以使用“图片”组件
  • 需要获得 URL 的场景可参见 在应用中使用数据源。 

使用的模板页面,删除了协议内容后,无法提交是什么原因?且页面也没有提示报错?

模板自定义方法中限制了必须同意协议按钮才能进行下一步提交,删除后 confirm 这个字段拿不到,所以提交失败。

数据源图片能支持上传多张吗?

字段设置页面中,如下图设置对应参数即可实现上传多张图片。

怎么解除循环展示?

选中对应组件,进入右侧属性面板高级属性页面,单击循环展示右侧,解除绑定。

如何将日期或时间格式化展示?

目前官方自定义应用中使用变量绑定模型应用都会自动将时间格式化。详情请参见 数据源自定义方法

微搭数据源模糊查询怎么写?如何实现多条模糊查询?

可通过低码编辑器进行数据源的绑定。更多查询操作请参见 查询指令

微搭怎么写联表查询呢?

可以在数据源的自定义方法中使用数据库的 lookup 功能实现。详情请参见 Aggregate.lookup 接口

如何实现从数据源多张数据表里取数据,按照一定公式计算,然后在页面展示?

用模型变量绑定 getRecord 方法查询,入参为输入框的值,再用低码编辑器给变量做公式计算。

使用表单容器中自带的绑定数据源新增记录,如何得到新增数据后返回的 _id 值?

看 create 方法有没返回值,有的话, 数据源的 success 里, 通过 event.detail 获取返回值。

提示发生异常该怎么处理?


某个分支兼容出了问题,可以选中其中任意一下组件,然后单击刷新,就可以恢复。

系统服务器只支持 HTTP 方法获取数据,需要以 text 格式发送 post 内容,如何能实现从服务器获取数据?

您可以使用自定义 API ** > **自定义代码的方式实现。详情请参见 自定义代码(云函数)

模板里面的《用户服务协议》和《隐私政策》,点击会出现详情页,需要修改详情的内容,在哪里修改呢?

可通过右侧属性,文本内容进行修改。

如何实现点击图片保存到相册功能?

目前在 H5 上是支持的,小程序暂不支持。

图片上传组件,上传图片后,如何获取到图片的fileId?

表单组件得 change 事件会返回这个数据,在 event.detail.value 可以获取到 fileId。

微搭的数据中的图片是否能导出(单独导出)?

场景就是:提交数据中有图片 然后需要图片进行打包下载或者导出。
数据管理后台可以直接下载,导出目前是 cloudid,需要通过转换成 HTTP 链接下载。

低代码编辑器里怎么进入微信JS sdk呢?

详情请参见 数据库文档

微搭里如何禁用事件冒泡呢?

目前不支持。

怎么改变地图在小程序上显示样式(长宽位置)?

表单容器里包普通容器然后再包地图定位。

如何使用选项卡组件配置固定在顶部不随页面滑动呢?

可以在选项卡内部放置一个滚动容器。

如何怎么实现联表查询?

可以在数据源的自定义方法中使用数据库的 lookup 功能实现,详情请参见 云开发文档

目录