公开页的基本使用流程
Roy
• 发表于:2021-03-11 18:39:55 • 更新于:2021-12-03 13:44:23
708

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

准备工作:

1、启用公共用户

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

公开页的基本使用流程

2、创建问卷数据表

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

公开页的基本使用流程

3、实现“新增问卷”的功能

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

公开页的基本使用流程

4、记录“新增问卷”相关的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:5fffbb6410da5304160d7014

则分享链接为:

https://v1.bnocode.com/app/5ffbc04baa277d719552e7c1/5fffbb6410da5304160d7014

 

4) 通过二维码扫描打开

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

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

公开页的基本使用流程

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

公开页的基本使用流程

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

 

最终效果:

公开页的基本使用流程


本文是否对您有帮助?
有帮助
没帮助
您是否遇到了以下问题?
内容过期或不准确
缺少场景、事例
链接有误
太简单,步骤待完善
其他
提交反馈
如需获取即时帮助,请联系
小助理
微信扫码添加小助理
让你的想法快速变成软件吧~
联系我们
售前咨询电话
020-88520693
意见箱 · 建议反馈
您的宝贵建议,使白码更完美!
微信扫码添加白码小助理