扫描二维码打开小程序

[TOC]

2. 简述

扫描二维码打开小程序
小程序内嵌 h5 页面
h5 点击支付按钮跳转小程序页面
自定义二维码规则

项目中为实现公众号能够在小程序模式下进行支付流程。便于在原有公众号功能的基础上，只针对在支付时能够跳转到小程序进行支付。

该支付小程序项目为独立项目，采用小程序内嵌 h5 的模式进行公众号页面的融合。

支付小程序只提供外壳的形式对公众号网页进行嵌套，开发流程还在原先的公众号进行开发。公众号网页在点击支付的时候会对当前环境进行监听（参考 pay-button-type 组件），如果是在小程序中操作的公众号网页，在支付的时候会自动跳转到小程序页面，若还是微信公众号网页中还保持原有的业务流程。

支付小程序封装了小程序和公众号交互逻辑，下单支付逻辑，采用 web-view 去嵌套公众号网页进行展示。在公众号进行业务操作，进行到点击支付的时候会携带下单参数跳转到小程序页面,进行下单支付操作。

3. 目录文件

   pages>
       welcome  入口页面
       home     web-view 页面 内嵌公众号
       pay      支付下单页面
       pay-success  支付成功页面

   code>
       confing
           config-info.js        // 医院配置文件 项目启动读取该配置文件信息
           default-info.js       // 默认配置文件 先存在主题颜色 如果需要增加主题请进行修改

       hospital                      // 医院配置文件 每一个医院在该目录下新建一个配置文件（以医院名 xxxadmin 命名）并在index.js 引入

4. 开发说明

4.1. 登陆说明

为解决内嵌公众号页面数据和小程序支付时的数据一致性,统一采用小程序登陆时的 token 信息作为公众号内业务的 token 使用。 home.mpx 初始化时，通过调用小程序登陆接口 miniProgramLogin 来获取登陆信息 token。然后通过 miniToken=token 字段传递 ☞ 公众号内部，公众号页面启动时会去检查如果存在 miniToken 字段表示小程序内嵌 h5 页面打开。小程序登陆时候要注意 appId 的一致性。

4.2. 页面显示

小程序对外唯一页面 pages/welcome/index

初始化 hospitalWebInfo js 文件。根据 config>config-info.js 中的医院 id，从 hospital 下进行对应医院配置信息的读取工作。项目默认打开 pages/welcome/index 页面。然会在页面 onShow 方法中自动跳转 ☞home/index.mpx 页面。这样做主要为了解决 web-view 页面左上角无后退按钮问题。为什么放到 onShow 方法？解决首页后退回来直接返回首页面。在返回的时候会看到一个空白页面一闪而过，小程序也没提供直接关闭的方法，就先这样吧。

home/index.mpx 中的 onLoad 会判断是否存在路由参数 action。如果 action 有值，action 携带的就是指定页面地址。然后进行地址和参数的拼接组合，再进行 web-view 的显示。

4.2. web-view src 定义

web-view src 是小程序内嵌 h5 的链接地址。

src 格式： https://xxx.xxxx.com/web-new/sckqyy/front.html?interfaceType=wechat&hospital_id=xxxxx&miniToken=responseToken
src 格式是公众号的一个授权后的地址，由于项目部署的目录是独立的，所以在开发过程中请采用正确的地址该地址在 pc 浏览器中也可以直接打开。

src 格式规则：

https://xxx.xxxx.com/web-new/sckqyy/front.html 前端包部署地址相对医院固定；
responseToken= 小程序登陆的动态 token 参数
hospital_id= 当前医院 id 小程序 && 公众号保持一致！请直接写死~！

项目发布请采用正式环境的地址！切记~

4.3. 下单支付

为了保证小程序的独立性。小程序支付时所有的下单参数由公众号点击支付时带入，小程序在获取下单参数后只添加支付渠道 pay_type = BasePublicLibrary.PAY_CHANNEL_WECHAT_MP 标识当前支付渠道来自小程序支付！所以正常开发中如果下单存在问题请在公众号中检查参数是否正确！然后调用下单接口 createOrder 和 UnifiedOrder 成功后会唤醒微信支付

支付成功后会跳转到成功页面

4.4. 模板消息

为了保持和公众号模板消息模式一致，小程序在模板消息进入时直接获取原有的模板消息参数信息。然后把参数信息拼接到配置信息 url 地址上直接打开。由于模板消息为公众号模板消息跳转小程序模式需要对该医院进行以下配置设置方式：

管理后台》医院配置》模板消息配置
设置跳转类型为小程序
AppId：该医院的小程序 AppId
PagePath：固定 pages/welcome/index

4.5.项目中相关处理

公众号下单在标准组件 pay-button-type 进行的，如果医院存在定制该组件的话请注意！缺少以下代码将无法走支付小程序模式 pay-button-type.ts payTypeOne 方法中在进行下单前会进行环境判断，如果是在小程序的环境会进行跳转小程序支付页面并携带下单参数。该操作为固定操作不要进行修改！

    // 先检测 微信环境是否是小程序
    this.wxConfigService.miniProgramType().subscribe(
      type => {
        console.log('检测当前环境~~~~~~', type);
        if(type) {
          // 跳转☞支付页面 并携带 下单参数--- 跳转小程序下单 请在公众号内把需要下单的参数准备好； 小程序页面不对下单参数进行额外处理
          wx.miniProgram.navigateTo({url: `/pages/pay/index?payInfo=${JSON.stringify(this.payInfo)}`});
        } else {
          // alert("不在小程序里");
          this.payTypeOneCreate();
        }
      }
    )

4.6. 诊间支付扫码

这个操作挺复杂 ~~~

4.6.1. 诊间二维码设置

设置前请阅读文档来了解普通二维码生成规则 https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

设置说明：

协议类型： 生产环境默认 https 开发调试时测试环境如果使用的是 http 请勾选 http。
选择大小写： 小写
二维码链接示例： http://xxx.xxxx.com/other/redirect?codeType=clinicPay （不允许更改）
前缀占用规则： 不占用
小程序功能页面： pages/welcome/index （不允许更改）
测试范围： 开发调试时可选择 开发版 || 体验版 进行调试。正式发布时请选择线上版本。
测试链接： 该设置只在测试扫码时使用，如果你要用某个链接生成二维码时请将这个链接进行配置。配置规则：二维码链接示例 + 参数（http://xxx.xxxx.com/other/redirect?codeType=clinicPay&a=1&b=2&c=3) 请注意：二维码链接示例固定
忘记了很重要的一点二维码规则校验，需要把校验文件放置到相应的服务器目录下，配置规则的时候会提醒你放置于哪个目录 比如：配置的二维码规则：http://xxx.xxxx.com/other/redirect?codeType=clinicPay 需要把校验文件放置到 other 目录，切记不是 redirect 目录！！！以链接最后一个 / 前的目录为准！！

4.6.2. 扫描二维码进入

使用测试链接进行二维码生成开发者使用微信扫一扫二维码后,微信会识别当前链接为小程序类型，并打开相关的小程序进入 pages/welcome/index

4.6.3. 诊间支付携带参数读取

onLoad 接收参数 小程序在 pages/welcome/index 页面打开后 onLoad 方法接收参数，参数为该二维码的完整链接，参数格式为 options = { q: http://xxx.xxxx.com/other/redirect?codeType=clinicPay&a=1&b=2&c=3 }
参数读取 this.webUrlAll = decodeURIComponent(option.q); this.webUrlAll 便是获取的完整链接。
codeType=clinicPay codeType=clinicPay 标识二维码为诊间支付扫码进入

4.6.4. 打开诊间支付页面

参数接收完毕后，接下来做诊间支付页面的对接。由于公众号固定了独立的 clinic-pay.html 页面来处理诊间支付进入。 http://xxx.xxxx.com/clinic-pay.html

对二维码链接进行替换操作来生成最终的链接 this.webUrlAll = this.webUrlAll.replace("other/redirect", "clinic-pay.html");

替换后地址： http://xxx.xxxx.com/clinic-pay.html?codeType=clinicPay&a=1&b=2&c=3

最后进行跳转 home/index 页面并通过 web-view 来打开该链接

链接数据会在 welcome/index 页面处理完毕，home/index 不做过多处理直接获取使用

5. 医院对接说明

5.1. 医院配置

新医院对接时先新增医院配置信息

在 code>hospital> 目录下新增医院 js 文件，文件名格式 xxxadmin.js 医院 id，便于项目初始化读取配置信息，请参考 default.js 文件中的说明进行配置。
在 hospital>index.js 中引入新建的医院文件。
拷贝新建医院配置文件中的 configInfo 字段中的内容放置于 config>config-info.js 中
启动项目进行调试。

5.2. 主题设置

初始化主题配置方式通过设置各自医院配置文件参数 themeType 字段, // 主题颜色主题配置【1：蓝色， 2：红色】。由于公众号存在不同颜色的风格，为了保持小程序在风格上的一致，项目对主题进行了简单的设计。通过 class 类名权重的方式统一在 dom 外层进行主题类型包裹的形式，根据主题类名来进行匹配。

config>default-info.js 中定义了 themeType 主题风格
mixins>config-theme.js 混入了当前选中主题的 class 类名，直接注入到了页面

<view class="{{themeType}}"></view>

如果需要新增一种主题风格在 assets>less 目录下新增主题文件 less-xxx.jess 参考 less-blue.less 设置方式，同时在 config>default-info.js 文件 themeType 中新增该主题配置。

例如增加红色主题

复制 less-blue.less 文件修改文件名为 less-red.less
修改文件内容 .theme-blue 为 theme-pink @theme-main ... 的样式

    @theme-bg: #ecf7ff;
    @theme-main: #dc5064;

    .theme-pink {

config>default-info.js 增加设置

themeType: [
  // 主题配置  【1：蓝色， 2：粉色， 3: 红色】
  { name: "蓝色", color: "#51ace9", type: "theme-blue" },
  { name: "粉色", color: "#dc5064", type: "theme-pink" },
  { name: "红色", color: "#dc5064", type: "theme-red" },
];

6. 注意事项

小程序请配置公众号网页的合法域名
小程序调试请添加小程序开发者和公众号网页开发者
切记正式环境诊间支付切记向服务添加校验文件！

2. 简述​

3. 目录文件​

4. 开发说明​

4.1. 登陆说明​

4.2. 页面显示​

4.2. web-view src 定义​

4.3. 下单支付​

4.4. 模板消息​

4.5.项目中相关处理​

4.6. 诊间支付扫码​

4.6.1. 诊间二维码设置​

设置说明：​

4.6.2. 扫描二维码进入​

4.6.3. 诊间支付携带参数读取​

4.6.4. 打开诊间支付页面​

5. 医院对接说明​

5.1. 医院配置​

5.2. 主题设置​

6. 注意事项​