支付宝小程序应用 —— 主要使用支付宝小程序原生技术栈 + 小程序原生组件 + AntBuilder sass 模版开发
具体文档参考AntBuilder sass 文档
为了追求更高开发效率,根据业务需求的差异,在此仓库中集成2个独立小程序,分别是太和患者端、白云患者端
可以根据切换分支来转换不同医院的配置
白云:main-by
太和:main-taihe
1.支付宝小程序项目管理后台添加开发者权限
2.在支付宝小程序开发者工具中导入项目
3.同步 npm 依赖完成后即可自动开始编译
1.切换对应医院的 GIT 分支
2.在小程序开发者工具切换所需要上线的小程序
3.在小程序开发者工具中上传打包产物及版本
测试 QA 环境的接口时,需要在开发者工具右上角编译模式中,添加全局参数 proxyEnv=test
需要快速在本地开发目录中定位页面时,可以通过开发者工具右下角,复制页面参数,找到 pageType 所对应的值,然后全局搜索相对应的文件夹名称即可
.
├── README.md // 项目基本文档
├── ab_integration_info.txt // 模版原有配置
├── antbuilder // 项目基本页面容器
│ ├── core
│ └── industry
| ├── hospitalV2 // 项目主要使用目录,主要业务开发在此目录下进行
| ├── components // 组件
| ├── hooks
| ├── mas.config.json // 模版原有配置,mas注册中心
| ├── pages // 项目页面
| ├── service // request 基本方法
| └── utils // 工具函数
├── app.acss // 全局样式
├── app.js // 入口
├── app.json // 打包路由设置
├── config.json // 项目基本配置
├── custom // 项目自定义组件及页面的说明
│ ├── components
│ ├── integration
│ └── pages
├── mini.project.json // 小程序配置说明
├── node_modules
├── package-lock.json // 项目依赖版本说明
├── package.json // 项目依赖
├── pages // 项目页面容器,所有的页面都会包含在内,具体页面路由通过路由参数实现
│ ├── one
│ └── web-view
1.新建页面
/antbuilder/industry/hospitalV2/components
下新建文件夹 hospital-payment-detail-yibao
其中文件目录
index.js; // 业务逻辑
index.axml; // 页面渲染
index.acss; // 页面样式
index.json; // 页面配置(如有)
service.js; // 接口/工具函数
1.1 页面业务逻辑结构,以 /antbuilder/industry/hospitalV2/components/hospital-payment-detail-yibao/index.js
为例:
import { createSubscribe } from "applet-page-component";
Component(
createSubscribe({
onShow() {
// 生命周期,页面显示时,注意,自定义组件中使用 onShow 生命周期时需要引入 createSubscribe
},
})({
props: {}, // 父组件传值
data: {
// 自定义变量,相当于 state
},
didMount() {
// 生命周期,页面节点挂载时
},
didUnmount() {
// 生命周期,页面退出销毁时
},
methods: {
// 发起支付
async onPay(e) {},
},
})
);
2.写入路由配置
/antbuilder/industry/hospitalV2/pages/page-no-pull/index.axml
文件中,按照如下固定方式添加配置:
<hospital-payment-detail-yibao
componentData="{{ componentData }}"
a:elif="{{ pageType === 'hospital-payment-detail-yibao' }}"
/>
/antbuilder/industry/hospitalV2/pages/page-no-pull/index.json
文件中,按照如下固定方式添加配置:
"usingComponents":{
// ...
"hospital-payment-detail-yibao": "../../components/hospital-payment-detail-yibao/index"
}
3.页面跳转方法
如在页面 /antbuilder/industry/hospitalV2/components/hospital-payment-detail/index.js
中,使用 history
进行跳转:
import history from "../../utils/history";
history.push({
title: "确认支付", // 页面标题
query: { authCode: authCode }, // 路由参数
pageType: "hospital-payment-detail-yibao", // 页面路径
});
搜索页面关键字
需要快速在本地开发目录中定位页面时,可以通过开发者工具右下角,复制页面参数,找到 pageType 所对应的值,然后全局搜索相对应的文件夹名称即可,如门诊缴费列表页面,路由参数为 pageType=hospital-payment
,文件夹 hospital-payment
即是门诊缴费列表页的开发目录
qa 环境:
线下挂号:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/core/pages/one/index%3FpageUuid%3DE1164483A3294302925DE7FD2088ED36%26serviceCode%3D
门诊缴费: alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dhospital-payment%26title%3D%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9%26serviceCode%3D
报告查询:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dreport-list%26title%3D%E6%A3%80%E9%AA%8C%E6%A3%80%E6%9F%A5%26serviceCode%3D
挂号记录:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dsubscribe-record%26title%3D%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7%E8%AE%B0%E5%BD%95%26serviceCode%3D
住院押金缴纳:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Ddeposit%26title%3D%E4%BD%8F%E9%99%A2%E6%8A%BC%E9%87%91%26serviceCode%3D%26backBtnColor%3D%23000%26background%3D%23fff%26color%3D%23000%26header%3Dshow
住院清单查询:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dinventory-day%26title%3D%E6%97%A5%E6%B8%85%E5%8D%95%26serviceCode%3D%26backBtnColor%3D%23000%26background%3D%23fff%26color%3D%23000%26header%3Dshow
核酸检测:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/core/pages/one/index%3Fnucleic-acid-campus%3D%26pageUuid%3DB8628CFD95D5478DB4259B6B30FEE7FF%26serviceCode%3D
整体入驻:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/core/pages/one/index
停车缴费: alipays://platformapi/startapp?appId=2021003141662056&page=pages/index/index&t=1478736838922
科室信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FdepCode%3D381%26departmentId%3D658%26header%3Dshow%26hospitalId%3D41%26pageType%3Dhospital-num-source%26title%3D%E5%A6%87%E7%A7%91%E9%97%A8%E8%AF%8A%EF%BC%88%E9%BB%84%E7%9F%B3%E9%99%A2%E5%8C%BA%EF%BC%89
科室信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index?depCode=381&departmentId=658&header=show&hospitalId=41&pageType=hospital-num-source&title=妇科门诊(黄石院区)
医生信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index?depCode=381&depId=658&doctorCode=1296&doctorId=302246&header=show&hospitalId=41&pageType=doctor-page&title=医生主页
医生信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FdepCode%3D381%26depId%3D658%26doctorCode%3D1296%26doctorId%3D302246%26header%3Dshow%26hospitalId%3D41%26pageType%3Ddoctor-page%26title%3D%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5
正式环境:
线下挂号:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/core/pages/one/index%3FpageUuid%3DFB98AEA24A5D40F6BC7B19D3C399AE86%26serviceCode%3D
门诊缴费: alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dhospital-payment%26title%3D%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9%26serviceCode%3D
报告查询:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dreport-list%26title%3D%E6%A3%80%E9%AA%8C%E6%A3%80%E6%9F%A5%26serviceCode%3D
挂号记录:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dsubscribe-record%26title%3D%E9%A2%84%E7%BA%A6%E6%8C%82%E5%8F%B7%E8%AE%B0%E5%BD%95%26serviceCode%3D
住院押金缴纳:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Ddeposit%26title%3D%E4%BD%8F%E9%99%A2%E6%8A%BC%E9%87%91%26serviceCode%3D%26backBtnColor%3D%23000%26background%3D%23fff%26color%3D%23000%26header%3Dshow
住院清单查询:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FpageType%3Dinventory-day%26title%3D%E6%97%A5%E6%B8%85%E5%8D%95%26serviceCode%3D%26backBtnColor%3D%23000%26background%3D%23fff%26color%3D%23000%26header%3Dshow
核酸检测:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/core/pages/one/index%3Fnucleic-acid-campus%3D%26pageUuid%3DF07BB429AE094875984BD611DEE7AF80%26serviceCode%3D
整体入驻:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/core/pages/one/index
停车缴费: alipays://platformapi/startapp?appId=2021003141662056&page=pages/index/index&t=1478736838922
科室信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FdepCode%3D381%26departmentId%3D658%26header%3Dshow%26hospitalId%3D41%26pageType%3Dhospital-num-source%26title%3D%E5%A6%87%E7%A7%91%E9%97%A8%E8%AF%8A%EF%BC%88%E9%BB%84%E7%9F%B3%E9%99%A2%E5%8C%BA%EF%BC%89
科室信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index?depCode=381&departmentId=658&header=show&hospitalId=41&pageType=hospital-num-source&title=妇科门诊(黄石院区)
医生信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index?depCode=381&depId=658&doctorCode=1296&doctorId=302246&header=show&hospitalId=41&pageType=doctor-page&title=医生主页
医生信息:alipays://platformapi/startapp?appId=2021003141662056&page=antbuilder/industry/hospitalV2/pages/page-no-pull/index%3FdepCode%3D381%26depId%3D658%26doctorCode%3D1296%26doctorId%3D302246%26header%3Dshow%26hospitalId%3D41%26pageType%3Ddoctor-page%26title%3D%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5
// 通过 scheme 链接进入的页面标题不显示的问题
/isvRequest.order.orderConfirm 接口添加入参 /isvRequest.order.orderDetail 接口返回 subHospital 字段进行展示 /isvRequest.order.orderList 接口返回 subHospital 字段进行展示
通过扫码或者链接 scheme 进入: 医生主页:路由参数添加 subHospitalId、subHospitalTitle 科室主页:路由参数添加 subHospitalId、subHospitalTitle