公开页的基本使用流程

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

准备工作：

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) 通过二维码扫描打开

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

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

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

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

最终效果：