2017-05-01 16:41:08 y_f_raquelle 阅读数 3540
  • 10分钟实现微信小程序支付功能

    老规矩,先看本节效果图 我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。 核心代码就下面这些 一,创建一个云开发小程序 关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频: https://edu.csdn.net/course/play/9604/204528 创建云开发小程序有几点注意的 1,一定不要忘记在app.js里初始化云开发环境。 2,创建完云函数后,一定要记得上传 二, 创建支付的云函数 1,创建云函数pay 三,引入三方依赖tenpay 我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。 1,首先右键pay,然后选择在终端中打开 2,我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay 安装完成后,我们的pay云函数会多出一个package.json 文件 到这里我们的tenpay依赖就安装好了。 四,编写云函数pay 完整代码如下 //云开发实现支付 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; } 一定要注意把appid,mchid,partnerKey换成你自己的。 到这里我们获取小程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 出现下图就代表上传成功 五,写一个简单的页面,用来提交订单,调用pay云函数。 这个页面很简单, 1,自己随便编写一个订单号(这个订单号要大于6位) 2,自己随便填写一个订单价(单位是分) 3,点击按钮,调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。 六,调用wx.requestPayment实现支付 下图是官方的示例代码 这里不在做具体讲解了,完整的可以看视频。 实现效果 1,调起支付键盘 2,支付完成 3,log日志,可以看出不同支付状态的回调 上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。 下图是支付失败的回调, 下图是支付完成的状态。 到这里我们就轻松的实现了微信小程序的支付功能了。是不是很简单啊,完整的讲解可以看视频。

    491 人正在学习 去看看 邱石

微信公众平台开发者文档:http://mp.weixin.qq.com/wiki/home/index.html


首先申请一个微信公众开发测试账号:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login


申请后会提供appID和appsecret,你需要在自己的代码中添加接口配置的处理。

但此处URL必须为一个公网地址,且使用80端口,这就涉及到之前讲到的公网映射的方式。通常使用ngrok,注册后获得authtoken并配置,使用ngrok http <port>即可将指定端口映射到公网80端口。

接口配置的java示例:(参考Journey的博客

@WebServlet(urlPatterns = "/wx", name = "wxHouseKeeperServlet")  
public class HouseKeeper extends HttpServlet {  
    public static final String TOKEN = "mzmzo";  
  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        try {  
            // 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数  
            String signature = request.getParameter("signature");// 微信加密签名(token、timestamp、nonce。)  
            String timestamp = request.getParameter("timestamp");// 时间戳  
            String nonce = request.getParameter("nonce");// 随机数  
            String echostr = request.getParameter("echostr");// 随机字符串  
            PrintWriter out = response.getWriter();  
            // 将token、timestamp、nonce三个参数进行字典序排序  
            String[] params = new String[] { TOKEN, timestamp, nonce };  
            Arrays.sort(params);  
            // 将三个参数字符串拼接成一个字符串进行sha1加密  
            String clearText = params[0] + params[1] + params[2];  
            String algorithm = "SHA-1";  
            String sign = new String(  
                    Hex.encodeHex(MessageDigest.getInstance(algorithm).digest((clearText).getBytes()), true));  
            // 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信  
            if (signature.equals(sign)) {  
                response.getWriter().print(echostr);  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }     
}  

此处TOKEN与网页中填写的Token一致即可

接下来配置“网页授权获取用户基本信息


注意填写时不用加http://,只填写域名即可。

完成后扫描下方二维码即可关注自己的公众测试号,网页中会显示关注用户的Openid。

下载微信Web开发工具,即可模拟手机调试


完成登录和绑定后,开发者就可以开始调试微信网页授权,在地址栏直接输入URL

示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

这里appid填写之前注册后得到的,redirect_uri指向自己的公网域名下的url,response_type为code,scope为snsapi_base表示静默授权,state填写uri后的mapping。注意这里的redirect_uri和state可能需要urlencode。








2018-07-05 08:41:41 qq_29058883 阅读数 6542
  • 10分钟实现微信小程序支付功能

    老规矩,先看本节效果图 我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。 核心代码就下面这些 一,创建一个云开发小程序 关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频: https://edu.csdn.net/course/play/9604/204528 创建云开发小程序有几点注意的 1,一定不要忘记在app.js里初始化云开发环境。 2,创建完云函数后,一定要记得上传 二, 创建支付的云函数 1,创建云函数pay 三,引入三方依赖tenpay 我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。 1,首先右键pay,然后选择在终端中打开 2,我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay 安装完成后,我们的pay云函数会多出一个package.json 文件 到这里我们的tenpay依赖就安装好了。 四,编写云函数pay 完整代码如下 //云开发实现支付 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; } 一定要注意把appid,mchid,partnerKey换成你自己的。 到这里我们获取小程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 出现下图就代表上传成功 五,写一个简单的页面,用来提交订单,调用pay云函数。 这个页面很简单, 1,自己随便编写一个订单号(这个订单号要大于6位) 2,自己随便填写一个订单价(单位是分) 3,点击按钮,调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。 六,调用wx.requestPayment实现支付 下图是官方的示例代码 这里不在做具体讲解了,完整的可以看视频。 实现效果 1,调起支付键盘 2,支付完成 3,log日志,可以看出不同支付状态的回调 上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。 下图是支付失败的回调, 下图是支付完成的状态。 到这里我们就轻松的实现了微信小程序的支付功能了。是不是很简单啊,完整的讲解可以看视频。

    491 人正在学习 去看看 邱石

微擎,微信公众平台,微信开发工具软件

从微信公众平台(另外一个账号密码)进小程序,自动跳转小程序页面,成为小程序开发者才可以测试小程序,

微擎可以配置小程序appid等,

微信公众平台关联小程序,

微信开发工具配置appid,接口等,上传

2019-06-28 16:12:38 qcg14774125 阅读数 2705
  • 10分钟实现微信小程序支付功能

    老规矩,先看本节效果图 我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。 核心代码就下面这些 一,创建一个云开发小程序 关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频: https://edu.csdn.net/course/play/9604/204528 创建云开发小程序有几点注意的 1,一定不要忘记在app.js里初始化云开发环境。 2,创建完云函数后,一定要记得上传 二, 创建支付的云函数 1,创建云函数pay 三,引入三方依赖tenpay 我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。 1,首先右键pay,然后选择在终端中打开 2,我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay 安装完成后,我们的pay云函数会多出一个package.json 文件 到这里我们的tenpay依赖就安装好了。 四,编写云函数pay 完整代码如下 //云开发实现支付 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; } 一定要注意把appid,mchid,partnerKey换成你自己的。 到这里我们获取小程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 出现下图就代表上传成功 五,写一个简单的页面,用来提交订单,调用pay云函数。 这个页面很简单, 1,自己随便编写一个订单号(这个订单号要大于6位) 2,自己随便填写一个订单价(单位是分) 3,点击按钮,调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。 六,调用wx.requestPayment实现支付 下图是官方的示例代码 这里不在做具体讲解了,完整的可以看视频。 实现效果 1,调起支付键盘 2,支付完成 3,log日志,可以看出不同支付状态的回调 上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。 下图是支付失败的回调, 下图是支付完成的状态。 到这里我们就轻松的实现了微信小程序的支付功能了。是不是很简单啊,完整的讲解可以看视频。

    491 人正在学习 去看看 邱石

第一步:你要有一个微信小程序,在微信开发者平台上

至于怎样申请微信开发者appid和微信开发者平台上面的东西可以自己去百度下,重点讲的是在HBuilderX开发小程序

第二步:在你的微信开发者工具里面新建一个小程序

第三步:把你新建好的项目导入到HBuilderX里面去

然后点击运行--运行到小程序模拟器,就可以自动打开微信开发者工具,就可以实现在Hbuilder开发,微信开发者工具预览。但是!!!如果一切正常的情况下是这样的,如果不正常的话,那你将很难受,好在我已经填了许多坑,我就把不正常的情况给大家说下。

首先,如果你已经导入了项目到hbuilderx里面,但是点击运行时,运行到小程序那一行是不可点或者点了之后控制台报不能连接到微信开发者工具,这时候你就要打开自己的微信开发者工具了,如图下操作

在微信开发者工具的上方 点击设置--安全设置

 

ok,这时候你就可以在hbuilderx开发,微信开发者工具里预览了。但是如果你没有申请到appid的话在微信开发者里面只能pc端预览,而不能手机扫码预览,因为它会提示你本项目不是开发者开发。

还有一个问题是引用vant库时的报错

当我按照所有流程来时

第一步:npm i vant-weapp -S --production

第二步:

第三步:就是在你的代码里写下

<van-button type="primary">按钮</van-button>

这时候你运行的时候他就开始调皮了

这个问题我在度娘还愣是没找到完全的解决方案

这时候就又要回到微信开发者工具了 点击设施--项目设置

然后再hbuilderx里面打开该项目的命令行工具输入以下命令

npm init
npm install --production vant-weapp

这时候你再回到hbuilderX里面你会发现多了一个文件

然后再在你要用到的文件json里面写下路径

{
  "usingComponents": {
		 "van-button": "vant-weapp/button/index"
	}
}

over~~~~~~~~~

2019-04-22 11:51:58 weixin_42028778 阅读数 985
  • 10分钟实现微信小程序支付功能

    老规矩,先看本节效果图 我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。 核心代码就下面这些 一,创建一个云开发小程序 关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频: https://edu.csdn.net/course/play/9604/204528 创建云开发小程序有几点注意的 1,一定不要忘记在app.js里初始化云开发环境。 2,创建完云函数后,一定要记得上传 二, 创建支付的云函数 1,创建云函数pay 三,引入三方依赖tenpay 我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。 1,首先右键pay,然后选择在终端中打开 2,我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay 安装完成后,我们的pay云函数会多出一个package.json 文件 到这里我们的tenpay依赖就安装好了。 四,编写云函数pay 完整代码如下 //云开发实现支付 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; } 一定要注意把appid,mchid,partnerKey换成你自己的。 到这里我们获取小程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 出现下图就代表上传成功 五,写一个简单的页面,用来提交订单,调用pay云函数。 这个页面很简单, 1,自己随便编写一个订单号(这个订单号要大于6位) 2,自己随便填写一个订单价(单位是分) 3,点击按钮,调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。 六,调用wx.requestPayment实现支付 下图是官方的示例代码 这里不在做具体讲解了,完整的可以看视频。 实现效果 1,调起支付键盘 2,支付完成 3,log日志,可以看出不同支付状态的回调 上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。 下图是支付失败的回调, 下图是支付完成的状态。 到这里我们就轻松的实现了微信小程序的支付功能了。是不是很简单啊,完整的讲解可以看视频。

    491 人正在学习 去看看 邱石

调试

利用微信开发工具调试:
在HBuilderX中修改文件并保存,会自动刷新微信模拟器(在HBuilder中修改代码,要执行保存操作才能,刷新微信模拟器)

运行到微信开发工具警告:
请注意无 AppID 关联下,调用 wx.operateWXData 是受限的, API 的返回是工具的模拟返回
解决方法:
微信开发者工具中project.config.json文件里的appid改为自己的appid

2019-05-17 21:14:38 zhangdaren 阅读数 1697
  • 10分钟实现微信小程序支付功能

    老规矩,先看本节效果图 我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。 核心代码就下面这些 一,创建一个云开发小程序 关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频: https://edu.csdn.net/course/play/9604/204528 创建云开发小程序有几点注意的 1,一定不要忘记在app.js里初始化云开发环境。 2,创建完云函数后,一定要记得上传 二, 创建支付的云函数 1,创建云函数pay 三,引入三方依赖tenpay 我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。 1,首先右键pay,然后选择在终端中打开 2,我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay 安装完成后,我们的pay云函数会多出一个package.json 文件 到这里我们的tenpay依赖就安装好了。 四,编写云函数pay 完整代码如下 //云开发实现支付 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; } 一定要注意把appid,mchid,partnerKey换成你自己的。 到这里我们获取小程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 出现下图就代表上传成功 五,写一个简单的页面,用来提交订单,调用pay云函数。 这个页面很简单, 1,自己随便编写一个订单号(这个订单号要大于6位) 2,自己随便填写一个订单价(单位是分) 3,点击按钮,调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。 六,调用wx.requestPayment实现支付 下图是官方的示例代码 这里不在做具体讲解了,完整的可以看视频。 实现效果 1,调起支付键盘 2,支付完成 3,log日志,可以看出不同支付状态的回调 上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。 下图是支付失败的回调, 下图是支付完成的状态。 到这里我们就轻松的实现了微信小程序的支付功能了。是不是很简单啊,完整的讲解可以看视频。

    491 人正在学习 去看看 邱石

因近期在开发一个微信小程序,涉及到微信小程序云开发,搜索DCloud社区,并无相关案例。

经过一番折腾,解决方案如下:
第一步:使用微信开发者工具,创建一个云开发的项目,创建云函数并上传(此项目作为开发云函数专用);

第二步:创建uni-app项目,并将上面云函数项目的appid,填入到此项目里,即可关联并直接使用wx云函数。

至此,就可以正常使用HbuilderX愉快的开发啦~

为了方便理解,我将微信小程序云开发DMEO,转换成uni-app版本,大家可以参考一下。

代码地址:https://github.com/zhangdaren/miniprogram-cloud

下载后,填入微信小程序appid即可(运行前,需新建或使用原小程序项目,配置云开发环境,不然无法使用云函数,切记~

与小程序开发异同:
相同之处:云函数的使用,与小程序里面完全一致。
不同之处:uni-app里没有const app = getApp(),因此我修改为vuex来存储opendid及其他信息

最后,如果有问题,欢迎指正或回帖~~~

 

如果有小程序转uni-app需求,可以试试这个转换器:https://blog.csdn.net/zhangdaren/article/details/93229923

 


  
 

微信支付java开发

阅读数 18

没有更多推荐了,返回首页