文档首页> 应用魔方 AppCube> 最佳实践> 如何在运行环境中，实现游客访问标准页面

更新时间：2022-08-29 GMT+08:00

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

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

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

实现流程

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

图1 实现流程

操作步骤

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

使用应用模板创建的应用中，默认包含有完整功能的标准页面。示例步骤中不单独创建标准页面，仅使用应用模板中的标准页面。该标准页面对应您实际开发过程中需要提供给游客访问的标准页面。
1. 登录AppCube开发环境，在首页“项目”下，单击“轻应用”。
2. 鼠标放在“健康打卡”应用模板上，会出现“查看模板”和“使用模板”图标，单击“使用模板”。
3. 在弹窗中输入应用标签及名称“mypage”，单击“创建”。
测试标准页面功能。
1. 在“Page”目录中，单击“mypage_healthPunch”，查看此打卡页面。
  其中，“mypage”为“应用名”，请根据实际情况查看。
2. 在页面左下方单击“模型视图”，查看页面中使用到的模型。
  图中“hwtest”为租户的命名空间，请根据实际情况查看。
3. 在页面上方单击，预览页面，并在页面中输入打卡相关信息后，单击“提交”，测试页面功能是否正常。
上传一个跳转组件。
1. 单击下载链接获取跳转组件包“Entrance4Std.zip”，在应用开发工作台页面单击按钮，选择“高级页面 > 组件”，单击“提交新组件”，提交该组件到组件库中。
  图2 进入组件提交页面
  
  图3 上传提交界面
创建一个高级页面并配置标准页面的跳转事件。
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”。
编译发布应用到运行环境。
1. 单击左下角，选择“设置”，在“编译设置”页面，确认包类型已选择“资产包”，并单击“保存”。
  图9 编译设置入口
2. 单击，选择“编译”进行编译。
3. 编译完成后，单击左下角，选择“我的仓库”，将应用程序安装包发布到当前租户的私仓。
4. 填写版本信息，单击“发布”。
  发布成功后，页面显示“程序包已经被成功上传到我的仓库。”。
在运行环境中安装应用，并配置标准页面中使用到的对象、接口、脚本等权限。
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 修改内置系统参数
制作游客访问的页面地址。

为什么需要改造地址，不能直接使用高级页面的预览地址，这是因为高级页面中使用的是一个跳转组件，高级页面预览地址会自动跳转到标准页面，标准页面是不支持游客直接访问的，因此需要根据开发环境中发布的地址，改造成高级页面发布在运行环境的预览地址。
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
```
此地址即为下一步需要访问的高级页面地址。
在无痕模式下访问高级页面（即上一步改造后的地址）。
因高级页面中的跳转事件，访问高级页面时，将直接跳转至标准页面，在页面中提交打卡信息，验证页面功能。

扩展知识

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

制作二维码方法如下：

使用开发者帐号登录AppCube开发环境，进入一个应用，例如1创建的“mypage”应用。
鼠标放在“Page”下，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。
设置页面标签和名称，例如“testcode”，单击“添加”。

参考图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大小，单位像素。