精华内容
下载资源
问答
  • 2022-04-12 14:20:53

    1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现;

    2.微信小程序(webview访问H5页面)必须使用微信小程序支付;

    如何实现以及实现方式以及支付后页面返回功能:

    商品详情(h5页面)-->商品确认页(h5页面)-->收银台(h5页面)(点击调用小程序支付页面并关闭收银台)-->进入小程序支付页面(小程序)(根据支付结果判断下一步跳转页面)

    支付成功跳转落地页(h5页面)(点击返回-->商品详情)

    支付失败跳转回收银台(h5页面)(点击返回-->商品详情)

    1).收银台页面

    //store - action
    import wx from 'weixin-js-sdk'
    
     /**
             * 微信JSSDK调用小程序页面并传递支付信息 vuex--action
             * @param {*} param0
             * @param {*} payType
             */
            AWechatJsPay ({ state, commit, dispatch, rootState }) {
                const openId = rootState.wechat.openId
                const params = { openId, payMethod: 'JSAPI', payType: '1' }
                return dispatch('AGetPaymentSignInfo', params).then(res => {
                    const { data: signature, error } = res
                    if (error) {
                        return Promise.resolve(error)
                    }
                    const payParamsStr = encodeURIComponent(JSON.stringify(signature));
                    const paymentQuery = encodeURIComponent(location.hash.split('?')[1]);
                    
                    const url=`../wxpay/wxpay?payParams=${payParamsStr}&paymentQuery=${paymentQuery}`;
                    console.log('url---payParams:', url, signature);
                    //跳转到小程序支付界面wxPay
                    return new Promise((resolve) =>{
                        wx.miniProgram.navigateTo({
                          url,
                          success: function(){
                            resolve()
                          },
                          fail: function(){
                            resolve('调起支付失败')
                          }
                        });
                    })
                })
            }
    
    //vue - js
     store.dispatch('payment/AWechatJsPay').then(res => {
          res && Toast(res)
          !res && router.back(); //调起小程序支付后关闭收银台
     })

    2).小程序支付代码

    // pages/wxpay/wxpay.wxml
    <view class='wrapper'></view>
    // pages/wxpay/wxpay.js
    Page({
      onLoad: function (options) {
        console.log('支付开始');
        console.log('======',options);
        if(options){
          const _this = this;
          const { payParams, paymentQuery } = options;
          const payParam = JSON.parse(decodeURIComponent(payParams));
          const params = { paymentQuery: decodeURIComponent(paymentQuery) }
          wx.requestPayment({
            ...payParam,
            'success': function (res) {
              console.log('=======支付成功==========', res);
              params.type = "success";
              params.msg = "支付成功";
              _this.goNextStep(params);
            },
            'fail': function (res) {
              let msg="支付失败";
              if (res.errMsg.indexOf("fail cancel"))
              {
                msg="支付取消";
              }
              console.log('=========未支付========', msg)
              params.type = "fail";
              params.msg = msg;
              _this.goNextStep(params);
            }
          })
        }
      },
      //进行测试
      goNextStep: function(params){
        const { type, msg, paymentQuery } = params;
        const queryStr =  type === 'fail' ? paymentQuery : 'payResult=payResult'
        const data = { type, msg, queryStr }
        // 开启存储
        wx.setStorage({
          key: "ProductShopPayment",
          data,
          success() {
            wx.navigateBack({  
              delta: 1, //返回1个页面
            }); 
          }
        }) 
      }
    })
    
    

    3).微信小城市商城入口页面

    // shop.wxml 
     <web-view src="{{targetUrl}}"></web-view>
    // shop.js
    //获取应用实例
    const wxApp = getApp()
    Page({
      data: {
        targetUrl:''
      },
      onLoad(options){
        const urlbase = wxApp.globalData.eshopBaseUrl+'?v='+ Date.now() + '/#/productList';
        const users = {
          userId: '1',
          openId: 'o',
          userName: '张三',
          phone: '123324234534'
        }
        const userInfo = encodeURIComponent(JSON.stringify(users));
        this.setData({
          targetUrl: urlbase + '?userInfo=' +userInfo
        });
        // 首次要清空存储去掉不可预测的意外存储
        wx.removeStorage({key: 'ProductShopPayment'})
      },
      // 页面再次显示的钩子
      onShow(){
        console.log('=====onShow: ProductShopPayment用于商城微信小程序支付页面回调标识====')
        const _this = this;
        wx.getStorage({
          key: "ProductShopPayment",
          success(res) {
            // 每次取完值后进行清空处理
            wx.removeStorage({ key: 'ProductShopPayment' });
            console.log('支付后回调', res.data)
            // type:支付结果,mag: 支付结果信息提示可用于tips, queryStr:回调页面数据入参,支付成功进入落地页,支付失败跳到收银台
            const { type, msg, queryStr} = res.data
            if(res.data){
              const path = type==='success' ? "/#/result" : "/#/payment"
              const url = wxApp.globalData.eshopBaseUrl+'?v='+ Date.now() + path+ '?' + queryStr;
              _this.setData({
                targetUrl: url
              });
            }
          }
        })
      }
    
    })
    

    难点:梳理需求业务流程

    更多相关内容
  • 进入小程序,下单,请求下单支付,调用小程序登录API来获取Openid(https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject),生成商户订单,这些都是在小程序端完成的业务。   小程序端代码...
  • 微信小程序 支付功能(前端)的实现 只提供微信小程序端代码: var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 var that = this //登陆...
  • 主要介绍了详解微信小程序中的页面代码中的模板的封装的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 微信支付源码, 微信小程序源码,后台是Java解析源码。考虑到微信官方文档对小程序的微信支付的具体使用方法说的不是很清楚,经过摸索,有了这个可以跑通的前后端代码。亲测可用!
  • 最近想研究下微信小程序,拿自己网站的接口做了一个 遇到的几个小问题给大家分享下 一、异步请求的网址只支持https协议,所以调用接口用另外的一个域名做了一个跳转 二、下拉刷新 直接在js中监听这个事件就行,下拉...
  • 小程序微信支付demo

    2019-03-10 16:30:38
    微信小程序 进行微信支付调用的demo 注意: 1、utils目录下的data.js 文件配置接口对接的路径,WYY_HOST_URL为域名+端口, 2、请求要使用https协议,后端需要搭建https环境,有服务器可以使用frps 进行内网穿透,没...
  • 微信小程序支付 退款 订单查询 退款查询 整理的很全面 包括证书的使用 配置简单明了
  • 开通小程序支付功能比较简单,基本上按微信文档一步一步的申请就好,如图 以上三个步骤就申请完成 1、提交资料给微信 2、微信审核并签署协议 3、商户后台绑定同主体的APPID 商户后台绑定同一主体的APPID并授权 1、...
  • 微信小程序钱包支付页面案例

    千次阅读 2021-12-08 15:28:24
    小程序钱包页面 效果图 WXML代码 <!--index.wxml--> <viewclass="container"> <viewclass="qjt"> <viewclass="upper"wx:for="{{list}}"> <imagesrc="{{item.icon}}"></image...

    小程序钱包页面

    效果图

    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:"保险服务"
          }]
        ]
      },
    })

    展开全文
  • 微信小程序6位支付密码输入框 component为6位支付输入框组件 index为引用组件的页面 具体参数和事件设置,请参考小程序官方文档-组件 ➢ 参数设置 ➢ 代码片段地址(新增明文/暗文切换) 代码片段地址:wechatide://...
  • 微信支付-微信小程序源码,微信支付-微信小程序源码微信支付-微信小程序源码微信支付-微信小程序源码
  • 商户在小程序中先调用该接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易后调起支付。 接口链接 URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder 是否需要证书 否 请求参数 字段名 变量名 ...
  • 实现原理:点击h5网页的支付按钮——(跳转)——>嵌套改h5的小程序支付页面——(处理支付)——>跳转至支付完成后的页面 注意:(1)网页h5中,引入微信的jssdk [removed][removed] (2)小程序嵌套h5页面后,需要...
  • 上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是...1.2 wxminiwebview.js:小程序中放web-view的界面 1.3 wxminipay.js:小程序原生支付界面 1.4 web_pay.vue:内嵌网页会调起支
  • 微信小程序端,调起H5支付demo,小程序代码
  • 本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法。分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程。流程是这样的: 商品展示–>商品详情–>下单页面–>下单详情...
  • 公众号支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。应用场景有: ◆ 用户在微信公众账号内进入商家公众号,打开某个主页面,完成支付 ◆ 用户的...
  • 开通微信支付需要有 营业执照、微信商户号、微信小程序的appid(已经认证通过)、然后在接入微信支付即可。...

    先看下支付成功的页面截图:
    在这里插入图片描述

    开通微信支付需要有 营业执照、微信商户号、微信小程序的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-zc-2\pages\water\cost\payment.vue <template> <view> <cu-custom bgColor="bg-gradual-blue" :isBack="true"> ...微信支付</block> </cu

    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>

    展开全文
  • 宏观上,微信小程序是由一个个Page组成的。有时候我们会遇到一些业务存在耦合的Page,一个Page里某个状态改变后,相关Page的状态需要进行更新。而在小程序里,每个Page都是一个模块,有着独立的作用域,因此Page间...
  • 要想支付成功 首先 你们的小程序已经申通了微信支付 并且通过审核 (此图片来源于网络,如有侵权,请联系删除! )  MCH_ID 是商户ID MCH_SIGN_KEY 是签名加密用的 (此图片来源于网络,如有侵权,请联系删除! )  ...
  • 主要介绍了小程序webview组件交互,内联h5页面并网页实现微信支付实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序模拟支付界面

    千次阅读 2021-10-12 13:57:45
    有些时候 遇到一些类似于银行卡...代码 以小程序为例 html <view catchtap='showInputLayer' class="btn_pay">立即支付</view> <!-- 密码输入框 --> <view wx:if='{{showPayPwdInput}}'&g...
  • 你好,基于微信小程序平台运营规范,开发者在iOS系统上提供的虚拟物品不能展现任何购买、支付的功能、页面、按钮,即使实际上它们都不可使用;也不得引导至外部网页或APP来实现支付功能。 请尽快排查当前小程序是否...
  • 对于微信小程序,为了使开发更快,微信小程序采用的框架为 MINA 应用框架。MINA框架主要是负责数据交互的系统。它的结构主要包括用于显示页面的视图层结构和负责数据交互的逻辑层系统。其中,视图层负责发布事件...
  • HelloUniApp\pages\API\request-payment\request-payment.vue 支付金额 ¥ 微信支付 0"> {{item.name}}支付 参考文档: https://uniapp.dcloud.io/api/plugins/login 小程序可以通过微信官方提供的登录能力方便地...
  • 微信小程序点餐系统

    2021-01-26 17:07:48
    微信小程序获取分类 菜品管理 后台管理(curd) 微信小程序获取商家推荐菜品 微信小程序根据分类id获取菜品 菜品评价管理(菜品id关联) 后台管理(curd) 微信小程序添加菜品评价 微信小程序根据菜品id分页获取菜品...
  • 微信小程序支付功能       只提供微信小程序端代码   var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 var that = this //登陆获取code wx....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,286
精华内容 9,314
关键字:

微信小程序支付页面

微信小程序 订阅