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

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上面
在當前頁面生成微信的二維碼支付