小程序钱包页面

效果图

WXML代码

<!--index.wxml-->
<view class="container">
    <view class="qjt">
      <view class="upper" wx:for="{{list}}">
          <image src="{{item.icon}}"></image>
          <text>{{item.text}}</text>
        </view>
    </view>
     <navigator>
       <view>生活服务</view>
     </navigator>
   <view class="mtd" wx:for="{{first}}" wx:for-item="group2">
       <view class="next" wx:for="{{group2}}" wx:for-item="row2">
          <image src="{{row2.icon2}}"></image>
          <text>{{row2.text2}}</text>
       </view>
   </view>
</view>

WXSS代码

/**index.wxss**/
.container{
  height: 100vh;
  background-color: silver;
  display: flex;
  /* y轴为主轴 */
  flex-direction: column; 
}
.qjt{
  height: 400rpx;
  display: flex;
  flex-direction: row;
  background-color: #686f78;
}
.upper{
  display: flex;
  flex-direction:column;
  align-items: center;
  height: 300rpx;
  color: white;
}
.upper image{
  width: 150rpx;
  height: 150rpx;
  margin: 35rpx 50rpx;
}
navigator{
border:silver solid 4rpx;
background-color: #fff;
height: 80rpx;
padding: 20rpx 10rpx 0 10rpx;
}
.mtd{
  width: 100%;
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
}
.next{
  display: flex;
  flex-direction: column;
  align-items: center;
  border: silver solid 2rpx;
  background-color: #fff;
  width: 33.333%;
  height: 260rpx;
  /* 盒子模型 */
  box-sizing: border-box;
}
.next image {
  width: 150rpx;
  height: 150rpx;
}
text{
  font-size: 35rpx;
}

JS代码

（icon里面的图片没有上传）

// index.js
Page({
  data: {
    list:[
      {
         icon:"/img/money.png",
         text:"收付款"
      },{
        icon:"/img/balance.png",
        text:"零钱"
      },{
        icon:"/img/cards.png",
        text:"银行卡"
      }
    ],
    first:[
     [{
        icon2:"/img/cardRepay.png",
        text2:"信用卡还款"
      },{
        icon2:"/img/mobileTopup.png",
        text2:"手机充值"
      },{
        icon2:"/img/wealth.png",
        text2:"理财通"
      }],
      [{
        icon2:"/img/utilities.png",
        text2:"生活缴费"
      },{
        icon2:"/img/qqCoins.png",
        text2:"Q币充值"
      },{
        icon2:"/img/publicService.png",
        text2:"城市服务"
      }],
      [{
        icon2:"/img/cards.png",
        text2:"腾讯公益"
      },{
        icon2:"/img/charity.png",
        text2:"保险服务"
      }]
    ]
  },
})

先看下支付成功的页面截图：

开通微信支付需要有 营业执照、微信商户号、微信小程序的appid（已经认证通过）、然后在接入微信支付即可。（https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2Findex.php%2Fcore%2Fhome%2Fheader%3Fmenu%3D32103）。

第一步：在微信公共平台那里开通云函数。进入微信公众平台，点击右上角的头像按钮，选择左侧选项栏中的"云开发"按钮。（这里如何提示请绑定手机号的话，需要进入成员管理->管理员修改->更新管理员信息->绑定管理员手机号），这里创建云函数默认是免费版的，也可以选择付费的。

在微信开发者工具，创建微信小程序的时候选择"小程序-云函数"选项，这里需要填入自己真实的appid，创建之后进入到小程序是如下图所示的界面。

（注意：用户点击云开发图标时，有可能会出现一个错误提示信息，告知你无法创建云函数，报错信息如下，错误信息是“暂不支持快速创建的小程序”，这时我们需要去微信公共平台去开通云函数的功能，也就是在上面）

第二步：在cmd窗口中安装NodeJs，官网路径（http://nodejs.cn/download/），选择一个合适的版本下载即可。安装完成之后打开cmd命令行窗口，输入命令 npm -v 命令，显示对应的版本号，就证明安装成功。这个文件安装的位置没有要求，哪一个盘都行。

打开cmd面板，找到你创建小程序的路径下面的login文件夹，如下图所示：

复制路径，到cmd窗口当中，如下图所示：

然后在次输入命令，npm install --save wx-server-sdk@latest，回车即可，安装到login目录下。安装最新的。

第三步：然后打开微信开发者工具，鼠标点击cloudfunction文件夹，右键选择"新建Node.js云函数”选项，输入文件夹名称为pay，然后点击确定即可。

打开app.js文件，将env属性的值设置为自己创建云函数的环境id（在云开发控制台的设置那里，可以查看到自己的云函数的环境id）。

打开cmd控制面板，找到自己最新创建的pay文件夹，复制路径，进入到pay文件夹里面。这个安装也可以在微信开发者工具中，点击文件夹，右键选择在内部终端中打开，然后输入安装命令即可。这个和在cmd窗口下安装的过程和结果是相同的。我这里如下图所示：
然后在输入命令npm i tenpay@latest 命令，安装完成之后，输入命令 node -v 若出现版本提示信息，则证明安装成功。安装成功之后，在pay文件夹下面将会多出来一个node_modules文件夹，这里面就是刚才安装的文件。

第四步：将login文件夹上传到云函数当中。这里如果出现没有下载wx-****-sdk依赖的话，去看第三步，上传成功之后，会有一个绿色的对勾，打开云开发控制台，将会看到我们上传的函数。

这里也需要将cloudfunction文件夹下面的pay文件夹上传到我们的云函数里面，这里必须要有两个函数login和pay（如果修改了login或者pay文件夹里面的文件内容，则需要再次右键点击上传并部署到云函数当中）。

这个代码是cloudfunction文件夹下的pay文件夹下的index.js的代码。

//云开发实现支付
const cloud = require('wx-server-sdk')
cloud.init()

//1，引入支付的三方依赖
const tenpay = require('tenpay');
//2，配置支付信息
const config = {
  appid: '你的小程序appid', 
  mchid: '你的微信商户号',
  partnerKey: '微信支付安全密钥', 
  notify_url: '支付回调网址,这里可以先随意填一个网址', 
  spbill_create_ip: '127.0.0.1' //这里填这个就可以
};

exports.main = async(event, context) => {
  const wxContext = cloud.getWXContext()
  let {
    orderid,
    money
  } = event;
  //3，初始化支付
  const api = tenpay.init(config);

  let result = await api.getPayParams({
    out_trade_no: orderid,
    body: '商品简单描述',
    total_fee: money, //订单金额(分),
    openid: wxContext.OPENID //付款用户的openid
  });
  return result;
}

第五步：在pages文件夹下面创建一个pay页面。

pay.js代码如下：

// pages/pay/pay.js
Page({
  //提交订单
  formSubmit: function(e) {
    let that = this;
    let formData = e.detail.value
    console.log('form发生了submit事件，携带数据为：', formData)
    wx.cloud.callFunction({
      name: "pay",
      data: {
        orderid: "" + formData.orderid,
        money: formData.money
      },
      success(res) {
        console.log("提交成功", res.result)
        that.pay(res.result)
      },
      fail(res) {
        console.log("提交失败", res)
      }
    })
  },

  //实现小程序支付
  pay(payData) {
    //官方标准的支付方法
    wx.requestPayment({
      timeStamp: payData.timeStamp,
      nonceStr: payData.nonceStr,
      package: payData.package, //统一下单接口返回的 prepay_id 格式如：prepay_id=***
      signType: 'MD5',
      paySign: payData.paySign, //签名
      success(res) {
        console.log("支付成功", res)
      },
      fail(res) {
        console.log("支付失败", res)
      },
      complete(res) {
        console.log("支付完成", res)
      }
    })
  }
})

pay.wxml代码如下：

<form bindsubmit="formSubmit" bindreset="formReset">
<!-- 编写一个订单号 -->
  <input name="orderid" placeholder="编写一个订单号" />
<!-- 订单总价，单位是（分） -->
  <input name="money" placeholder="随便写一个点单总价" />
  <button form-type="submit" type="primary">提交订单</button>
</form>

在左边的页面上输入订单编号（这里的订单编号是大于6位），金额的单位是分。
点击提交订单按钮，微信开发者工具控制台下面将会出现一堆微信支付所必须的支付信息。

jeecg-uniapp-master\pages\water\cost\payment.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">微信支付</block>
		</cu-custom>
		<view class="uni-padding-wrap text-center">
			<view style="background:#FFF; padding:50rpx 0;">
				<view class="uni-hello-text uni-center payment">支付金额</text></view>
				<view class="uni-h1 uni-center uni-common-mt">
					<text class="rmbLogo">￥</text>
					<input class="price" type="digit" :value="price" maxlength="4" @input="priceChange" />
				</view>
			</view>
			<view class="uni-btn-v uni-common-mt text-center">
				<!-- #ifdef MP-WEIXIN -->
				<button type="primary" @click="weixinPay" :loading="loading"
					class="cu-btn bg-green shadow-blur round lg">微信支付</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<template v-if="providerList.length > 0">
					<button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)"
						:loading="item.loading">{{item.name}}支付</button>
				</template>
				<!-- #endif -->
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	import configService from '@/common/service/config.service.js'
	let apiUrl = configService.apiUrl;
	export default {
		data() {
			return {
				title: 'request-payment',
				loading: false,
				price: 0.01,
				providerList: []
			}
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			uni.getProvider({
				service: "payment",
				success: (e) => {
					console.log("payment success:" + JSON.stringify(e));
					let providerList = [];
					e.provider.map((value) => {
						switch (value) {
							case 'alipay':
								providerList.push({
									name: '支付宝',
									id: value,
									loading: false
								});
								break;
							case 'wxpay':
								providerList.push({
									name: '微信',
									id: value,
									loading: false
								});
								break;
							default:
								break;
						}
					})
					this.providerList = providerList;
				},
				fail: (e) => {
					console.log("获取支付通道失败：", e);
				}
			});
			// #endif
		},
		methods: {
			loginMpWeixin() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success(res) {
							uni.request({
								url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center',
								method: 'POST',
								data: {
									action: 'loginByWeixin',
									params: {
										code: res.code,
										platform: 'mp-weixin'
									}
								},
								success(res) {
									if (res.data.code !== 0) {
										reject(new Error('获取openid失败：', res.result.msg))
										return
									}
									uni.setStorageSync('openid', res.data.openid)
									resolve(res.data.openid)
								},
								fail(err) {
									reject(new Error('获取openid失败：' + err))
								}
							})
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			async weixinPay() {
				let openid = uni.getStorageSync('openid')
				// console.log("openid="+openid);
				console.log("发起支付");
				this.loading = true;
				if (!openid) {
					try {
						// openid = await this.loginMpWeixin()
					} catch (e) {
						console.error(e)
					}

					if (!openid) {
						uni.showModal({
							content: '获取openid失败',
							showCancel: false
						})
						this.loading = false
						return
					}
				}
				this.openid = openid
				let orderInfo = await this.getOrderInfo('wxpay')
				// console.log("orderInfo="+orderInfo);
				console.log("orderInfo.appId=" + orderInfo.appId);
				console.log("orderInfo.mchId=" + orderInfo.mchId);
				console.log("orderInfo.timeStamp=" + orderInfo.timeStamp);
				console.log("orderInfo.nonceStr=" + orderInfo.nonceStr);
				console.log("orderInfo.package=" + orderInfo.package);
				console.log("orderInfo.signType=" + orderInfo.signType);
				console.log("orderInfo.paySign=" + orderInfo.paySign);
				if (!orderInfo) {
					uni.showModal({
						content: '获取支付信息失败',
						showCancel: false
					})
					return
				}
				uni.requestPayment({
					...orderInfo,
					success: (res) => {
						uni.showToast({
							title: "支付成功!"
						})
					},
					fail: (res) => {
						uni.showModal({
							content: "支付失败,原因为: " + res
								.errMsg,
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false;
					}
				})
			},
			async requestPayment(e, index) {
				this.providerList[index].loading = true;
				const provider = e.id
				let orderInfo = await this.getOrderInfo(provider);
				if (!orderInfo) {
					uni.showModal({
						content: '获取支付信息失败',
						showCancel: false
					})
					return
				}
				console.log('--------orderInfo--------')
				console.log(orderInfo);
				uni.requestPayment({
					provider,
					orderInfo: orderInfo,
					success: (e) => {
						console.log("success", e);
						uni.showToast({
							title: "支付成功!"
						})
					},
					fail: (e) => {
						console.log("fail", e);
						uni.showModal({
							content: "支付失败,原因为: " + e.errMsg,
							showCancel: false
						})
					},
					complete: () => {
						this.providerList[index].loading = false;
					}
				})
			},
			getOrderInfo(provider) {
				return new Promise((resolve, reject) => {
					if (!this.price) {
						reject(new Error('请输入金额'))
					}
					uni.request({
						method: 'POST',
						// url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay',
						url: apiUrl + '/cost/payment/createOrder',
						data: {
							provider,
							openid: this.openid,
							totalFee: Number(this.price) * 100, // 转为以分为单位
							// #ifdef APP-PLUS
							platform: 'app-plus',
							// #endif
							// #ifdef MP-WEIXIN
							platform: 'mp-weixin',
							// #endif
							description: '用水户水费',
							notifyUrl: 'https://www.weixin.qq.com/wxpay/pay.php',
						},
						success(res) {
							if (res.data.code === 200) {
								resolve(res.data.result)
							} else {
								reject(new Error('获取支付信息失败' + res.data.msg))
							}
						},
						fail(err) {
							reject(new Error('请求支付接口失败' + err))
						}
					})
				})
			},
			priceChange(e) {
				console.log(e.detail.value)
				this.price = e.detail.value;
			}
		}
	}
</script>

<style>
	.payment {
		font-size: 30rpx;
	}

	.rmbLogo {
		font-size: 50rpx;
	}

	button {
		background-color: #007aff;
		color: #ffffff;
	}

	.uni-h1.uni-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		font-size: 40rpx;
	}

	.price {
		border-bottom: 1px solid #eee;
		width: 200rpx;
		height: 80rpx;
		padding-bottom: 4rpx;
		font-size: 50rpx;
	}

	.ipaPayBtn {
		margin-top: 30rpx;
	}
</style>