微信の支払いはまた成功して私に人間として教えてくれた.

时间が过ぎるのが速くて、あっという间に就职の先端はすでにいくつかの年になって、多すぎるシーンを见て、思いがけない间违い、自分が十分に成熟して冷静だと思っている时、支払いはもう一度私に教えて、どのように一人になります.の
事の経緯は大体このようにして、会社はh 5の新しいプロジェクトがあって、それから再開発する時ドッキングして支払う必要があります.調査研究を経て、後に微信の支払いと支付宝の支払いだけを計画して、ここでまず支付宝の支払いapiの開発者に敬意を表して、本当に使いやすいです.それからまた微信ができます...h 5支払い、公衆番号支払い、そして小さなプログラム支払いがあります...ここで皆さんにお勧めします.もし本当に多方面にログインして、支払う时、やはり微信のオープンプラットフォームを使って、结局は少子優生に属して、幸せな一生の選択を探して、さもなくば私の次の経験があるかもしれません.
h 5アリペイ支払い
おおよその支払いを開始する過程は以下の通りである.

注文情報

を作成する.

返却フォーム

を入手

レンダーフォーム

フォーム提出

<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='POST'><input type='hidden' name='biz_content' value='{****}'/><input type='hidden' name='app_id' value='*******'/><input type='hidden' name='version' value='1.0'/><input type='hidden' name='format' value='json'/><input type='hidden' name='sign_type' value='RSA2'/><input type='hidden' name='method' value='alipay.trade.wap.pay'/><input type='hidden' name='timestamp' value='2020-06-10 08:56:10'/><input type='hidden' name='alipay_sdk' value='alipay-sdk-php-20161101'/><input type='hidden' name='notify_url' value='******'/><input type='hidden' name='return_url' value='http://starmall.ipxmall.com/order/order-result'/><input type='hidden' name='charset' value='UTF-8'/><input type='hidden' name='sign' value='*****/******+******+****/****+****=='/>form><script>document.forms['alipaysubmit'].submit();script>

クライアント呼び出し、プロジェクトはvueを使用して、直接コンポーネントを貼り付け、上の内容をパラメータとしてコンポーネントに伝達するok

フォームなので、v-htmlでデータバインドして、正常に支払を呼び出す必要があるので注意してください.

export default {
  props: {
    info: String
  },
  data() {
    return {}
  },
  watch: {
    info() {
      this.$nextTick(() => {
        document.querySelector('#alipaysubmit').submit()
      })
    }
  }
}

微信支払いのホームページ支払い
大体の手順は上記と同じですが、微信h 5の支払いは携帯電話のブラウザでしかテストできません.

バックグラウンドインタフェースを呼び出し、注文を作成する(微信支払いはjsapiを初期化する必要がある)

支払開始

//       ：            （         jsapi    ，       url  ）
if (!this.isWeiXin) {
let { errorCode, data } = await payInfo(params)
if (errorCode === 0) {
  window.location.href = data
}
return false
}
//     ，         

微信内蔵ブラウザ支払い調整

初期化微信支払jsapi

initWxPay() {
  let wxSrc = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'
  let script = document.createElement('script')
  script.src = wxSrc
  document.body.append(script)
}

~~2. 内容を返す...など、意外にも報告が間違っていて、~~統一注文にはopenidが必要であることに気づきました.openIdはクライアントがまずgetCodeを行い、サーバーがcodeを通じてopenidを手に入れ、統一注文するしかありません.次に、クライアントに必要な情報2を返す.getCode

//         ，        ID  state    ，         
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=${state}#wechat_redirect`

リダイレクトは私たちのページに、コールバックurlにはcode

があります.

// 1.   code，         
const { code } = this.$route.query
// 2.     ，  ，            （         jsapi    ，       url  ）
// 3.         

支払開始

let { errorCode, data } = await payInfo({     , code })
if (errorCode === 0) { //                
    if (typeof WeixinJSBridge == "undefined"){
      if( document.addEventListener ){
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
      }else if (document.attachEvent){
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
      }
    }else{
      onBridgeReady();
    }
  }
 //       ，       ，data              
function onBridgeReady(){
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          "appId": data.appId,     //     ，          
          "timeStamp": `${data.timeStamp}`,         //   ， 1970           
          "nonceStr": data.nonceStr, //        
          "package": data.package,     
          "signType":"MD5",         //      ：     
          "paySign": data.paySign //     
        },
        function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            //             ,        ：
            self.$router.replace('/order/order-result')
          }
    }); 
  }

//       ，    

微信の小さいプログラムはホームページを埋め込んで小さいプログラムの支払いを呼び出します
.ウィジェットは新しい支払いページを作成し、パラメータを受け入れ、次の手順で支払いプロセスを完了します.

は、埋め込みページからウィジェットを使用して露出するapiからウィジェット支払いページにジャンプし、

(sku情報伝達について)

ウィジェットはonload時に情報を読み出し、wxを使用する.login code,

sku情報とcodeを結果によりバックグラウンドに送信し、バックグラウンド統一注文

バックグラウンド統一発注後の返却情報を入手し、ウィジェットを呼び出して

を支払う.

パスワードを入力し、支払いを完了し、コードは以下の

である.

// h5     
if (window.__wxjs_environment === 'miniprogram') {
//              ，             
// token id， sku   
wx.miniProgram.reLaunch({
  url: `/pages/h5-pay/main?data=${JSON.stringify({params, token})}`
})
return false
}

export default {
  name: 'index',
  data() {
    return {
      // path: 'https://ipxh5.jfshare.com'
    }
  },
  methods: {
  //        
    reLaunch(status) {
      wx.redirectTo({
        url: `/pages/h5-result/main?status=${status}`
      })
    },
    //     code
    login(options) {
      options = JSON.parse(options)
      let { token, params } = options

      wx.setStorage({
        key:"token",
        data: JSON.stringify(token)
      })

      let self = this
      wx.login({
        success (res) {
          if (res.code) {
            //      
           self.initPayInfo({code: res.code, ...params})
          } else {
            console.log('    ！' + res.errMsg)
          }
        }
      })
    },
    //     
    async initPayInfo(params) {
      let self = this
      let { errorCode, data } = await request.post('/order/order/createOrderPayInfo', params)
      if (errorCode === 0 ) {
         wx.requestPayment({
          ...data,
          signType: 'MD5',
          success (res) {
            self.reLaunch(1)
          },
          fail (res) {
            self.reLaunch(0)
          }
        })
      }
    }
  },
//            
  onLoad(options) { 
    if (options.data) {
      this.login(options.data)
    }
    
  }
}

終わりの言葉

アンドロイドの一部の機種では、Webページが閉じた後に現在のページで使用されているすべてのキャッシュ(cookie,sessionstorage,localstorage)が空になります.ここでは、

の処理が必要です.

支払いの順序についての処理は、判定の入れ子階層

を減少する.

上記のような公衆番号支払いと小プログラム支払いのappidが異なる場合の処理(バックエンド協力が必要)

.

デバッグ、vsconsoleを必ず使用してください.バックグラウンドがデバッグ中にログ

を常に開くようにしてください.

ウィジェットデバッグ開発者ツールを使用すれば