# 自建项目-搭建页面
# 插入图片/视频
# 1. 本地上传
图片：尺寸宽750*高自定义，单张图建议不大于500KB，若图片较长建议裁为多张
视频：视频格式支持MP4和m3u8格式，编码格式支持h264和m3u8。单个视频大小建议在100M以内，如果视频过大，建议压缩，压缩教程：https://zhuanlan.zhihu.com/p/272511989 (opens new window)
# 2. 远程上传
- 提供视频地址链接
# 配置点击跳转
step1：添加【行为】
step2：事件选择【点击】，动作选择【跳转链接】，URL填写跳转的链接，参数透传选择【是】
# 领取优惠券
说明：领取优惠券会检测用户的登陆状态，用户未登录情况下，会弹出登录弹窗
- 点击上方【行为组件】，找到【领取优惠券】并应用
插入设计好的领券图片
对图片进行【行为】配置，动作类型选择【领取优惠券】，可选择是否开启【画像】，画像ID在天璇平台生成。 *天璇画像请进入天璇画像平台 (opens new window)自行生成，目前仅能识别【用户规则】中创建的【规则ID】，教程参见天璇平台 xesv5.com (opens new window)
- 成功后行为：一般选择【弹出提示】或【跳转链接】或【用户画像条件】
- 弹出提示：配置领券后的提示文案，时长一般填3000（即3秒），示例：
- 跳转链接：可跳转至课程售卖页
- 用户画像条件：可根据用户是否购买某些课程或画像ID，跳转不同页面/链接
# 添加验证登陆
step1：打开组件库，添加组件【点击检测是否登录】和【H5和客户端的登录态】
step2：希望用户进入页面后直接登陆的，选中页面设置行为，参考下图
希望用户点击某按钮/图片后触发登陆的，选中对应按钮/图片设置行为，将事件改为【点击】
# 添加吸底按钮
step1：首先打开高级配置
step2：插入按钮图
step3：图片位置选择【正下方】，是否悬浮选择【是】
# 点击弹出图片
使用场景举例：点击按钮弹出公众号/微信二维码，引导用户扫码参与活动
- 插入点击内容（如图片、文字）和弹出内容
- 选中“点击内容”对应的图层，为它添加【修改组件属性】行为，组件选择“弹出内容”对应的图层，处理方式选择【隐藏/显示切换】
- 选中“弹出内容”对应的图层，按照第2步再配置一遍行为
- 【隐藏】“弹出内容”对应的图层
配置全操作示意：
# 点击唤起微信打开H5页面
场景：用户在网校客户端中点击按钮，调起微信打开目标页面。
# step 1. 配置行为动作
按钮配置「行为」属性，「动作」一栏选择「打开微信小程序」。
若动作下拉菜单中没有此项，点击「+添加其他行为」的弹窗中搜索「打开微信小程序」行为组件并添加应用。
# step 2. 配置动作属性
接下来配置动作属性，可根据将要访问的H5页面类型，分为天工生成的页面和其他H5页面来选用不同的配置方式。
# 目标页为天工平台生成的项目
比如，要打开页面 https://h5.xueersi.com/60fe536e8109b0e47dba7690.html，配置如下：
- 小程序原始ID：
gh_c46843a58e20 - 小程序页面路径：
pages/oldNew/newTemplate?p=60fe536e注意：
pages/oldNew/newTemplate?p=后面紧跟的值为天工项目ID的前8位
# 目标页其他H5页面
比如，要打开页面 https://touch.xueersi.com/，配置如下：
- 小程序原始ID：
gh_c46843a58e20 - 小程序页面路径：
pages/webview/index?url=https%3A%2F%2Ftouch.xueersi.com%2F注意：
pages/webview/index?url=后面紧跟的值为转码后的H5页面链接
# 转码页面URL有两个方法：
- 借助 chrome 浏览器，Mac：
Command + Option + J（Windows：Control + Shift + J） 调出控制台，输入encodeURIComponent('https://touch.xueersi.com/')回车即可。
- 借助第三方转码工具，比如
https://tool.oschina.net/encode?type=4