文档首页> 应用魔方 AppCube> 最佳实践> 如何在运行环境中,实现游客访问标准页面
更新时间:2022-05-07 GMT+08:00
分享

如何在运行环境中,实现游客访问标准页面

在AppCube开发环境中,应用开发完成后,开发者帐号可预览高级页面和标准页面。当应用发布到运行环境后,游客可直接访问高级页面;标准页面本身属于管理后台的表单类页面,AppCube不支持游客直接访问和预览标准页面。

在运行环境中,若游客需要提交一个表单,该如何实现?本节将为您详细介绍实现方法。

实现流程

在开发环境中,用标准页面实现提交表单,在高级页面中引入自定义的跳转组件,该组件用于自动跳转到标准页面。发布到运行环境,在运行环境中,当游客访问该高级页面时,会自动跳转访问标准页面。

图1 实现流程

操作步骤

  1. 使用应用模板快速创建一个应用及标准页面。

    使用应用模板创建的应用中,默认包含有完整功能的标准页面。示例步骤中不单独创建标准页面,仅使用应用模板中的标准页面。该标准页面对应您实际开发过程中需要提供给游客访问的标准页面。

    1. 登录AppCube开发环境,在首页“项目”下,单击“轻应用”。

    2. 鼠标放在“健康打卡”应用模板上,会出现“查看模板”和“使用模板”图标,单击“使用模板”。

    3. 在弹窗中输入应用标签及名称“mypage”,单击“创建”。

  2. 测试标准页面功能。

    1. 在“Page”目录中,单击“mypage_healthPunch”,查看此打卡页面。

      其中,“mypage”为“应用名”,请根据实际情况查看。

    2. 在页面左下方单击“模型视图”,查看页面中使用到的模型。

      图中“hwtest”为租户的命名空间,请根据实际情况查看。

    3. 在页面上方单击,预览页面,并在页面中输入打卡相关信息后,单击“提交”,测试页面功能是否正常。

  3. 上传一个跳转组件。

    1. 单击下载链接获取跳转组件包“Entrance4Std.zip”,在应用开发工作台页面单击按钮,选择“高级页面 > 组件”,单击“提交新组件”,提交该组件到组件库中。
      图2 进入组件提交页面
      图3 上传提交界面

  4. 创建一个高级页面并配置标准页面的跳转事件。

    1. 鼠标放在“Page”下,单击界面上出现的“+”,在弹出菜单中选择“高级页面”。

    2. 页面模板选择“空白页”,设置“标签”和“名称”为“mypage”,并选择“绝对布局”,单击“添加”。

    3. 单击 “mypage”高级页面,选择“手机”视图,单击图标区域最左边“组件列表” 图标 ,搜索自定义组件Entrance4Std,拖拽至画布。
      图4 拖拽组件Entrance4Std到画布
    4. 设置组件Entrance4Std的goToPageX事件。

      在“事件”页签下,单击“goToPageX”后的齿轮图标,在弹窗中,单击“新建动作”,再单击“自定义 > 自定义动作”,在事件编辑下,输入如下代码,单击“确定”,再单击“确定”。

      location.href="/besBaas/baas/abc/foundation/index.html#/hwtest__mypage_healthPunch";

      脚本中加粗的“hwtest”为当前租户的命名空间,“mypage”为标准页面所在的应用名,请根据实际情况替换。

      若想跳转到其他标准页面,请替换“hwtest__mypage_healthPunch”为实际要跳转的标准页面名称。

      图5 设置组件Entrance4Std的事件
      图6 设置自定义动作
      图7 自定义动作

    5. 单击页面上方图标,单击发布页面,单击进行页面预览。
    6. 获取页面网址。
      单击,即可生成页面网址,用鼠标复制记录此地址。后续在运行环境中,需要改造此地址,改造后是游客访问的地址。
      图8 发布

      页面网址是弹出页面上“页面成功发布,网址是”后边的内容,不是浏览器的链接地址,格式如:“https://appcube.cn-north-4.huaweicloud.com/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage”。

  5. 编译发布应用到运行环境。

    1. 单击左下角,选择“设置”,在“编译设置”页面,确认包类型已选择“资产包”,并单击“保存”。
      图9 编译设置入口
    2. 单击,选择“编译”进行编译。
    3. 编译完成后,单击左下角,选择“我的仓库”,将应用程序安装包发布到当前租户的私仓。
    4. 填写版本信息,单击“发布”。

      发布成功后,页面显示“程序包已经被成功上传到我的仓库。”。

  6. 在运行环境中安装应用,并配置标准页面中使用到的对象、接口、脚本等权限。

    1. 使用当前租户开发者帐号访问并登录AppCube运行环境,或者直接在右上角单击帐号名,在下拉菜单中选择“运行环境”。

    2. 在运行环境首页,单击“我的仓库”,在我的仓库找到5发布的“mypage”应用,单击“安装”。

      如果“我的仓库”下没有待安装的“mypage”应用,您需要参考5中的操作方式,编译一个“资产包”应用,并选择发布到“我的仓库”。

      图10 进入我的仓库
      图11 在我的仓库安装应用
    3. 配置匿名访问权限。
      1. 在运行环境管理中心选择“用户管理 > 权限配置”,在权限配置列表单击“Anonymous User Profile”。
        该权限为匿名用户访问AppCube时用的权限。需要将用户使用到的资源进行匿名访问授权。
        图12 单击Anonymous User Profile
      2. 在“基本信息”页签,在“权限管理 > 工作流权限” 区域单击执行脚本后边的,勾选“执行脚本”。
        图13 授权"执行脚本"的权限
      3. 选择“自定义对象权限”页签,搜索“mypage”,单击右上角的,勾选对象“hwtest__mypage_follow__CST”、“hwtest__mypage_healthPunch__CST”的全部权限,然后单击,保存设置。
        图14 授权自定义对象权限的“读取与创建”权限
      4. 在右侧选择“系统参数”,然后在“内置系统参数”下,搜索“bingo.guest.api.route.whitelist”,单击参数名进入编辑,设置默认值为“否”。
        图15 搜索内置系统参数
        图16 修改“值”
      5. 参考上一步,修改内置系统参数“bingo.permission.resource.default.switch”值为“是”。
        图17 修改内置系统参数

  7. 制作游客访问的页面地址。

    为什么需要改造地址,不能直接使用高级页面的预览地址,这是因为高级页面中使用的是一个跳转组件,高级页面预览地址会自动跳转到标准页面,标准页面是不支持游客直接访问的,因此需要根据开发环境中发布的地址,改造成高级页面发布在运行环境的预览地址。

    1. 复制开发环境中高级页面发布成功后的页面网址,此地址是在4.f中获取的。
      https://appcube.cn-north-4.huaweicloud.com/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage
      图18 开发环境中的页面地址
    2. 将开发环境域名“https://appcube.cn-north-4.huaweicloud.com/”替换为运行环境域名 “https://appcuberun.cn-north-4.huaweicloud.com/”。
      https://appcuberun.cn-north-4.huaweicloud.com/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage

    此地址即为下一步需要访问的高级页面地址。

  8. 在无痕模式下访问高级页面(即上一步改造后的地址)。

    因高级页面中的跳转事件,访问高级页面时,将直接跳转至标准页面,在页面中提交打卡信息,验证页面功能。

扩展知识

标准页面预置了二维码组件,用于生成二维码。使用该组件可将游客访问的打卡页面地址做成二维码,后续可将此二维码直接分享给其他游客(匿名用户)扫码体检。

制作二维码方法如下:

  1. 使用开发者帐号登录AppCube开发环境,进入一个应用,例如1创建的“mypage”应用。
  2. 鼠标放在“Page”下,单击界面上出现的“+”,在弹出菜单中选择“标准页面”。
  3. 设置页面标签和名称,例如“testcode”,单击“添加”。
  4. 参考图19,向标准页面中拖入一个二维码组件,在右侧属性面板中设置“内容或链接”为7.b改造后的地址。
    https://appcuberun.cn-north-4.huaweicloud.com/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage
    图19 配置二维码组件
    表1 二维码组件属性说明

    属性

    说明

    内容或链接

    设置扫描二维码后,要展示的文本内容或者跳转的链接地址。

    宽度

    二维码的宽度,单位像素。

    默认值:150

    容错级别

    二维码被遮挡或残破时依然能被识别的几率,容错级别越高抗残破或遮挡的能力就越强。

    空白间距

    四周空白间距,单位像素。

    前景色

    二维码的颜色。

    背景色

    背景颜色。

    中间Logo

    二维码中间Logo图片,可不用设置。

    设置Logo后,如果扫描二维码识别失败,可以调高容错级别或调大二维码

    Logo大小

    Logo大小,单位像素。

  5. 单击页面上方保存页面,单击预览页面。
    图20 生成二维码
  6. 将上一步生成的二维码分享给游客,游客通过微信或者支付宝扫描二维码,可扫码体验,进行健康打卡。
分享:

    相关文档

    相关产品

close