1、安装jssdk

npm install jweixin-module --save

2、调用

<template><viewstyle="width: 100%;height: 100%;align-items: center; justify-content: center;display: flex;flex-direction:column"><view style="margin-top: 20upx;margin-bottom: 20upx;"><label style="font-size: 40upx;">爱心捐助</label></view><view><img style="width: 400upx;height: 350upx;" src="../../static/wwx5.png" /></view><view><label style="font-size: 50upx;color: #DC7004;">1元</label></view><view style="width: 100%;height: 500upx;"><button @click="prepay()" type="primary">支付</button></view></view>
</template><script>import config from "../../common/config.js"import wx from "jweixin-module"var jweixin = require('jweixin-module');export default {props: {},data() {return {openid: '',productInfo: {appid: '',openid: '',formcode: '',money: '',productDesc: ''},signInfo: {appid: '',prepay_id: ''},}},onShow() {},created() {this.initData();},onTabItemTap() {},methods: {Recharge() {},prepay() {uni.showLoading({title: '加载中......'});this.productInfo.appid = config.appidthis.productInfo.formcode = config.uuid2()this.productInfo.money = 1this.productInfo.productDesc = '爱心捐助'this.productInfo.openid = this.openid//获取预付款单号uni.request({url: config.baseurl + "/API/WeixinXiadan",method: 'POST',dataType: 'json',data: JSON.stringify(this.productInfo),headers: {'Content-Type': "application/json;charset=utf-8"},success: (res) => {try {// uni.showToast({//   title: res.data.prepay_id,//    duration: 1000// })if (res.data.prepay_id != '') {//获取签名this.paysign(res.data.prepay_id)} else {uni.showToast({title: "获取预处理单号失败",duration: 1000})}} catch (e) {}},fail(res) {uni.showToast({title: "请求下单预处理失败",duration: 1000})}});},paysign(preid) {var that = thisvar t_appid = config.appidvar t_openid = this.openidthis.signInfo.appid = config.appidthis.signInfo.prepay_id = preid//获取支付签名加密信息uni.request({url: config.baseurl + "/API/WeixinSign",method: 'POST',dataType: 'json',data: JSON.stringify(this.signInfo),headers: {'Content-Type': "application/json;charset=utf-8"},success: (res) => {uni.showLoading({title: '支付中......'});try {if (res.data.paySign != '') {jweixin.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: t_appid, // 必填，公众号的唯一标识timestamp: res.data.timeStamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.paySign, // 必填，签名jsApiList: [ //这里是需要用到的接口名称  'checkJsApi', //判断当前客户端版本是否支持指定JS接口  'onMenuShareAppMessage', //分享接口  'getLocation', //获取位置  'openLocation', //打开位置  'scanQRCode', //扫一扫接口  'chooseWXPay', //微信支付  'chooseImage', //拍照或从手机相册中选图接口  'previewImage', //预览图片接口  'uploadImage' //上传图片  ], // 必填，需要使用的JS接口列表openId: t_openid});//付款jweixin.chooseWXPay({appId: t_appid,timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: res.data.paySign, // 支付签名success: function(res) {console.log(res)//跳转到支付成功页面有这个页面// routes.push({//    path: 'download'// });uni.hideToast();uni.showToast({title: "付款成功！",duration: 1000})uni.switchTab({url: '/pages/member/recharge'});},cancel: function(res) {uni.showToast({title: "付款失败！",duration: 1000})uni.switchTab({url: '/pages/member/recharge'});},fail: function(res) {uni.showToast({title: "付款失败！",duration: 1000})uni.switchTab({url: '/pages/member/recharge'});}});//} else {uni.showToast({title: "获取用户签名信息失败",duration: 1000})}} catch (e) {uni.hideToast();uni.showToast({title: e.message,duration: 2000})}},fail(res) {uni.showToast({title: "请求用户签名信息失败",duration: 1000})}});},initData() {var temp_openid = uni.getStorageSync('openid');if (temp_openid != '') {this.openid = temp_openid;}},},}
</script><style></style>

uniapp公众号微信支付相关推荐

公众号微信支付ios和android,uni-app微信公众号支付和分享，特别是ios下的配置，完美解决...
一.支付由于在ios中uni-app发布的应用是单应用,不管访问哪个页面,始终记录的是首次进来的那个页面. 这样的话,在微信支付签名时会报签名不对的错误.怎么解决? 老王的解决方案是在main.js ...
weixin-java-pay实现公众号微信支付与退款
内容来自:https://www.jianshu.com/p/0a0ccc15cb80 pom.xml 文件需要在 pom.xml 加入以下依赖! <dependency><gro ...
Vue公众号微信支付
需要获取的支付信息: openid.attach(备注).body(支付标题).out_trade_no(订单号).total_fee(订单价格,单位分,100是一元).goods_tag(订单类型) ...
公众号微信支付开发手记
作者:wallimn 时间:2017-02-27 本人原创,欢迎转载,转载请保留本文链接.本文地址:http://wallimn.iteye.com/blog/2359379 花了两天时间,琢磨了一下 ...
微信sdk 公众号微信支付 NFC 坑笔记
微信sdk--微信支付--NFC项目坑&笔记微信公众号开发的环境配置准备工作 & 微信公众平台配置 & 环境配置微信的登录流程(即授权机制)遵循OAuth2.0标准,实 ...
php 公众号微信支付流程,微信公众号支付完整流程案例
简介微信公众号支付,顾名思义就是必须在微信中实现支付,并且需要公众号配合. 教程由于我们使用的是第三方封装好的接口,这里省去了我们自己配置公众号.为什么用第三方?因为个人没有申请权限. 交互细节: ...
公众号微信支付ios和android,【微信支付】
跳转到还款小程序 var extraData = { appid:wxcbda96de0b165486, sub_appid:wxcbda96de0b165482, mch_id:1900009231 ...
大商创微信公众号微信支付失败报错
支付失败链接支付失败 https://XXX/mobile/onlinepay/index/index/order_sn/2018042715565982911.html 支付成功 https:// ...
微信公众号H5支付遇到的那些坑
简史官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...

uniapp公众号微信支付

1、安装jssdk

2、调用

uniapp公众号微信支付相关推荐

最新文章

热门文章