一、背景
- 背景：用于支付宝小程序搭建
- 技术应用场景：支付宝小程序, vue的H5页面
- 整体思路：利用支付宝小程序webview加载H5页面
二、操作步骤
2.1 开发前的准备工作
准备工作一
- 加入开发者: 管理员邀请之后 进入支付宝->消息->消息盒子 接受申请
- 下载支付宝开发工具 下载地址
- 文档地址 支付宝文档中心
- 机构管理地址 后台应用管理地址
准备工作二
- 项目拖入开发者之后先选择对应机构, 如果没有机构则未开通开发者.
2.2 进入开发阶段
-
配置文件参数：根据新增的文件对项目进行参数配置
/**
* weichatNo
* hospitalKey
* consultTmplId 消息模板id
* isCloudHospital 是否为云医院
* t2hospitalCode 集成环境 hospitalCode
* ihospitalCode 正式生产环境 hospitalCode
*/
const hospitals = [
{
// 宁波第一医院
weichatNo: 'NBDYYY_ALIPAY',
hospitalKey: 'zfbnbdyyy',
consultTmplId: '024a282053f34889bcb98657bdf3609e',
hospitalCode:'XK33020301CAFHBFCG'
},
{
// 李惠利互联网医院
weichatNo: 'NBLHLYY_ALIPAY',
hospitalKey: 'nblhlyyali',
consultTmplId: 'd9b4bab7f4b94e0091278d6ddf8071ff',
hospitalCode:'XK33021201CGHECGGE'
},
]
const defaultHospitalKey = 'nblhlyyali' // 请填写你想要执行的机构 hospitalKey
export const env = 1; // 切换环境
const rsHospitals = hospitals.find(res=>res.hospitalKey === defaultHospitalKey) || hospitals[0]
export default rsHospitals;
/app.json 文件,如果当前机构没开通医保支付, 需要吧 plugins 的地方去掉
{
"pages": [
"pages/newHome/newHome",
"pages/my/my",
"pages/login/login",
"pages/index/index",
"pages/webview/webview"
],
"window": {
"defaultTitle": "",
"titleBarColor": "#FFF"
},
"lazyCodeLoading": "requiredComponents",
"plugins": {
"auth-pay-plugin-dev": {
"version": "*",
"provider": "2021003142662127"
},
"auth-pay-plugin": {
"version": "*",
"provider": "2021003147699046"
}
}
}
2.3 本地localhost测试
- 如果想测试本地启动的项目在支付宝中如何展示 : 可以修改/app.json 文件 , 把 "pages/my/my" 放置到最前面,
- 在 pages/my/my.js 文件 中 修改 webviewurl 变量 为本地即可,如下
Page({
data:{
baseImg:'',
a: Math.floor(Math.random() * 100) + 1,
// webviewurl:'http://localhost:8080/consultationOrder.html'
},
2.4 医保安全隐私申请截图页
- 如果需要截图 : 可以修改/app.json 文件 , 把 pages/login/login 放置到最前面,
- 在 pages/login/login.js 文件 中 修改 webviewurl 变量 为所需地址即可,如下
- 点击预览在手机支付宝中打开, 截图即可
Page({
data:{
baseImg:'',
a: Math.floor(Math.random() * 100) + 1,
webviewurl:'https://'
},
三、医保支付相关
- 如果需要对接医保支付,请参考文档 支付宝医保建档支付对接流程
