• 原网址1：http://lib.csdn.net/article/wechat/67140?knId=1796

• 原网址2：https://www.cnblogs.com/luolizhi/p/6271232.html

• 原网址3：https://www.cnblogs.com/catcher1994/p/6664404.html

前端做的东西很少，大部分都需要后端来做

前端完整代码

      wx.login({
            success(res) {
                console.log(res.code);
                wx.request({
                    url: '服务器的URL',
                    data: {
                        "appid":  小程序appid,
                        "secret":  小程序密钥,
                        "js_code": res.code,
                        "grant_type": "authorization_code"
                    },
                    method: "POST",
                    header: {
                        'content-type': 'application/json' // 默认值
                    },
                    success: function (res) {
                        if (res.data.openid) {
                           //获取openid
                            wx.request({
                                url: '服务器的URL',
                                data: {
                                    "appid": 小程序appid,
                                    "openid":openid,
                                    "key": 商户密钥,//在商户平台设置
                                    "mch_id": 商户号,
                                    "total_fee": 支付金额
                                },
                                method: "POST",
                                header: {
                                    'content-type': 'application/json' // 默认值
                                },
                                success: function (res) {
                                    console.log(res.data);
                                    //请求微信号支付接口
                                    wx.requestPayment({
                                        'timeStamp': res.data.timeStamp,
                                        'nonceStr': res.data.nonceStr,
                                        'package': res.data.package,
                                        'signType': 'MD5',
                                        'paySign': res.data.paySign,
                                        'success': function (res) {
                                            console.log(res);
                                            wx.showToast({
                                                title: '支付成功',
                                                icon: 'success',
                                                duration: 2000
                                            })
                                        },
                                        'fail': function (res) {
                                            wx.showToast({
                                                title: '支付失败',
                                                icon: 'success',
                                                duration: 2000
                                            })
                                        }
                                    })
                                }
                            })
                        }
                    }
                })
            }
        })