支付宝小程序嵌入H5

> 在小程序中嵌入H5作品链接。
支持作品类型:互动、翻页H5、长页H5、表单。

# 准备
1. 支付宝小程序
2. 开发对接接口
3. 内容中台作品

# 支付宝小程序配置

1. 登录支付宝小程序开放平台
https://open.alipay.com

2. 创建小程序
如果已有小程序，直接使用小程序即可
https://open.alipay.com/develop/manage
小程序一定要是**企业账号**创建的，个人账号功能会受限。

![](/media/202212/2022-12-27_132814_870918.png)

3. 开发设置
小程序创建好后，根据自己开发需要配置加密、服务器ip白名单等信息。

![](/media/202212/2022-12-27_132845_321759.png)

4. 配置业务域名
针对小程序内打开 H5 页面，提供 web-view 组件内嵌，需配置 H5 页面的域名地址。
比如，要在web-view 中嵌入的地址为 https://eqs.eqxiu.cn/v/104543?cc=25THPMw7 
则需要配置业务域名为：https://eqs.eqxiu.cn

支付宝小程序业务域名配置入口
	![](/media/202212/2022-12-27_132957_924538.png)
	
	输入业务域名地址，点击下载校验文件，把下载下来的校验文件，发给易企秀，等待易企秀配置好后，点击确定保存。
	![](/media/202212/2022-12-27_133115_200173.png)
	
	易企秀自定义二级域名设置是在内容中台控制台->企业设置
	![](/media/202212/2022-12-27_133214_389510.png)
	
# 嵌入H5授权模式选择

1. 无授权模式
直接在小程序的web-view的src中嵌入作品链接即可。
例如：
```
<web-view src="https://h5.eqxiu.cn/gs/Yh7d8JaC"></web-view>
```
2.  手机号授权模式
同 “无授权模式”

3. 自定义授权模式
-  授权页授权
同 “无授权模式”

-  code授权
code授权需要生成用户的临时code码，跳转时用于获取用户信息
例如：
```
<web-view src="https://h5.eqxiu.cn/gs/Yh7d8JaC?code=eqxiu_528a3021d1d34d56a"></web-view>
```

code授权需要企业参与开发对接

# 开发对接接口

1. 对接业务流程
对接业务流程图

![](/media/202212/2022-12-27_133529_180502.png)

开发规则以及更多对接信息参见https://hc.eqxiu.cn/doc/23/
	
2. 逻辑说明
	1. 访客登录支付宝小程序
	2. 企业获取到支付宝小程序的用户信息
	3. 企业将支付宝小程序用户信息放入缓存(可以是redis)中，并生成一个code来与缓存建立对应关系
	4. 访客在小程序中点击抽奖游戏
	5. 在打开有奖游戏前，需要把第3步生成的code拼接到抽奖游戏链接后面
	6. 易企秀拿到code值，调用企业提供的获取用户信息接口获取信息
	7. 易企秀完成访客授权
	8. 访客继续进行抽奖游戏
	
3. 配置自定义授权接口

登录内容中台，https://www.eqxiu.cn
	菜单切换到控制台，在控制台菜单中访问 集成管理-> 自主用户系统 -> 添加。
	其中 授权页地址可以为空，如果不为空的话，访客在首次访问链接时，会跳转到该地址。
	
	![](/media/202212/2022-12-27_133715_939499.png)
	![](/media/202212/2022-12-27_133727_432786.png)

# 制作作品

1. 登录内容中台制作作品
https://www.eqxiu.cn

2. 创建作品
	以互动为例，选择模板创建作品，进入编辑器
	创建作品时，选择自定义授权模式，并选择上一步设置的接口。
	![](/media/202212/2022-12-27_133901_570587.png)
	
3. 获取作品链接
  制作好作品，获取链接
  
	![](/media/202212/2022-12-27_133945_035238.png)
	![](/media/202212/2022-12-27_134003_305984.png)
	
4. 小程序webview里放入作品地址

```
<web-view src='https://eqs.eqxiu.cn/v/107148?cc=mkeNtXuv&code=xxxx'></web-view>
```

其中，code=xxxx的xxxx为企业为登录支付宝小程序的访客生成的一个编码，供易企秀获取用户信息使用
code参数需要在访客访问链接之前拼接在地址后面就行。
可以直接通过变量的方式在web-view的src中，或其他方式都可以。