赞
踩
最近遇到一个客户要求在app内完成H5页面支付宝支付,绞尽脑汁,最终搞出来了.
你在第一个页面需要一个支付按钮,或者去支付的操作,(简单来说就是一个方法,跳转支付页面)
注意:这个地方有个坑,可能是能力有限,就是你跳转支付,付完钱,如果你不点完成的话,返回app,此刻后端是拿不到你支付完成或者没有支付完成的这个动作.于是,我就看了一下地铁充值地铁卡的操作
解决办法:就是你点击支付的时候,出现这个弹窗,当用户点击"我知道了",再去跳转支付(暂时只能这样啦)
如上图,触发这个方法,跳转到,app内的支付宝内嵌页面
ps:第一个就是内嵌,去uniapp的官网可以查看;
第二个是刚刚第一步跳转过来的参数;
第三个是要跳转到H5页面,的网址和参数(这个H5页面网址需要自己写代码,然后放在服务器上 面,拿到这个网址,代码后面有)
第四个是一个比较重要的一步(这个是监听支付宝支付是否完成)
第五个css随便写吧
- <template>
- <view class="content">
- <!-- 后端生成的表单,使用v-html可以接收 -->
- <view class="alipaysubmit" v-html="formContent"></view>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- formContent: '',
- }
- },
- onLoad({
- token,
- useTo,
- userId,
- price,
- id
- }) {
- if (!token) return;
- this.Getpayment(token,userId,useTo,price,id)
- },
- methods: {
- Getpayment(token,userId,useTo,price,id) {
- uni.request({
- // 请求地址
- url: 'http://www.qq.com',
- // 请求方式
- method:'GET',
- // 请求参数
- data:{
- id:id || '',
- price:price,
- useTo:useTo,
- userId:userId
- },
- // 是否携带token
- header: {
- "Authorization":token
- },
- success:(e)=> {
- // 支付成功后拿到表单
- this.formContent = e.data
- // 成功之后的回调
- this.$nextTick(() => {
- // 这个地方要注意,根据表单,所携带的方法去调用提交方法就会显示出,支付界面
- document.forms[0].submit()
- })
- },
- fail(e) {
- //失败之后的回调
- uni.showToast({
- icon:'none',
- msg:e
- })
- }
- })
- },
- }
- }
- </script>
-
- <style>
- .alipaysubmit {
- display: none;
- }
-
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- .logo {
- height: 200rpx;
- width: 200rpx;
- margin-top: 200rpx;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 50rpx;
- }
-
- .text-area {
- display: flex;
- justify-content: center;
- }
-
- .title {
- font-size: 36rpx;
- color: #8f8f94;
- }
- </style>
这个H5的代码,不用多说了吧,新建一个项目,把这个代码复制进去,pages.json里面注册这个页面,直接打包就行了,把上面的网址,换成你自己服务器的网址(也可以使用我git的代码,完成打包,替换域名,请求域名即可)
注意:这个里面代码的注释,都有介绍.
第五步,看第一个框子,有一个uni.$on这个方法,(在第三步的地方有一个方法,那个方法是监听订单变化的,当他发生变化就回来调用这个this.GetFind()这个方法)()()不管是失败还是成功这个order都会变化,主要是为了调用这个方法.
第二个框子,有一个方法,大概就是后端,可以看见你完成了支付操作,并且支付宝把这个成功或者是失败的信息存储起来,然后放在这个接口里面,你调用这个接口,,就可以拿到你到底是成功还是失败的信息,
这一步大概就是在这个manifest.json这个文件里面设置一下这个东西,具体要不要,看你拼接的路径是怎么写的.
git地址:alipay_h5: alipay-H5页面代码
点个赞啦,点个关注!有什么不对的地方,欢迎指正.感谢
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。