当前位置:首页 > 教程 > 小程序开发

手把手教你支付宝小程序内嵌H5页面

所属栏目:小程序开发更新时间:2019-03-02来源:作者:deepdfhy浏览:0

一句话概括

支付宝小程序嵌入H5页面或者网页,就是在支付宝小程序的页面上添加如下一段代码:

<web-view src="https://www.yourwebpage.com" />

其中,https://www.yourwebpage.com就是需要嵌入的H5页面或者网页url。

前提条件

  • 你拥有支付宝账号。

  • 支付宝小程序目前对企业支付宝账号全面开放。

  • 嵌入的H5页面必须放在自己的后端服务器上,且已配置HTTPS访问。

具体步骤

1.注册企业支付宝账号,完成入驻(有已入驻支付宝账号可跳过)

  • 注册支付宝企业账号(有企业支付宝账号的可以跳过)注册支付宝账号

  • 登陆支付宝开放平台,依照入驻指引选择自己入驻的身份角色,完善身份信息,签署平台服务协议,成为开放平台合作伙伴。不同的身份提供了不同的功能权限,小程序业务可选择自研开发者或系统服务商ISV,开放平台身份说明见文档 开发平台入驻身份说明

image

2.创建小程序后台应用,完成应用设置,获取APP ID

  • 小程序首页,点击“立即创建”进入小程序管理中心,在页面上点击“创建”来创建小程序后台应用。填写小程序后台应用的基础信息,基础信息不允许包含违禁词。

image

image

  • 完成小程序创建后,在正式开发小程序之前需要在应用设置里完成以下几个步骤。
    (1).设置应用的接口加签方式(在“小程序详情/设置”中为小程序完成公钥设置,详细可查看 https://docs.alipay.com/mini/introduce/rsa2):接口加签方式主要用于签名和验签,其中私钥由开发者保存,公钥可对外公开,私钥用于签名,公钥用于验签。开发者保存自己的私钥,通过支付宝提供的公钥进行通信来保证信息传输的完整性以及发送者身份的真实性。

image

(2).添加httpRequest接口请求域名白名单:支付宝小程序限制支付宝客户端域内调用,需要进行域外调用时,比如通过my.httpRequest请求后台接口时,请在“小程序详情/设置”中添加httpRequest接口请求域名白名单。

image

(3).配置https:相比于http,https可以提供更加优质保密的信息,保证了用户数据的安全性,此外https同时也一定程度上保护了服务端,使用恶意攻击和伪装数据的成本大大提高。支付宝提供了免费的ssl证书申请 ssl证书申请。对证书服务不太了解的可以看下 证书服务
(4).配置H5域名配置:页面访问的域名需要配置(否则真机上会出现页面访问受限)webview需内嵌自己服务器的网页(在服务器根目录下要放入校验文件)。

image

  • 完成小程序应用的创建后,在小程序应用详情上能够获取到应用的APP ID,这个APP ID在后续的小程序上传以及请求支付宝服务的时候都会用到。

image

3.下载支付宝小程序开发工具,开发支付宝小程序,嵌入H5页面

<web-view src="https://www.yourwebpage.com" />

4.上传提交小程序至开放平台,生成体验版真机预览

  • 完成本地研发以及测试之后,接下来提交小程序到开放平台。使用之前创建小程序后台应用获得的APP ID,可以在支付宝小程序开发工具(IDE)中方便的上传小程序版本。

image

  • 使用支付宝小程序开发工具(IDE)上传成功后,可以在开放平台的小程序应用详情页查看到上传的开发版本。开发版本可以设置为体验版,真机扫码之后就可以在手机上预览小程序了。

image

image

5.提交审核

  • 在功能列表中查看并添加小程序用到的蚂蚁开放能力,功能如需签约(比如支付),请完成签约。

  • 选择开发版本,填写审核信息提审,审核将会在2个工作日完成。

image

6.审核通过,灰度,上架小程序

  • 审核通过后,管理员可点击“灰度测试”进行版本灰度。

image

  • 灰度测试通过后,管理员点击提交上架,就可以在支付宝客户端中查看该小程序了。

image


相关教程
给个评价吧