uniapp 电商小程序微信支付功能及当前页面刷新

Myth丶恋晨 2021-07-26 01:09 1000阅读 0赞

## 微信支付 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

微信支付函数如下：

// 此处的orderId是一个传递过来的参数，可忽略
    // this.needpPay 是一个是否能够进行微信支付的开关，这个是跟上文函数逻辑有关系的
    pay(orderId){ 
    	if(!this.needpPay){ 
    		return;
    	}
    	let _this = this;
    	// this.$request.urlRequest是一个函数请求的接口
    	this.$request.urlRequest(
    		'/order/user/prepay',
    		{ 
    		  "openId": uni.getStorageSync('openId'),
    		  "orderId": orderId,
    		  "payType": 0
    		},
    		'POST',
    		function (res) { 
    			let data = res;
    			// 微信支付的接口
    			uni.requestPayment({ 
    				provider: 'wxpay',
    				timeStamp: data.result.timeStamp,
    				nonceStr: data.result.nonceStr,
    				package: 'prepay_id='+data.result.prepayId,
    				signType: data.result.signType,
    				paySign: data.result.sign,
    				success: function(res) { 
    					console.log(res)
    					uni.showToast({ 
    						title: "支付成功",
    						duration: 3000,
    						icon: 'none',
    					});
    					// 此处的代码为刷新当前页面
    					var pages = getCurrentPages();
    					var curPage = pages[pages.length - 1];
    					curPage.onLoad(_this.option);
    				},
    				fail: function(err) { 
    					console.log(err)
    					uni.showModal({ 
    						content: "支付失败",
    						showCancel: false,
    					})
    				}
    			});
    		}
    	)
    }

微信支付成功后，当前页面的“待付款”状态需要改变成“待发货”。此时就需要进行当前页面的刷新。

刷新当前页面需要用到的是uniapp中的`getCurrentPages()`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

// 此处的代码为刷新当前页面
    	var pages = getCurrentPages();  // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
    	var curPage = pages[pages.length - 1]; // 当前页面是这个页面栈数组中的最后一个
    	curPage.onLoad(_this.option);//由于当前页面加载的时候，需要有个参数，这个参数可以在当前页面加载的时候保存一下。

onLoad(option){ 
    	//此页面加载数据
    	this.getData(option.id);
    	//保存当前页面的option对象
    	this.option = option;
    },

其他博主的知识点汇总情况：

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 注意：
    
    不要尝试修改页面栈，会导致路由以及页面状态错误。
    不要在 App.onLaunch 的时候调用 getCurrentPages()，此时page 还没有生成。
    
    熟悉页面栈后才能更好的使用getCurrentPages()，下面将列举几种常用的使用场景：
    1、利用页面栈的长度
    例如：进入小程序非默认首页时，需要提供返回首页的按钮或者执行其它事件
      onShow() { 
        let pages = getCurrentPages(); //当前页面栈
        if (pages.length == 1) { 
         //todo
        }
      },
    
    2、跨页面赋值
     let pages = getCurrentPages();//当前页面栈
     let prevPage = pages[pages.length - 2];//上一页面
      prevPage.setData({ 
         //直接给上移页面赋值
      });
    
    3、页面跳转后自动刷新
     //举例
        wx.switchTab({  
         url: '../index/index', 
         success: function (e) {  
          var page = getCurrentPages().pop(); //当前页面
          if (page == undefined || page == null) return; 
          page.onLoad(); //或者其它操作
         } 
        })
    
    4、获取当前页面相关信息
     let pages = getCurrentPages(); //当前页面栈
     //当前页面为页面栈的最后一个元素
     let prevPage = pages[pages.length - 1];//当前页面
     or
     // pop() 方法用于删除并返回数组的最后一个元素
     let prevPage = pages.pop();//当前页面
     
     console.log( prevPage.route) //举例：输出为‘pages/index/index’
    
    以上就是我在微信小程序开发中经常会遇到的getCurrentPages()使用场景

此博客链接：  
[博客链接][Link 1]

## 微信账户登录 ##

uni.login({ 
    //第三方账户登录中的微信账户登录
    	provider: 'weixin',
    	success: function(loginRes) { 
    		// 获取用户信息 
    		uni.getUserInfo({ 
    			provider: 'weixin',
    			success: function(infoRes) { 				
    				_this.userInfo = infoRes.userInfo;
    				//将用户信息保存到本地缓存中
    				uni.setStorageSync('userDetail',infoRes.userInfo)
    				console.log(infoRes)
    			}
    		});
    	}
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/313ea10c29ad41ffb44d95a4ebc596df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/64f0c8f6bfc74bb9ae52efd188ca5590.png
[Link 1]: https://www.cnblogs.com/Dark-fire-liehuo/p/11447756.html