• 微信支付
    • 申请微信账号和配置
    • 1. 添加支付页面的路由
    • 2. 添加vue页面
    • 看效果
    • 总结

    微信支付

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

    建议每位同学都要从官方文档看起。 虽然市面上有一些集成工具，例如 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

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