专栏首页三掌柜的技术空间微信小程序开发:集成微信支付功能

微信小程序开发:集成微信支付功能

说到微信小程序开发,是真的气不打一处来,微信开发文档真的很坑爹,需要蒙、猜,尤其是对于微信开发的刚入行的同行来说,真的是有点难度,而且踩坑不断,连环坑层出不穷,真的是无力吐槽,废话少说,本篇博文来话一下微信小程序开发的微信支付功能的实现。

这里不再说微信小程序的微信支付的后端处理部分,如有后端的开发人员看到本篇博文请直接跳过。直接说说微信小程序前端部分集成微信支付的部分,如有不懂的地方,或者内容有错误的地方欢迎指出来,不胜感激。

网上有太多的无良教程,关于微信支付的openid讲解不详细,根本就没说前端自己处理获取openid是多么的不安全,多么的危险。那么,在这里可以明确的告诉大家,如果想让公司的业务不出现损失,防范于未然,还是直接建议你的上司,不要听后台的一言之词,因为有时候后台嫌麻烦就不想处理这些逻辑,获取openid的正确步骤是:前端通过wx.login(Object object)获取登录凭证code,然后根据后台提供的接口把code发送给后台,后台从微信官方后台获取openid、session_key等信息,最后前端根据后台返回的timeStamp 、nonceStr 、package、paySign等这些参数,去请求微信支付的系统方法wx.requestPayment(Object object),最后拉起来微信支付的接口去付款。

先把前端需要调用的几个方法进行分离讲解,最后面在进行组合使用的介绍。大概代码步骤如下所示:

1、获取登录凭证code的方法

wx.login({

success: function (res) {

console.log("获取code",res.code); //res.code就是获取到的登录凭证code

}

});

2、请求自己后台的接口获取微信支付需要传的timeStamp 、nonceStr 、package、paySign等参数

let url = `https://iot..cn/api/mobile/payment/toPay?code=${res.code}`;

const params = {

code: res.code,

}

pay(url, params).then(res => {

const { code, data, msg } = res;

if (code = 200) { //res里面就是后台返回的timeStamp 、nonceStr 、package、paySign等参数数据

}

3、调用微信支付的方法

wx.requestPayment({

timeStamp: data.timeStamp,

nonceStr: data.nonceStr,

package: data.package,

signType: data.signType,

paySign: data.sign,

success(res) {

wx.showModal({

title: '支付成功',

showCancel: false,

success: () => {

wx.redirectTo({

url: "../home/home",

})

// wx.navigateBack()

}

})

},

fail(res) {

wx.showModal({

title: '支付失败',

content: res,

showCancel: false

})

}

})

以上三个方法是拆分了实现微信支付功能的步骤,下面再来把完整的步骤整合在一起,具体如下所示:

payCost: function () { //这是在支付按钮的点击事件里面进行支付处理

var that = this;

const {

id

} = this.data.detail; //登陆获取code

wx.login({

fail() {

wx.showToast({

title: '微信登录失败'

})

},

success: async function (res) {

// console.log("获取code", res.code);

if (!res.code) {

wx.showToast({

title: '微信登录失败,无法调起支付',

})

return;

}

let url = `https://iot..cn/api/mobile/payment/toPay?code=${res.code}`;

const params = {

code: res.code,

}

wxPay(url, params).then(res => {

const { code, data, msg } = res;

if (code != 200) {

wx.showToast({

title: msg,

});

return;

}

wx.requestPayment({

timeStamp: data.timeStamp,

nonceStr: data.nonceStr,

package: data.package,

signType: data.signType,

paySign: data.sign,

success(res) {

wx.showModal({

title: '支付成功',

showCancel: false,

success: () => {

// wx.navigateBack()

}

})

},

fail(res) {

wx.showModal({

title: '支付失败',

content: res,

showCancel: false

})

}

})

}).cache(err => {

wx.showModal({

title: '支付失败',

content: '请求支付信息失败!' + err.message

})

});

}

})

},

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

本文分享自微信公众号 - iOS开发by三掌柜(sanzhanggui777),作者:三掌柜666

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信公众号使用:新的微信公众号(企业版)的申请步骤

    新创建的公司宣传最重要,首先要做的就是要申请一个公司自己的微信公众平台,这样不仅可以圈粉,还是公司的门户之一,方便大众更好的了解,对公司的发展也是只有好处没有坏...

    三掌柜
  • 微信小程序:小程序开发工具安装以及新建微信小程序项目的步骤

    微信小程序的开发现在是越来越火,先不说个人开发爱好者自己开发的小程序,就说软件市场,以微信小程序开发为生的软件企业来说,小程序的开发业务非常火爆,但是小程序开发...

    三掌柜
  • 微信公众号使用:在微信公众号文章中嵌入小程序的方法

    最近有点忙,没有时间写知识点,今天来分享一个非常使用的知识点:在微信公众号文章中嵌入小程序。这个问题也很简单,但是对于第一次接触的人来说还是需要走点弯路才能解决...

    三掌柜
  • 微信小程序授权登录与用户信息保存详解(微信报修小程序源码讲解六)

    提醒:小程序端源码已经更新整理,相比旧源码,新源码简洁、结构清晰、需要的同学及时找我获取源码。

    热心的程序员
  • 小程序 · 一周报

    有读者发现,微信近日悄然上线了小游戏设计指南。微信基于小游戏轻便快捷、便于传播的特点拟定了小游戏界面设计指南和建议,旨在帮助小游戏开发者创造更优秀的游戏产品,同...

    极乐君
  • 重新安装微信后,小程序还在吗?| 小程序问答 #50

    很多人换手机、重置手机后,都需要重新安装微信。那么,微信被重置后,小程序究竟还在不在呢?

    知晓君
  • 小程序线上线下打通增强体验和效率 新零售业该如何把握机会?

    自小程序2017年1月9号正式上线以来,不论是中小商家,还是各大品牌巨头,都在抢占小程序这波风口,打造属于自己的小程序。截至目前,全国正式上线小程序超过100万...

    速成应用小程序开发平台
  • 细说前端基础安全知识

    XSS通常是由带有页面解析内容的数据未经处理直接插入页面上解析导致的。而XSS根据攻击脚本的引入位置又可以分为以下三种:

    踏浪
  • GSON搞定任何JSON数据

    一觉睡到小时候
  • 有哪些微信小程序值得推荐?| 码云周刊第 71 期

    码云Gitee

扫码关注云+社区

领取腾讯云代金券