微信與支付寶二維碼在頁面中的使用


1.第一步 向支付寶發起請求訂單請求之后支付寶會返還一個html代碼,是一個表單提交,點擊立即支付就會跳轉到一個新的頁面,只有二維碼,在這個頁面掃碼即可完成支付

 


<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=utf-8&method=alipay.trade.page.pay&sign=wRN%2Faty2EaurePTgf8XEFhe%2F%2BQeScS8TFwYcgR%2FXYYozS2SpDbppeydHxlgUiH1ZgUzLtAZal3Vl8dfotLfguQw%2BynaSqUh%2F37eI5tvFoXXbnwJxiumsWKrZFK7zgY7Irmd6%2Br3jVhuQROdca5qlXSdQE5YN0qss3YNR1tLbUXmXrjKk3VfSamGrRJpolbHILrTud2MzqORTfy6HtimgBW2Fbk6dBij8hPSia2ICDgm0q%2BaT%2BaaD2Ce03pjROQSx8PbQkT5KdkhJdezJLum77QzcdEuR0GrlnRQiklB73WuJ2%2B9lmb6hnYRvDFvE6cuTlAPWudwX%2BnJeCdt94mpoRw%3D%3D&notify_url=http%3A%2F%2Fdev.scihua.com%2Fscihua%2Fwebapp%2Fnotify%2FaliPayCallBack&version=1.0&app_id=2019012263114447&sign_type=RSA2&timestamp=2019-04-10+13%3A03%3A41&alipay_sdk=alipay-sdk-java-3.4.49.ALL&format=json">↵<input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;20190410417000&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;,&quot;qr_pay_mode&quot;:&quot;4&quot;,&quot;subject&quot;:&quot;SCI-HUA**訂單&quot;,&quot;timeout_express&quot;:&quot;10m&quot;,&quot;total_amount&quot;:&quot;0.02&quot;}">↵<input type="submit" value="立即支付" style="display:none" >↵</form>↵<script>document.forms[0].submit();</script>

上面就是支付寶接口返回的html片段,使用v-html渲染到頁面上去是什么都看不見的,必須把其中的none屬性替換成blok 才會在頁面中顯示button按鈕,如果我們想讓他在頁面中出現而不是跳轉出現的話,我們需要使用iframe屬性,iframe屬性具體參考http://www.w3school.com.cn/tags/tag_iframe.asp,使用replace屬性替換掉其中的字段

2.第二步   res.data.formInfo = res.data.formInfo.replace("<script>document.forms[0].submit();","<iframe style='border: 1px;' name='myFrame' width='210px' height='210px;' ></iframe>")
其中res就是支付寶接口的正確返回值,
formInfo就是代碼片段,將他的srcipt替換成我們需要的iframe標簽,並且表明iframe標簽的style

3.第三步 res.data.formInfo = res.data.formInfo.replace(`name="punchout_form"`,`name="punchout_form" target="myFrame" `)
我們再將他的name="punchout_form"替換成name="punchout_form" target="myFrame",其中的"為了避免轉義我們使用的是字符串模板``,向iframe里面添加了name='myFrame',是因為支付寶表單采用的是post請求,具體可以參考文檔https://www.cnblogs.com/java-chanjuan/p/7170257.html
 
        

4.第四步 this.zfbcode = res.data.formInfo
獲取到替換之后的html代碼將他執行到頁面中

 

表單提交會觸發post請求和支付寶接口帶上的js文件,想要獲取到二維碼我們必須觸發這個函數才能在iframe里面跳轉到二維碼,
this.$el.getElementsByTagName('form')[0].submit()  這個串代碼可以觸發當前綁定在from上面的submit這個方法,我們所需要做的就是延時執行他,寫法參考文檔https://segmentfault.com/q/1010000009106452 , 獲取節點然后觸發節點上的函數,

 

而微信的二維碼則是返回一個支付鏈接,我們采用"vue-qriously"這個插件即可生成支付二維碼

請求成功之后我們就可以把微信返回來的值綁定到value上面
在當前頁面生成微信的二維碼支付

 


 

 


 
        
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM