公众号之实现支付功能

提示：以下案例为余额支付以及微信支付

目录

涉及知识点：

一、HTML部分

二、JS部分

三.PHP部分

总结

---

涉及知识点：

• 本地存储
• 跳转传参
• js获取请求参数

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML部分

参考文档： radio单选框

//单选框用于有一个选择，用户只能选择其中一个的场景。	

<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange" size="40">
	<u-radio labelSize="30" shape="circle" :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name" @change="radioChange">
	</u-radio>
</u-radio-group>



<view class="btn" v-if="addressList==''">立即付款（￥{{Number(goods.price)*value}}）</view>
<view class="btn1" v-else @click="toBuy">立即付款（￥{{Number(goods.price)*value}}）</view>

二、JS部分

代码如下（示例）：

注意：

• 请勿忘记判断是否有openid
• 案例中跳转链接不能透露，仅以百度为例，请大家按需修改

        radiolist1: [{
						name: '余额支付',
						disabled: false
					},
					{
						name: '微信支付',
						disabled: false
					}
				],
		radiovalue1: '余额支付',
		payment: 1


        onLoad(e) {    
            //有openid再调用
			if (e.openid) {
				uni.setStorageSync("openID", e.openid)
				this.submit(uni.getStorageSync("openID"))
			}
		},

     	groupChange(n) {
			console.log('groupChange', n);
		},
		radioChange(n) {
			// console.log('radioChange', n);
			if (n == "微信支付") {
				this.payment = 2
				console.log(this.payment);
			} else if (n == "余额支付") {
				this.payment = 1
				console.log(this.payment);
			}

		},
        
        toBuy() {
				uni.setStorageSync("remark", this.value1);
				uni.setStorageSync("buyNum", this.value);
				uni.setStorageSync("payment", this.payment);
				if (this.payment == 1) {
					this.submit()
					return
				}

				if (uni.getStorageSync("openID")) {
					this.submit(uni.getStorageSync("openID"))
					return
				} else {
					window.location.href = "https://www.baidu.com/api/user/Oauthpay"
				}
			},
			submit(openid = null) {
				let that = this;
				let sendData = {
					address: that.addressList.address,
					mobile: that.addressList.phone,
					username: that.addressList.name,
					goods_id: uni.getStorageSync('goodsList').id,
					number: uni.getStorageSync('buyNum'),
					postscript: uni.getStorageSync('remark'),
					money: uni.getStorageSync('goodsList').price,
					payment: uni.getStorageSync('payment'),
					openid: openid
				}
				that.apifun.unirequest(that.apifun.getBuy, 'post', sendData, (res) => {
					console.log(res)
					if (res.code === 1) {
						if (uni.getStorageSync('payment') == 2) {
							window.location.href = "https://www.baidu.com/weipay.php?data=" + JSON.stringify(res.data)
						} else {
							that.apifun.toast("支付成功")
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/index/success"
								})
							}, 1500)
						}

					} else {
						that.apifun.toast(res.msg)
					}
				})
			},

三.PHP部分

    <script type="text/javascript">
        //调用微信JS api 支付
        function jsApiCall()
        {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                <?php echo $jsApiParameters; ?>,
                function(res){
                    WeixinJSBridge.log(res.err_msg);
					if(res.err_msg == "get_brand_wcpay_request:cancel"){
						alert("取消支付")
						window.location.href = "/#/pages/mine/pay"
					}else if(res.err_msg == "get_brand_wcpay_request:ok"){
						alert("支付成功")
						window.location.href = "/#/pages/index/success"
					}
                    
                }
            );
        }

        function callpay()
        {
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
                    document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
                }
            }else{
                jsApiCall();
            }
        }
		
		callpay()
    </script>

---

总结

以上就是今天要讲的内容啦，本文仅仅简单介绍了在支付时跳转新页面支付的效果，希望对大家有帮助

原创不易，还希望各位大佬支持一下

点赞，你的认可是我创作的动力！