微信支付

微信支付，最难的地方不在于技术，而是在于微信有一套自己的技术规范。

建议每位同学都要从官方文档看起。 虽然市面上有一些集成工具，例如 Ping++ , 但是往往这些产品不是特别方便，收费也比较高昂。 出了问题不好调试。

所以，我们对于核心技术，一定要亲自掌握。

申请微信账号和配置

这里就不详述了。 我们假设全部的账号都已经做好了。

1. 添加支付页面的路由

  1. import Pay from '@/components/pay'
  3. Vue.use(Router)
  5. export default new Router({
  6.   routes: [
  7.     { 
  8.       path: '/shops/pay',
  9.       name: 'Pay',
  10.       component: Pay
  11.     },
  12.   ]
  14. })

2. 添加vue页面

  1. <template>
  2.   <div class="background">
  3.     <header class="top_bar">
  4.       <a onclick="window.history.go(-1)" class="icon_back"></a>
  5.       <h3 class="cartname">订单支付</h3>
  6.     </header>
  8.     <div class="tast_list_bd" style="background-color: #F3F3F3; padding-top: 0; padding-bottom: 80px;">
  9.       <div class="goods_detail" style="">
  11.         <main class="detail_box">
  12.             <span class="divider"></span>
  14.             <form style="margin-top: 45px;">
  15.                 <div class="column is-12">
  16.                     <label class="label">收货人</label>
  17.                     <p class="control has-icon has-icon-right">
  18.                     <input name="name" v-model="mobile_user_name" v-validate="'required|required'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="例如: 张三" autofocus="autofocus"/>
  19.                     <span v-show="errors.has('name')" class="help is-danger">收货人不能为空</span>
  20.                     </p>
  21.                 </div>
  23.                 <div class="column is-12">
  24.                     <label class="label">收货地址</label>
  25.                     <p class="control has-icon has-icon-right">
  26.                     <input name="url" v-model="mobile_user_address" v-validate="'required|required'" :class="{'input': true, 'is-danger': errors.has('url') }" type="text" placeholder="例如: 北京市朝阳区大望路西西里小区4栋2单元201"/>
  27.                     <span v-show="errors.has('url')" class="help is-danger">收货地址不能为空</span>
  28.                     </p>
  29.                 </div>
  31.                 <div class="column is-12">
  32.                     <label class="label">收货电话</label>
  33.                     <p class="control has-icon has-icon-right">
  34.                     <input name="phone" v-model="mobile_user_phone" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" placeholder="例如: 18888888888"/>
  35.                     <span v-show="errors.has('phone')" class="help is-danger">电话号码不能为空</span>
  36.                     </p>
  37.                 </div>
  38.             </form>
  40.         <span class="divider"></span>
  42.         <section class="product_info clearfix" v-if="single_pay">
  43.           <div>
  44.             <div class="fu_li_zhuan_qu" >
  45.               <img :src="good_images[0]" class="logo_image"/>
  46.               <div class="content" >
  47.                 <div class="title">
  48.                   {{good.name}}
  49.                 </div>
  50.                 <div class="logo_and_shop_name">
  51.                   <div class="product_pric">
  52.                     <span>￥</span>
  53.                     <span class="rel_price">{{good.price}}</span>
  54.                     <span> &nbsp x {{buy_count}}</span>
  55.                   </div>
  56.                 </div>
  57.               </div>
  58.             </div>
  59.           </div>
  60.         </section>
  62.         <section class="product_info clearfix" v-else v-for="product in cartProducts">
  63.           <div>
  64.             <div class="fu_li_zhuan_qu" >
  65.               <img :src="product.image" class="logo_image"/>
  66.               <div class="content" >
  67.                 <div class="title">
  68.                   {{product.title}}
  69.                 </div>
  70.                 <div class="logo_and_shop_name">
  71.                   <div class="product_pric">
  72.                     <span>￥</span>
  73.                     <span class="rel_price">{{product.price}}</span>
  74.                     <span> &nbsp x {{product.quantity}}</span>
  75.                   </div>
  76.                 </div>
  77.               </div>
  78.             </div>
  79.           </div>
  80.         </section>
  82.         <section>
  83.           <span class="divider" style="height: 15px;"></span>
  84.           <div class="extra_cost" style=" ">
  85.             <span style="float: left; margin-left: 15px;"> 卖家留言:</span>
  86.             <input v-model="guest_remarks" id="extra_charge" type="text" name="cost" placeholder="选填: 对本次交易的说明" style="border: 0; background-color: white;
  87.             font-size: 15px; color: #48484b; outline: none; width: 60%;"></input>
  88.           </div>
  89.         </section>
  91.         <section>
  92.           <span class="divider"></span>
  93.           <div class="extra_cost" style=" ">
  94.             <span style="float: left; margin-left: 15px;"> 应付金额:</span>
  95.             <div v-if="single_pay" class="rel_price" type="text" name="cost" style="border: 0; background-color: white;
  96.             font-size: 20px; color: #ff621a; font-weight: bold; outline: none; text-align: right; padding-right: 20px;"> \{\{ total_cost | currency }}</div>
  97.             <div v-else class="rel_price" type="text" name="cost" style="border: 0; background-color: white;
  98.             font-size: 20px; color: #ff621a; font-weight: bold; outline: none; text-align: right; padding-right: 20px;"> \{\{ total | currency }}</div>
  100.           </div>
  101.         </section>
  102.         </main>
  104.         <span class="divider"></span>
  106.         <div style="height: 55px;  display: flex; width: 100%; padding: 0px 10px; background-color: #fff;" @click="">
  107.           <div style="flex: 1; display: flex;">
  108.             <div style="margin-top: 10px;">
  109.               <img src="../../assets/微信icon@3x.png" style="width: 35px;"/>
  110.             </div>
  111.             <span style="margin-top: 8px; font-size: 18px; line-height:40px; margin-left: 10px;">微信支付</span>
  112.           </div>
  114.           <div style=" padding: 14px 10px;" @click="user_wechat">
  115.             <img src="../../assets/选中3x.png" style="width: 28px;"/>
  116.           </div>
  117.         </div>
  118.       </div>
  119.     </div>
  121.     <div class="shop_layout-scroll-absolute" style="">
  122.       <div class="queding" @click="buy">
  123.         立即支付
  124.       </div>
  125.     </div>
  127.   </div>
  128. </template>
  129. <script>
  130.    import { go } from '../../libs/router'
  131.    import { mapGetters } from 'vuex'
  132.    export default{
  133.         data(){
  134.             return {
  135.                 good_images: [],
  136.                 good: "",
  137.                 buy_count: this.$route.query.buy_count,
  138.                 good_id: this.$route.query.good_id,
  139.                 open_id: this.$store.state.userInfo.open_id,
  140.                 mobile_user_address: '',
  141.                 mobile_user_name: '',
  142.                 mobile_user_phone: '',
  143.                 guest_remarks: '',
  144.                 is_use_wechat: false,
  145.             }
  146.         },
  147.         watch:{
  148.         },
  149.         mounted(){
  150.           if (this.single_pay) {
  151.               this.$http.get(this.$configs.api + 'goods/goods_details?good_id=' + this.good_id).then((response)=>{
  152.                   console.info(this.good_id)
  153.                   console.info(response.body)
  154.                   this.good = response.body.good
  155.                   this.good_images = response.body.good_images
  156.               },(error) => {
  157.                   console.error(error)
  158.               });
  159.           }
  160.         },
  161.         computed:  {
  162.             total () {
  163.               return this.cartProducts.reduce((total, p) => {
  164.                 return (total + p.price * p.quantity)
  165.               }, 0)
  166.             },
  167.             single_pay () {
  168.                return this.good_id && this.buy_count
  169.             },
  170.             total_cost () {
  171.               return this.good.price * this.buy_count
  172.             },
  173.             ...mapGetters({
  174.               cartProducts: 'cartProducts',
  175.               checkoutStatus: 'checkoutStatus'
  176.             })
  177.         },
  178.         methods:{
  179.             validateBeforeSubmit() {
  180.                //拦截异步操作
  181.                return new Promise((resolve, reject) => {
  182.                    this.$validator.validateAll().then(result => {
  183.                        console.info(result)
  184.                        if (result) {
  185.                            console.info("============表单验证成功===")
  186.                            resolve(true);
  187.                        } else {
  188.                            alert('请填写完整的收货信息!');
  189.                            resolve(false);
  190.                        }
  191.                     });
  192.                })
  193.             },
  194.             plus () {
  195.               this.buy_count = this.buy_count + 1
  196.             },
  197.             minus () {
  198.               if(this.buy_count > 1) {
  199.                 this.buy_count = this.buy_count - 1
  200.               }
  201.             },
  202.             user_wechat () {
  203.               if (this.is_use_wechat === false) {
  204.                 this.is_use_wechat = true
  205.               } else {
  206.                 this.is_use_wechat = false
  207.               }
  208.             },
  209.             buy (){
  210.                 let result = this.validateBeforeSubmit().then((resolve)=>{
  211.                     if (resolve) {
  212.                         console.info('true ==== ')
  213.                         let params
  214.                         if (this.single_pay) {
  215.                             params = {
  216.                                 good_id: this.good_id,
  217.                                 buy_count: this.buy_count,
  218.                                 total_cost: this.total_cost,
  219.                                 guest_remarks: this.guest_remarks,
  220.                                 mobile_user_address: this.mobile_user_address,
  221.                                 mobile_user_name: this.mobile_user_name,
  222.                                 mobile_user_phone: this.mobile_user_phone,
  223.                                 open_id: this.open_id
  224.                             }
  225.                         } else {
  226.                             console.info(this.total)
  227.                             params = {
  228.                                 goods: this.cartProducts,
  229.                                 total_cost: this.total,
  230.                                 guest_remarks: this.guest_remarks,
  231.                                 mobile_user_address: this.mobile_user_address,
  232.                                 mobile_user_name: this.mobile_user_name,
  233.                                 mobile_user_phone: this.mobile_user_phone,
  234.                                 open_id: this.open_id
  235.                             }
  236.                         }
  237.                         this.$http.post(this.$configs.api + 'goods/buy', params
  238.                         ).then((response) => {
  239.                             let order_number =  response.body.order_number
  240.                             this.purchase(order_number)
  241.                         }, (error) => {
  242.                             console.error(error)
  243.                         });
  244.                     } else {
  245.                         console.info('== 请填写完整的收货信息')
  246.                     }
  247.                 });
  248.             },
  249.             purchase (order_number) {
  250.               //调起微信支付界面
  251.               if (typeof WeixinJSBridge == "undefined"){
  252.                 if( document.addEventListener ){
  253.                   document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
  254.                 }else if (document.attachEvent){
  255.                   document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
  256.                   document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
  257.                 }
  258.               }else{
  259.                 this.onBridgeReady(order_number);
  260.               }
  261.             },
  262.             onBridgeReady (order_number) {
  263.               let that = this
  264.               let total_cost
  265.               if (this.single_pay) {
  266.                 total_cost = this.total_cost
  267.               } else {
  268.                 total_cost = this.total
  269.               }
  270.               this.$http.post(this.$configs.api + 'payments/user_pay',
  271.               {
  272.                 open_id: this.$store.state.userInfo.open_id,
  273.                 total_cost: total_cost,
  274.                 order_number: order_number
  275.               }).then((response) => {
  276.                 WeixinJSBridge.invoke(
  277.                     'getBrandWCPayRequest', {
  278.                         "appId": response.data.appId,
  279.                         "timeStamp": response.data.timeStamp,
  280.                         "nonceStr": response.data.nonceStr,
  281.                         "package": response.data.package,
  282.                         "signType": response.data.signType,
  283.                         "paySign":  response.data.paySign
  284.                     },
  285.                     function(res){
  286.                         // 下面代码仅用于调试
  287.                         // alert("res.err_msg: " + res.err_msg + ", err_desc: " + res.err_desc)
  288.                         if(res.err_msg == "get_brand_wcpay_request:ok" ) {
  289.                           // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
  290.                           that.$router.push({ path: '/shops/paysuccess?order_id=' + order_number });
  291.                         } else {
  292.                           // 显示取消支付或者失败
  293.                           that.$router.push({ path: '/shops/payfail?order_id=' + order_number });
  294.                         }
  295.                     }
  296.                 );
  297.               }, (error) => {
  298.                 console.error(error)
  299.               });
  300.             }
  301.           },
  302.     }
  303. </script>

核心代码如下：

  1. onBridgeReady (order_number) {
  2.   //....
  3.   this.$http.post(this.$configs.api + 'payments/user_pay',
  4.   {
  5.     open_id: this.$store.state.userInfo.open_id,
  6.     total_cost: total_cost,
  7.     order_number: order_number
  8.   }).then((response) => {
  9.     WeixinJSBridge.invoke(
  10.         'getBrandWCPayRequest', {
  11.             "appId": response.data.appId,
  12.             "timeStamp": response.data.timeStamp,
  13.             //....
  14.         },
  15.         function(res){
  16.             //...
  17.         }
  18.     );
  19.   }, (error) => {
  20.     console.error(error)
  21.   });
  22. }

上面的代码是用来给页面一准备好( WeixinJSBridge 准备好了)的时候，页面就要调用的。 

  1. purchase (order_number) {
  2.   //调起微信支付界面
  3.   if (typeof WeixinJSBridge == "undefined"){
  4.     if( document.addEventListener ){
  5.       document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
  6.     }else if (document.attachEvent){
  7.       document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
  8.       document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
  9.     }
  10.   }else{
  11.     this.onBridgeReady(order_number);
  12.   }
  13. },

上面的代码用于调用出 “微信支付页面”. 其中的变量 WeixinJSBridge 是微信浏览器自带的变量， 不必声名，直接拿过来用就行。

看效果

微信的支付页面会跳出来 （图略）

总结

可以看到：

  1. 微信支付的细节处理，都交给了后台服务器端。 只要我们H5端把参数准备好，直接访问 http://shopweb.siwei.me/api/payments/user_pay 就可以了。
  2. 微信支付，分成单笔商品支付和多笔商品支付两种情况. 区别就是把参数重新组织一下即可。
  3. 新手对于 WeixinJSBridge 这个变量很难掌握， 一定要多看文档。 这个文档是 “微信公众号内支付”的文档， 不是微信APP ， 或者微信普通H5的文档。 一定要梳理好逻辑。 另外，对于后端API的同学这里更难，建议多查多试。
  4. 在微信的后台，要配置不同的支付目录。 安卓和IOS 的粗略是不一样的。 建议大家百度一下。
  5. 微信的支付场景对应的支付方式和实现方式是不一样的。 本例是“微信的公众号内支付”。

微信的官方文档中， 提供的例子都是基于经典的WEB页面（整体刷新的那种）的，目前还没有看到SPA的例子。 但是大家的问题很多。 我的个人博客也记录了一些内容： http://siwei.me/blog/posts/--27

由于篇幅限制，微信相关的内容不再赘述。