Django1.11配合uni-app发起微信支付!

经过三天的断断续续的奋战,我终于是干动了微信支付。为了以后不忘记,现在来一篇教程,来来来,开干!!!

Django1.11配合uni-app发起微信支付!

一、准备阶段

1、准备阶段我们需要去微信官网申请一个小程序或者公众号。获得AppID和AppSecret。

Django1.11配合uni-app发起微信支付!

2、去微信商户平台 成为商家,开通JSAPI用来获得商户号和自己配置的钥匙。然后再商户平台上面绑定小程序appid。

Django1.11配合uni-app发起微信支付!

(点击下面图片进入官方链接!)

Django1.11配合uni-app发起微信支付!

在配置里面配置一个自己的key,需要记住后台开发的时候需要!

Django1.11配合uni-app发起微信支付!

关联后即可在小程序管理页面开通微信支付!

Django1.11配合uni-app发起微信支付!

到此,准备阶段完成!

 

二、流程梳理

在这里我大概写一下流程:首先我们在前端发起微信登陆,此时微信会给我们返回一个openid,这个openid一定要留存在某一个位置。然后前段发起微信支付,向后端发送数据请求,后端对结合前段的数据向微信方面发送一个请求,请求相关数据,得到相关数据之后把数据发送给前段,前段收到数据,利用微信接口再向微信指定连接发送请求,微信返回请求,即可!这个就是全流程,很多人肯定已经懵了。没事,咱一步一步来,别步子跨大了——扯到蛋了!

Django1.11配合uni-app发起微信支付!

以上就是数据处理阶段大概流程!

三、代码实现

0、用户登录根据用户code获取openid

Django1.11配合uni-app发起微信支付!

 1 uni.login({
 2                     provider: 'weixin',
 3                     success: function(loginRes) {
 4                         let code = loginRes.code;
 5                         if (!_this.isCanUse) {
 6                             //非第一次授权获取用户信息
 7                             uni.getUserInfo({
 8                                 provider: 'weixin',
 9                                 success: function(infoRes) { 
10                           //获取用户信息后向调用信息更新方法
11                                     _this.nickName = infoRes.userInfo.nickName; //昵称
12                                     _this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
13                                         _this.updateUserInfo();//调用更新信息方法
14                                 }
15                             });
16                         }
17             
18                         //2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
19                         uni.request({
20                             url: 'http://127.0.0.1:8000/users/',
21                             data: {
22                                 code: code,
23                             },
24                             method: 'GET',
25                             header: {
26                                 'content-type': 'application/json' 
27                             },
28                             success: (res) => {
29                                 console.log(res.data)
30                                 if ( res.data.state== 1001) {
31                                     console.log("新注册的用户!")
32                                     _this.OpenId = res.data.openid;
33                                 } else{
34                                     _this.OpenId = res.data.openid;
35                                     console.log("注册过的用户!开始设置本地缓存!")
36                                     console.log(res.data[0].id)
37                                     if ( res.data[0].id ) {
38                                         //这里获得登陆状态,然后根据登陆状态来改变用户按钮信息!!!!
39                                     } else{
40                                         
41                                     };
42                                     _this.user_id = res.data[0].id
43                                     uni.setStorage({
44                                         key: 'user',
45                                         data: res.data,
46                                         success: function () {
47                                             console.log('设置缓存成功');
48                                         }
49                                     });
50                                     // _this.gotoshopping()
51                                     // uni.reLaunch({//信息更新成功后跳转到小程序首页
52                                     //     url: '/pages/shopping/shopping'
53                                     // });
54                                 }
55                                 //openId、或SessionKdy存储//隐藏loading
56                                 uni.hideLoading();
57                             }
58                         });
59                     },
60                 });

uni.login部分代码