uni-app H5调起微信支付分停车服务开通页

说明

因H5调起微信支付分停车服务开通页实则是H5通过相应API打开微信相应的小程序，因此要配置H5打开小程序的相关流程，配置流程可参考 https://ask.dcloud.net.cn/article/39135

流程

以下是我项目调用停车服务页的流程，仅供参考：

1. 先请求后端接口判断该车牌是否能开通微信无感支付
2. 如果能开通，则拼接相应的地址参数并跳转到一个新页面
3. 在新页面获取拼接的地址参数并在onLoad中主动调用getWxValidation方法验证信息 （注：我这个H5是直接挂载在微信公众号上面的，所以没做是否在微信浏览器打开的判断，如果不是挂载微信公众号则需要加判断）
4. 让用户手动触发微信签约按钮打开停车服务开通页
5. 开通/关闭微信无感会自动返回打开那个页面，在该页面onShow中调用后端查询接口查询该车牌是否开通了微信无感，再进行下一步操作

配置

依赖包

npm install jweixin-module --save

main.js

Vue.config.ignoredElements.push('wx-open-launch-weapp');

代码

wxAutopay页的 html：
注：wx-open-launch-weapp该标签不支持微信开发者工具，所以每次调试只能真机调试

  <view class="btnbox">
            <wx-open-launch-weapp id="launch-btn" username="gh_518c42c65952" :path="weappPath">
                <script type="text/wxtag-template">
                    <style>
                        .signingbtn {
   
                           width:350px;
                           line-height:35px;
                           height:35px;
                           color:#fff;
                           background-color: #e88318;
                           border-radius:4px;
                           font-size: 16px;
                           margin: 0 auto;
                           border:none;
                           outline: none;
                          }
                          .signingbtn::after{
   
                              border:none;
                          }
                    </style>
                    <button class="signingbtn" type="default">前往微信签约</button>
                </script>
            </wx-open-launch-weapp>
        </view>
	

js：

  	
		// 拼接微信无感地址信息
        spliceWxValidationInfo(