在华为云Astro轻应用运行环境中，如何实现游客访问标准页面？

实现流程

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

图2 实现流程

操作步骤

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

   1. 登录华为云Astro轻应用服务控制台。
   2. 在主页中，单击“进入首页”，进入应用开发页面。
   3. 在“模板中心 > 低代码专区”中，搜索“健康打卡”，单击搜索到的“健康打卡”。
      图3 健康打卡
      
   4. 在弹出的页面，单击“安装模板”，安装完成后进入健康打卡应用设计器。

2. 测试标准页面功能。
   1. 在健康打卡应用设计器中，选择“界面”。
   2. 在“页面 > Page”目录中，单击“Health Punch”，查看此打卡页面。
      图4 查看打卡页面
      
   3. 在页面左下方单击“模型视图”，查看页面中使用到的模型。
      图5 查看页面中使用到的模型
      
   4. 在页面上方单击，预览页面，并在页面中输入打卡相关信息后，单击“提交”，测试页面功能是否正常。
      图6 测试页面功能
      

3. 上传一个跳转组件。
   1. 单击下载链接获取跳转组件包“Entrance4Std.zip”。
   2. 在华为云Astro轻应用服务控制台，单击“进入首页”，进入应用开发页面。
   3. 在页面左上方单击，选择“环境管理 > 环境配置”，进入环境配置。
   4. 在顶部菜单栏中，选择“维护”。
   5. 在“全局元素 > 页面资产管理 >组件”页面，单击“提交新组件”。
   6. 选择3.a中下载的组件，单击“提交”。
      图7 上传提交界面
      

4. 创建一个高级页面并配置标准页面的跳转事件。
   1. 返回健康打卡应用设计器，单击“界面 > 高级页面”后的“+”。
   2. 设置“标签”和“名称”为“mypage”，并选择“绝对布局”，单击“添加”。
   3. 在 “mypage”高级页面，选择“移动端”视图，单击图标区域最左边“组件列表” 图标 ，搜索自定义组件Entrance4Std，拖拽至画布。
      图8 拖拽组件Entrance4Std到画布
      
   4. 设置组件Entrance4Std的goToPageX事件。

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

      location.href="/besBaas/baas/abc/foundation/index.html#/命名空间__Health_healthPunch;
      其中，“命名空间__Health_healthPunch”为实际要跳转的标准页面名称。

      图9 设置组件Entrance4Std的事件
      
      图10 自定义动作
      
   5. 单击页面上方图标，单击发布页面，单击进行页面预览。
   6. 获取页面网址。
      单击，即可生成页面网址，用鼠标复制记录此地址。后续在运行环境中，需要改造此地址，改造后是游客访问的地址。

      图11 发布
      

      页面网址是弹出页面上“页面成功发布，网址是”后边的内容，不是浏览器的链接地址，格式如：华为云Astro轻应用开发环境域名/magno/render/mB3idrnEMC/命名空间__Health/view-mobile/mypage。

5. 编译发布应用到运行环境。
   1. 在应用设计器顶部，单击“发布 > 应用发布 > 一键部署”。
   2. 在一键部署页面，选择待部署的运行环境，单击“立即部署”。
      图12 一键部署
      
   3. 在确认部署页面，单击“立即部署”。
      在页面左下角的进行中，可查看部署进度，如图13所示。

      图13 查看部署进度
      

6. 在运行环境中配置标准页面中使用到的对象、接口、脚本等权限。
   1. 使用当前账号访问并登录运行环境。
   2. 选择“用户安全 > 权限”，在权限配置列表单击“Anonymous User Profile”。
      该权限为匿名用户访问华为云Astro轻应用时使用的权限，需要将用户使用到的资源进行匿名访问授权。

      图14 单击Anonymous User Profile
      
   3. 选择“自定义对象权限”页签，搜索“Health”，单击右上角的，勾选对象“命名空间__Health_follow__CST”、“命名空间__Health_healthPunch__CST”的全部权限，然后单击，保存设置。
      图15 授权自定义对象权限的“读取与创建”权限
      
   4. 在左侧选择“系统设置 > 系统参数”，然后在“内置系统参数”下，搜索“bingo.guest.api.route.whitelist”，单击参数名进入编辑，设置默认值为“否”。
      图16 搜索内置系统参数
      
      图17 修改bingo.guest.api.route.whitelist的值为“否”
      
   5. 参考上一步，修改内置系统参数“bingo.permission.resource.default.switch”值为“是”。
      图18 修改bingo.permission.resource.default.switch的值为“是”
      

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

   1. 复制开发环境中高级页面发布成功后的页面网址，此地址是在4.f中获取的。

      华为云Astro轻应用开发环境域名/magno/render/mB3idrnEMC/命名空间__Health/view-mobile/mypage
   2. 将开发环境域名替换为运行环境域名。

      华为云Astro轻应用运行环境域名/magno/render/mB3idrnEMC/命名空间__Health/view-mobile/mypage

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

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

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

   图19 访问高级页面，验证页面功能
   

扩展知识

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

制作二维码方法如下：

1. 使用开发者账号登录华为云Astro轻应用开发环境，进入一个应用。
2. 鼠标放在“Page”下，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。
3. 设置页面标签和名称，例如“testcode”，单击“添加”。
4. 参考图20，向标准页面中拖入一个二维码组件，在右侧属性面板中设置“内容或链接”为7.b改造后的地址。

   https://appcuberun.cn-north-4.huaweicloud.com/magno/render/命名空间__mypage_0000000000XXXXXXX/view-mobile/mypage
   华为云Astro轻应用运行环境域名/magno/render/mB3idrnEMC/命名空间__Health/view-mobile/mypage
   图20 配置二维码组件
   

   表1 二维码组件属性说明

   参数	说明
   内容或链接	设置扫描二维码后，要展示的文本内容或者跳转的链接地址。
   宽度	二维码的宽度，单位像素。 默认值：150
   容错级别	二维码被遮挡或残破时依然能被识别的几率，容错级别越高抗残破或遮挡的能力就越强。
   空白间距	四周空白间距，单位像素。
   前景色	二维码的颜色。
   背景色	背景颜色。
   中间Logo	二维码中间Logo图片，可不用设置。 设置Logo后，如果扫描二维码识别失败，可以调高容错级别或调大二维码。
   Logo大小	Logo大小，单位像素。

5. 单击页面上方保存页面，单击预览页面。
   图21 生成二维码
   

6. 将上一步生成的二维码分享给游客，游客通过微信或者支付宝扫描二维码，可扫码体验，进行健康打卡。