# 支付宝小程序 > 支付宝小程序应用 —— 主要使用支付宝小程序原生技术栈 + 小程序原生组件 + AntBuilder sass 模版开发
> 具体文档参考[AntBuilder sass 文档](https://www.yuque.com/randa/antbuilder/ad9dml)
> 为了追求更高开发效率,根据业务需求的差异,在此仓库中集成**2**个独立小程序,分别是**太和患者端**、**白云患者端**
> 可以根据切换分支来转换不同医院的配置 ## 参考文档 [支付宝小程序官方文档](https://opendocs.alipay.com/mini/developer?pathHash=d3c1799e) [Antbuiler sass 文档](https://www.yuque.com/randa/antbuilder) ## 项目 Git #### [Gogs Git address](https://gogs.ywtinfo.com/chenjunkun/th_net_hospital_ali_mp) #### 生产环境分支 白云:`main-by` 太和:`main-taihe` #### 开发分支:根据需求版本号进行调整,命名规则为 对应终端 + 需求版本号 --- ## 项目启动 1.支付宝小程序项目管理后台添加开发者权限 2.在支付宝小程序开发者工具中导入项目 3.同步 npm 依赖完成后即可自动开始编译 --- ## 切换环境和打包 - 1.切换对应医院的 GIT 分支 - 2.在小程序开发者工具切换所需要上线的小程序 - 3.在小程序开发者工具中上传打包产物及版本 --- ## 开发注意事项 - 测试 QA 环境的接口时,需要在开发者工具右上角编译模式中,添加全局参数 `proxyEnv=test` - 需要快速在本地开发目录中定位页面时,可以通过开发者工具右下角,复制页面参数,找到 pageType 所对应的值,然后全局搜索相对应的文件夹名称即可 --- ## 文件目录 ```javascript . ├── 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 ``` --- ## 以医保 2.0 为例熟悉开发流程 ### 新建功能模块 1.新建页面 `/antbuilder/industry/hospitalV2/components` 下新建文件夹 `hospital-payment-detail-yibao` 其中文件目录 ```js index.js; // 业务逻辑 index.axml; // 页面渲染 index.acss; // 页面样式 index.json; // 页面配置(如有) service.js; // 接口/工具函数 ``` 1.1 页面业务逻辑结构,以 `/antbuilder/industry/hospitalV2/components/hospital-payment-detail-yibao/index.js` 为例: ```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` 文件中,按照如下固定方式添加配置: ```js ``` `/antbuilder/industry/hospitalV2/pages/page-no-pull/index.json` 文件中,按照如下固定方式添加配置: ```js "usingComponents":{ // ... "hospital-payment-detail-yibao": "../../components/hospital-payment-detail-yibao/index" } ``` 3.页面跳转方法 如在页面 `/antbuilder/industry/hospitalV2/components/hospital-payment-detail/index.js` 中,使用 `history` 进行跳转: ```js 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