大数跨境
首页
>
你们期待的公开页使用教程来啦！
>

你们期待的公开页使用教程来啦！

你们期待的公开页使用教程来啦！ 白码
2021-01-18
0

点击蓝字


关注我们

为了让大家更好的使用白码系统，之前已经为大家出了自定义打印功能、扫描枪扫码录入以及数据按模板导出Excel格式等使用教程。那今天出的教程是大家呼声很高的公开页的使用说明，一起来看看吧~


公开页的基本使用流程

Function Description

公开页面即无需登录系统即可浏览的页面，通常用于问卷调查、数据分享等场景。下面介绍如何通过公开页实现问卷调查的功能。


准备工作

01

 启用公共用户

在用户管理界面点击“启用公共用户”按钮，外部人员即可通过“公共用户”无登录浏览公开页面。

注: 目前只能联系白码开启


02

 创建问卷数据表

创建问卷数据表用以保存外部用户在问卷公开页面填写的数据。


03

实现“新增问卷”的功能

外部人员在问卷公开页提交数据时，调用此功能保存数据。注意必须将功能发布上线。


04

记录“新增问卷”相关的id

1.功能id（flow）

打开功能编辑界面，地址栏flow/后面跟的24位英文数字即为功能id。

2.步骤id

选中“新增问卷表”步骤，鼠标移至右侧属性栏的“步骤>名称”处即可查看步骤id，单击id可快速复制。

3.步骤下所有属性的id

选中“新增问卷表”步骤，鼠标移至右侧属性栏的“操作”下的属性名即可查看属性id，单击id可快速复制。


实现步骤

1、创建“公开”类型的自定义页面。


2、进入编辑页，使用“文本”、“文本框”、和“按钮”排版问卷页面（本文只排版移动端）。


3、添加var（变量）类型的页面属性，与文本框对应（属性名最好使用英文）。


4、将页面属性与文本框的“数据>属性>文本>值”对应绑定。


5、设置“提交”按钮的触发事件，使用编程调用“新增问卷”功能。

1)将按钮的点击触发设为编程。

2)引用文本框对应的页面属性。

使用 $ctx.$$bpProp[“KEY”] 来引用页面属性，其中KEY为页面属性的属性名。

3)调用“新增问卷”功能。


向上滑动阅览


    //调用“新增问卷”功能

    $ctx.cmd({

        type: "program",//类型，此处固定为program

        value: {

            flow: "5fffb898f9af6d59999c68ec",//功能id

            skip: true,//true表示不弹出功能表单窗口，直接在后台运行

            data: {//功能的数据

                    "5fffb898f9af6d59999c68ee": {//步骤id：新增问卷

                   "5fffb7b590630c59a2f54ddb": companyName,//属性id：公司名

                   "5fffb7bad9c88959ace82fc5": name,//属性id：姓名

                   "5fffb83b90630c59a2f54de0": phone,//属性id：手机

                  "5fffb83e90630c59a2f54de1": post,//属性id：职务

                  "5fffb84390630c59a2f54de2": age,//属性id：年龄

                }

            }

        }

    });




6、提交1秒后关闭页面。

 function close() {

//关闭页面

        window.open("about:blank", "_self").close();

    }

 //1秒后关闭

    setTimeout("close()", 1000);

完整代码：


向上滑动阅览


function runViewAction(key, value, $ctx = ctx) {

    //引用文本框对应的页面属性

    let companyName = $ctx.$$bpProp["companyName"];//公司名

    let name = $ctx.$$bpProp["name"];//姓名

    let phone = $ctx.$$bpProp["phone"];//手机

    let post = $ctx.$$bpProp["post"];//职务

    let age = $ctx.$$bpProp["age"];//年龄

 

    //调用“新增问卷”功能

    $ctx.cmd({

        type: "program",//类型，此处固定为program

        value: {

            flow: "5fffb898f9af6d59999c68ec",//功能id

            skip: true,//true表示不弹出功能表单窗口，直接在后台运行

            data: {//功能的数据

                "5fffb898f9af6d59999c68ee": {//步骤id：新增问卷

                    "5fffb7b590630c59a2f54ddb": companyName,//属性id：公司名

                    "5fffb7bad9c88959ace82fc5": name,//属性id：姓名

                    "5fffb83b90630c59a2f54de0": phone,//属性id：手机

                    "5fffb83e90630c59a2f54de1": post,//属性id：职务

                    "5fffb84390630c59a2f54de2": age,//属性id：年龄

                }

            }

        }

    });

    function close() {

        //关闭页面

        window.open("about:blank", "_self").close();

    }

    //1秒后关闭

    setTimeout("close()", 1000);

}




7、将页面设计保存并退出。


8、鼠标移至“预览”按钮，使用弹出的二维码即可通过手机扫码打开此页面。

注意：此二维码将使用当前系统登录账号进入链接，实际场景中，请参考第10点的操作将页面分享给系统外部人员。


9、效果测试

1)直接点击“预览”，在新窗口打开页面，按F12将窗口调为移动端，并按F5刷新页面。

2)录入信息，并提交。

3)在数据库查看录入的数据。


10、分享公开页面给系统外部人员。

1)获取项目id

在系统页面按F12，在控制台输入 vue.$$project._id 并回车获取项目id

2)获取公开页面id

鼠标移至“ID”图标即可查看页面id

3)直接分享链接

链接格式：

https://v1.bnocode.com/app/项目id/页面id


例如：

  • 项目id：5ffbc04baa277d719552e7c1

  • 公开页面id：60056800995dc1097cd86994

则分享链接为：

https://v1.bnocode.com/app/5ffbc04baa277d719552e7c1/60056800995dc1097cd86994


4)通过二维码扫描打开

①按照上一步获取分享链接。

②创建一个任意自定义页，在自定义页添加一个二维码图层。

③将二维码的“数据>属性>二维码数值>默认值”设为分享链接。

④保存此二维码，即可通过此二维码分享给外部用户扫描。


最终效果





白码致力于为用户提供优质的服务，有任何疑惑欢迎联系白码客服或者前往白码官网了解更多信息~


更多 · 推荐

跨境医疗服务CRM解决方案

自定义打印功能使用教程

扫描枪快速扫码录入操作教程

数据按照模板导出Excel格式教程

条形码打印的功能的快速实现

白 码

扫二维码｜添加小助理微信

有任何问题

都可以咨询小助理哦

点

这里“阅读原文”，了解更多白码相关信息~

【声明】内容源于网络
0
0
白码
白码无代码 | 低代码开发平台可以帮助开发者和企业技术开发团队增加软件开发速度，降低开发成本，达到降本增效的目的。用户可以通过白码，按照企业所需自行定制ERP，CRM，OA等软件；成为白码开发者，把想法快速变成软件吧。
内容 125
粉丝 0
白码 白码无代码 | 低代码开发平台可以帮助开发者和企业技术开发团队增加软件开发速度，降低开发成本，达到降本增效的目的。用户可以通过白码，按照企业所需自行定制ERP，CRM，OA等软件；成为白码开发者，把想法快速变成软件吧。
总阅读39
粉丝0
内容125