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

实现流程

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

图1 实现流程

操作步骤

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

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

   1. 登录AstroZero开发环境，在首页“项目”下，单击“轻应用”。
      图2 单击轻应用
      
   2. 鼠标放在“健康打卡”应用模板上，会出现“查看模板”和“使用模板”图标，单击“使用模板”。
      图3 健康打卡
      
   3. 在弹窗中输入应用标签及名称“mypage”，单击“创建”。
      图4 设置应用标签及名称
      

2. 测试标准页面功能。
   1. 在“Page”目录中，单击“mypage_healthPunch”，查看此打卡页面。

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

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

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

      图6 查看页面中使用到的模型
      
   3. 在页面上方单击，预览页面，并在页面中输入打卡相关信息后，单击“提交”，测试页面功能是否正常。
      图7 测试页面功能
      

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

4. 创建一个高级页面并配置标准页面的跳转事件。
   1. 鼠标放在“Page”下，单击界面上出现的“+”，在弹出菜单中选择“高级页面”。
      图10 选择高级页面
      
   2. 页面模板选择“空白页”，设置“标签”和“名称”为“mypage”，并选择“绝对布局”，单击“添加”。
      图11 添加高级页面
      
   3. 单击 “mypage”高级页面，选择“手机”视图，单击图标区域最左边“组件列表” 图标 ，搜索自定义组件Entrance4Std，拖拽至画布。
      图12 拖拽组件Entrance4Std到画布
      
   4. 设置组件Entrance4Std的goToPageX事件。

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

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

      

      • 脚本中加粗的“hwtest”为当前租户的命名空间，“mypage”为标准页面所在的应用名，请根据实际情况替换。
      • 如果想跳转到其他标准页面，请替换“hwtest__mypage_healthPunch”为实际要跳转的标准页面名称。
      图13 设置组件Entrance4Std的事件
      

      图14 设置自定义动作
      
      图15 自定义动作
      

      

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

      图16 发布
      

      

      页面网址是弹出页面上“页面成功发布，网址是”后边的内容，不是浏览器的链接地址，格式如：“https://AstroZero域名/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage”。

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

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

      

6. 在运行环境中安装应用，并配置标准页面中使用到的对象、接口、脚本等权限。
   1. 使用当前租户开发者账号访问并登录AstroZero运行环境，或者直接在右上角单击账号名，在下拉菜单中选择“运行环境”。

      

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

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

      图18 在我的仓库安装应用
      
   3. 配置匿名访问权限。
      1. 在运行环境管理中心选择“用户管理 > 权限配置”，在权限配置列表单击“Anonymous User Profile”。
         该权限为匿名用户访问AstroZero时用的权限，需要将用户使用到的资源进行匿名访问授权。

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

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

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

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

      https://appcube.cn-north-4.huaweicloud.com/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage

      图24 开发环境中的页面地址
      
   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. 在无痕模式下，访问高级页面（即上一步改造后的地址）。

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

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

扩展知识

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

制作二维码方法如下：

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

   https://appcuberun.cn-north-4.huaweicloud.com/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage

   图26 配置二维码组件
   

   表1 二维码组件属性说明

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

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

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