微信小程序还玩不明白 支付宝小程序又来了_凤凰科技
微信小程序还玩不明白 支付宝小程序又来了
用微信扫描二维码分享至好友和朋友圈
原标题：微信小程序还玩不明白 支付宝小程序又来了 　　到底有多少人会用小程序？你平时用吗？ 　　已经
原标题：微信小程序还玩不明白 支付宝小程序又来了
　　到底有多少人会用小程序？你平时用吗？　　已经快要将张小龙的微信小程序忘却时，传说中的支付宝小程序终于登场。经过一个月的开发者公测后，支付宝小程序在前几日正式向用户公测了。　　用户打开支付宝的小程序有三种方式：线下扫码、在支付宝应用内搜索以及通过他人分享。在支付宝的首页，搜索“小程序”，你可以进入一个小程序的聚合页面，其实就是小程序商店，搜索小程序的名字，也能找到对应的小程序。使用过任何一个小程序之后，进入支付宝首页的“朋友”一栏，就能找到小程序的聚合页面入口。
　　支付宝小程序从产品体验到主体信息查询，都和微信小程序的布局界面类似。
　　如果你用过微信小程序那么使用支付宝小程序也会很顺手，小程序相当于一个轻量级的 App，拥有原 App 最基本的功能。两边的小程序没什么差别，甚至还有不少重合。与微信不同的是，支付宝小程序背后接入了支付宝实名认证、信用授权、金融等能力。
　　现在上线的小程序中，有一些是支付宝独有的，比如 ofo 小黄车、优客工场等与蚂蚁金服有战略合作关系的开发者，在微信端都没有上线小程序。
　　但是像形色识花、马上修等服务，在微信和支付宝的小程序，从使用上来说都没有太大区别：进入小程序之后，就像平时下载的应用一样，每个小程序初次使用之前需要通过用户授权协议，之后就可以从小程序聚合页面顶部“最近使用”的入口打开来用了。
　　现在已经上线的支付宝小程序大多与支付宝本身的能力相关，比如医疗器械租赁、门店扫码买药、会员绑定支付宝的优客工场等等，哈罗单车、ofo 小黄车、永安行、街电、来电等用芝麻信用免押金的租赁服务，也有小程序上线。
　　腾讯的微信和阿里巴巴旗下的支付宝毫无疑问是日常最高频的应用。微信和支付宝的起点分别在通讯和支付两个不同领域，但是它们的方向越来越相同：成为一个无所不包的全能应用，甚至承担 App Store 的角色，发布小程序。小程序的本质是轻应用，轻应用并不是微信的专利，所以支付宝来做并不奇怪。
　　只是相比今年年初微信小程序推出之后的热情，大家对于支付宝小程序的态度更为冷淡一些。
　　微信小程序发布后开发者圈可以用一片沸腾来形容，大量生活服务类、新闻类 App 都在非常短的时间内推出了他们的小程序。有句话称“App 们不是在推出小程序就是在推出小程序的路上”。
　　然而好景不长，蜂拥而上的 App 们逐渐发现，想象中的“小程序红利”没有降临，反倒遇到了各种各样的问题。哪怕腾讯为小程序创造了许多在微信应用内的使用场景，人们打开小程序的动力也不太足够，大家还是更愿意打开 App。
　　毕竟前面有微信淌过的水，支付宝倒也算机智，没有照着现有的模式再发展一个微信小程序，目前支付宝的导向还是相对明确的，把更多用户能用得着的东西整合到支付宝里面来，让用户自己选择去使用，就不再需要单独下载应用了。
　　支付宝大部分社交尝试以失败收尾，其中“生活圈”更是遭到大众的激烈批评，放弃做社交之后，支付宝将关注更多地放在了服务上。
　　让人没想明白的是，连微信都没办法让更多人去打开小程序，支付宝要怎么做活小程序呢？如果真的有一天小程序成了大部分用户的日常，那支付宝要拿什么跟使用率更高的微信竞争呢？
　　支付宝说：总之我先跟进吧，不进，这个市场我就丢了。进来了，没准还有机会。反正也不亏。
用微信扫描二维码分享至好友和朋友圈
凤凰科技官方微信
播放数：1867832
播放数：1443950
播放数：497040
播放数：5808920在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
本文阐述如何从零开始接入小程序支付，尤其适合没有微信支付接入经验的开发者。
1. 申请微信支付
小程序认证以后，可以在小程序后台，微信支付菜单栏，申请微信支付。
填写企业信息和对公账户，微信支付会打一笔随机金额到对公账户，输入金额完成验证后，在线签署协议，这样整个微信支付的申请流程完成了。
微信支付申请完，会发送微信支付商户号，商户平台用户名密码等信息到注册者邮箱。
2. 准备工作
配置小程序密钥
在小程序后台设置页，点击生成，管理员验证二维码后，会随机生成 AppSecret。请妥善保管好 Appsecret，不要明文存储于服务器，AppSecret 用于和微信服务器交互。比如获取用户的 openid 接口就需要用到。
设置密钥和下载证书
用申请微信支付获得的用户名和密码，登录商户平台 (pay.)，在账户中心，API 安全中下载证书和设置密钥。
密钥是 32 位，设置以后需要妥善保管，因为无法查看密钥，所有微信支付相关的接口都会使用这个密钥加密。
2.3 配置 Https 服务器
小程序的前端是使用微信提供的框架开发，但是后台依然是开发者自己的服务器。小程序发起的是 https 请求，意味着小程序开发者必须配置 https 服务器。
配置 https 服务器之前，先要获取证书，证书可以向相关机构购买，腾讯云目前可以向用户提供免费的证书。
证书安装指引在这里查看：
3. 微信支付流程
微信支付有多种支付方式，包括刷卡支付，公众号支付，扫码支付，APP 支付，在这里微信支付的所有接口：
小程序是在微信里调起支付的，其实是公众号支付。关于公众号支付的详细文档可在这里查看：
所有公众号支付相关的链接都可以在此链接找到，开发者首先需要大概了解这些接口。
小程序公众号支付的主要流程如下（本图只考虑了正常流程，异常流程参考公众号支付文档）：
3.1 关于 openid
上述流程中请求 openid，用的是小程序最新 api 中的接口，开发者可以查看小程序的登录接口。
开发者从第三方服务器获得的 openid，在统一下单的接口里面需要使用到。
3.2 关于小程序调起微信支付
上述流程中的小程序调起微信支付，用的是小程序微信支付接口 wx.requestPayment，该接口的详细描述可以查看小程序的微信支付 API。
这个接口中的 package 和 timeStamp 参数是从开发者的第三方服务器返回的，package 是第三方服务器从统一下单接口回复中获得。
接口中其他的参数，appId，noceStr，signType 以及 paySign 则由小程序这边存储或者计算而得。
其中 paySign 是签名，签名算法文档在这里：
整个公众号支付的主要流程基本都是在第三方服务器上实现，开发者需要熟读公众号支付文档，了解消息交互流程以及每个接口。
这里并没有描述正常微信支付必不可少的一些功能：异常处理，查询订单，发起退款，下载对账单等等。
「H5程序俱乐部」是一个专注微信小程序学习交流，相关外包/招聘需求信息发布的微信公众号。
「H5程序俱乐部」微信号：wxappclub 或者 微信扫一扫关注
0 收藏&&|&&15
你可能感兴趣的文章
8 收藏，21.7k
50 收藏，4.9k
3 收藏，1.6k
分享到微博？
我要该，理由是：微信小程序 支付功能实现PHP实例详解
作者：超哥
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信小程序 支付功能实现PHP实例详解的相关资料,需要的朋友可以参考下
微信小程序 支付功能实现PHP实例详解
前端代码：
wx.request({
url: '/weixin/WeiActivity/payJoinfee',//改成你自己的链接
'Content-Type': 'application/x-www-form-urlencoded'
method:'POST',
success: function(res) {
console.log(res.data);
console.log('调起支付');
wx.requestPayment({
'timeStamp': res.data.timeStamp,
'nonceStr': res.data.nonceStr,
'package': res.data.package,
'signType': 'MD5',
'paySign': res.data.paySign,
'success':function(res){
console.log('success');
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 3000
'fail':function(res){
console.log('fail');
'complete':function(res){
console.log('complete');
fail:function(res){
console.log(res.data)
后端代码：
//支付费用
public function payJoinfee(){
$appid='wx';
$openid='oCQwY0Q_pzrQpu8888888';
$mch_id='';
$key='9A0A';
import('Weixin.Lib.WeixinPay');
$weixinpay = new \WeixinPay($appid,$openid,$mch_id,$key);
$return=$weixinpay-&pay();
$this-&response($return,'json');
微信支付类
* 小程序微信支付
class WeixinPay{
protected $
protected $mch_
protected $
protected $
function __construct($appid,$openid,$mch_id,$key){
$this-&appid=$
$this-&openid=$
$this-&mch_id=$mch_
$this-&key=$
public function pay(){
//统一下单接口
$return=$this-&weixinapp();
//统一下单接口
private function unifiedorder(){
$url='https://api.mch./pay/unifiedorder';
$parameters=array(
'appid'=&$this-&appid,//小程序ID
'mch_id'=&$this-&mch_id,//商户号
'nonce_str'=&$this-&createNoncestr(),//随机字符串
'body'=&'测试',//商品描述
'out_trade_no'=&'5346',//商户订单号
'total_fee'=&floatval(0.01*100),//总金额 单位 分
'spbill_create_ip'=&$_SERVER['REMOTE_ADDR'],//终端IP
'notify_url'=&'http://www./wxpay/pay.php',//通知地址
'openid'=&$this-&openid,//用户id
'trade_type'=&'JSAPI'//交易类型
//统一下单签名
$parameters['sign']=$this-&getSign($parameters);
$xmlData=arrayToXml($parameters);
$return=xmlToArray(postXmlSSLCurl($xmlData,$url,60));
//微信小程序接口
private function weixinapp(){
//统一下单接口
$unifiedorder=$this-&unifiedorder();
$parameters=array(
'appId'=&$this-&appid,//小程序ID
'timeStamp'=&''.time().'',//时间戳
'nonceStr'=&$this-&createNoncestr(),//随机串
'package'=&'prepay_id='.$unifiedorder['prepay_id'],//数据包
'signType'=&'MD5'//签名方式
$parameters['paySign']=$this-&getSign($parameters);
//作用：产生随机字符串，不长于32位
private function createNoncestr($length = 32 ){
$chars = "abcdefghijklmnopqrstuvwxyz";
for ( $i = 0; $i & $ $i++ ) {
$str.= substr($chars, mt_rand(0, strlen($chars)-1), 1);
//作用：生成签名
private function getSign($Obj){
foreach ($Obj as $k =& $v){
$Parameters[$k] = $v;
//签名步骤一：按字典序排序参数
ksort($Parameters);
$String = $this-&formatBizQueryParaMap($Parameters, false);
//签名步骤二：在string后加入KEY
$String = $String."&key=".$this-&
//签名步骤三：MD5加密
$String = md5($String);
//签名步骤四：所有字符转为大写
$result_ = strtoupper($String);
return $result_;
///作用：格式化参数，签名过程需要使用
private function formatBizQueryParaMap($paraMap, $urlencode){
$buff = "";
ksort($paraMap);
foreach ($paraMap as $k =& $v){
if($urlencode)
$v = urlencode($v);
$buff .= $k . "=" . $v . "&";
if (strlen($buff) & 0){
$reqPar = substr($buff, 0, strlen($buff)-1);
return $reqP
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持!
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具扫码下载APP
关注微信公众号
您是个人用户，您可以认领企业号
账号密码登录
一周内自动登录
免密码登录
获取验证码
第三方账号登录
Hello,新朋友
在发表评论的时候你至少需要一个响亮的昵称
标题诱导点击
标题和内容无关
排版不合理
部分语句不通
语句前后矛盾
无专业名词
用词不准确
用词混乱错误
部分数据不准
数据混乱错误
观点不合理
分析论证精彩
中心基本明确
中心不明显
少量分析有可读性
罗列事件无分析
肤浅无意义
少量广告内容且轻微诱导
大量广告且强烈诱导
少量超链接
大量超链接
通篇超链接
有且与内容或文章源相关
有且不相关
二维码插入混乱
微信小程序接入微信支付，只需3步
首发且原创
时间：05-17 10:12
阅读：1247次
来源：三尺信息科技
摘要：微信小程序开发出来后，想要用在线支付功能怎么办？毕竟在小程序里面实现微信支付的话还是会带来很大的便捷的。有过开发服务号下微信支付经验的亲会发现，其实小程序里的微信支付和服务号里面的开发过程很像。
移步到微官网原文链接:开发出来后，想要用在线支付功能怎么办？毕竟在小程序里面实现微信支付的话还是会带来很大的便捷的。有过开发服务号下微信支付经验的亲会发现，其实小程序里的微信支付和服务号里面的开发过程很像。那么具体过程是怎样的呢？移步到微种草君七嬷嬷带你瞧瞧：Step1：开通微信支付和微信商户号这个过程几乎就和开通服务号的微信支付一样。Step2：获得用户的 OpenID首先，我们需要在小程序的客户端的逻辑层中，获取当前用户的 OpenID。通过调用 wx.login方法，可以得到用户的code，然后开发者服务器使用登录凭证code 获取 openid。　　wx.login({　　success:
function (res) {　　if
(res.code) {　　//发起网络请求　　wx.request({　　url:
'https://yourwebsit/onLogin',　　method:
'POST',　　data:
{　　code:
res.code　　},　　success:
function (res) {　　var
openid = res.data.　　},　　fail:
function (err) {　　console.log(err)　　}　　})　　}　　else
{　　console.log('获取用户登录态失败!'
+ res.errMsg)　　}　　}　　});　　var
code = req.param("code");　　request({　　url:
"https://api./sns/jscode2session?appid=" + appid + "&secret=" +
secret + "&js_code=" + code +
"&grant_type=authorization_code",　　method:
'GET'　　},
function (err, response, body) {　　if
(!err && response.statusCode == 200) {　　res.json(JSON.parse(body));　　}　　});Step3：获取
prepay_id和支付签名验证paySign这一步的过程，和服务号里的微信支付过程一样。这个过程区分为客户端操作，以及服务器端的操作。首先来看一下客户端逻辑层实现。在服务号里，我们是通过如下的代码来调起支付功能：　　function
jsApiCall() {　　WeixinJSBridge.invoke('getBrandWCPayRequest',
{　　"appId":
"", //公众号名称，由商户传入　　"timeStamp":
"", //时间戳，自1970年以来的秒数　　"nonceStr":
"", //随机串　　"package":
"prepay_id=",　　"signType":
"MD5", //微信签名方式：　　"paySign":
"" //微信签名　　},
function (res) {　　WeixinJSBridge.log(res.err_msg);　　if
(res.err_msg == "get_brand_wcpay_request:ok") {　　;　　}　　else
{　　;　　}　　});　　}在小程序里，我们是通过 wx.requestPayment 方法调起支付功能。当然，在这之前，我们先要获取 prepay_id。　　wx.request({　　url:
'https://yourwebsit/service/getPay',　　method:
'POST',　　data:
{　　bookingNo:
bookingNo,　　total_fee:
total_fee,　　openid:
openid　　},　　header:
{　　'content-type':
'application/json'　　},
success: function (res) {　　wx.requestPayment({　　'timeStamp':
timeStamp　　,
'nonceStr': nonceStr　　,
'package': 'prepay_id=' + res.data.prepay_id　　,
'signType': 'MD5'　　,
'paySign': res.data._paySignjs　　,
'success': function (res) {　　console.log(res);　　}　　,
'fail': function (res) {　　console.log('fail:'
+ JSON.stringify(res));　　}　　})　　},　　fail:
function (err) {　　console.log(err)　　}　　})在服务器端，我们需要实现的是 prepay_id
的获取，以及签名 paySign 的获取。　　var
bookingNo = req.param("bookingNo");　　var
total_fee = req.param("total_fee");　　var
openid = req.param("openid");　　var
body = "费用说明";　　var
url = "https://api.mch./pay/unifiedorder";　　var
formData = "";　　formData
+= "appid"; //appid　　formData
+= "test";　　formData
+= "" + body + "";　　formData
+= "mch_id"; //商户号　　formData
+= "nonce_str";　　formData
+= "notify_url";　　formData
+= "" + openid + "";　　formData
+= "" + bookingNo + "";　　formData
+= "spbill_create_ip";　　formData
+= "" + total_fee + "";　　formData
+= "JSAPI";　　formData
+= "" + paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid,
bookingNo, spbill_create_ip, total_fee, 'JSAPI') + "";　　formData
+= "";　　request({　　url:
url,　　method:
'POST',　　body:
formData　　},
function (err, response, body) {　　if
(!err && response.statusCode == 200) {　　var
prepay_id = getXMLNodeValue('prepay_id', body.toString("utf-8"));　　var
tmp = prepay_id.split('[');　　var
tmp1 = tmp[2].split(']');　　//签名　　var
_paySignjs = paysignjs(appid, mch_id, 'prepay_id=' + tmp1[0], 'MD5',
timeStamp);　　var
o = {　　prepay_id:
tmp1[0]　　,
_paySignjs: _paySignjs　　}　　res.send(o);　　}　　});下面是用到的函数：　　function
paysignjs(appid, nonceStr, package, signType, timeStamp) {　　var
ret = {　　appId:
appid,　　nonceStr:
nonceStr,　　package:
package,　　signType:
signType,　　timeStamp:
timeStamp　　};　　var
string = raw1(ret);　　string
= string + '&key=' +　　console.log(string);　　var
crypto = require('crypto');　　return
crypto.createHash('md5').update(string, 'utf8').digest('hex');　　};　　function
raw1(args) {　　var
keys = Object.keys(args);　　keys
= keys.sort()　　var
newArgs = {};　　keys.forEach(function
(key) {　　newArgs[key]
= args[key];　　});　　var
string = '';　　for
(var k in newArgs) {　　string
+= '&' + k + '=' + newArgs[k];　　}　　string
= string.substr(1);　　return
　　};　　function
paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid,
out_trade_no, spbill_create_ip, total_fee, trade_type) {　　var
ret = {　　appid:
appid,　　attach:
attach,　　body:
body,　　mch_id:
mch_id,　　nonce_str:
nonce_str,　　notify_url:
notify_url,　　openid:
openid,　　out_trade_no:
out_trade_no,　　spbill_create_ip:
spbill_create_ip,　　total_fee:
total_fee,　　trade_type:
trade_type　　};　　var
string = raw(ret);　　string
= string + '&key=' +　　var
crypto = require('crypto');　　return
crypto.createHash('md5').update(string, 'utf8').digest('hex');　　};　　function
raw(args) {　　var
keys = Object.keys(args);　　keys
= keys.sort()　　var
newArgs = {};　　keys.forEach(function
(key) {　　newArgs[key.toLowerCase()]
= args[key];　　});　　var
string = '';　　for
(var k in newArgs) {　　string
+= '&' + k + '=' + newArgs[k];　　}　　string
= string.substr(1);　　return
　　};　　function
getXMLNodeValue(node_name, xml) {　　var
tmp = xml.split("");　　var
_tmp = tmp[1].split("");　　return
_tmp[0];}好啦，简简单单三步，so
easy是不是？就可以实现对接微信支付功能了。上一个效果图：
声明：本文由三尺信息科技企业号发布，依据企业号用户协议，该企业号为文章的真实性和准确性负责。创头条作为品牌传播平台，只为传播效果负责，在文章不存在违反法律规定的情况下，不继续承担甄别文章内容和观点的义务。
关注企业号
移步到微是基于微信企业号平台而开发的以流程审批与万能表单为核心的新一代移动办公系统。通过移步到微平台，企业可以让员工更好地使用微信进行移动化办公。
TA的其他文章
14458次阅读
14539次阅读
14368次阅读
14639次阅读
19418次阅读
24小时热文
1.2万次阅读
1.1万次阅读
1.1万次阅读
1.0万次阅读
9872次阅读
8867次阅读
8135次阅读
7975次阅读
阅读下一篇
南京交警与共享单车企业联手整治“弃车拒罚”者
创头条精选
扫描二维码关注
微信扫码咨询只提供微信小程序端代码：
1 var app = getApp();
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
//登陆获取code
wx.login({
success: function (res) {
<span style="color: #
console.log(res.code)
<span style="color: #
//获取openid
<span style="color: #
that.getOpenId(res.code)
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
getOpenId: function (code) {
<span style="color: #
var that = this;
<span style="color: #
wx.request({
<span style="color: #
url: "https://api./sns/jscode2session?appid=小程序appid&secret=小程序应用密钥&js_code=" + code + "&grant_type=authorization_code",
<span style="color: #
<span style="color: #
method: 'GET',
<span style="color: #
success: function (res) {
<span style="color: #
that.generateOrder(res.data.openid)
<span style="color: #
<span style="color: #
fail: function () {
<span style="color: #
<span style="color: #
<span style="color: #
complete: function () {
<span style="color: #
// complete
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
/**生成商户订单 */
<span style="color: #
generateOrder: function (openid) {
<span style="color: #
var that = this
<span style="color: #
//统一支付
<span style="color: #
wx.request({
<span style="color: #
url: '后台路径',
<span style="color: #
method: 'GET',
<span style="color: #
<span style="color: #
gfee: '商品价钱',
<span style="color: #
gname: '商品名称',
<span style="color: #
openId:openid
<span style="color: #
（商品价钱和商品名称根据自身需要是否传值,openid为必传）
<span style="color: #
<span style="color: #
success: function (res) {
<span style="color: #
var pay = res.data
<span style="color: #
//发起支付
<span style="color: #
var timeStamp = pay[0].timeS
<span style="color: #
var packages = pay[0].
<span style="color: #
var paySign = pay[0].payS
<span style="color: #
var nonceStr = pay[0].nonceS
<span style="color: #
var param = { "timeStamp": timeStamp, "package": packages, "paySign": paySign, "signType": "MD5", "nonceStr": nonceStr };
<span style="color: #
that.pay(param)
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
pay: function (param) {
<span style="color: #
console.log("支付")
<span style="color: #
console.log(param)
<span style="color: #
wx.requestPayment({
<span style="color: #
timeStamp: param.timeStamp,
<span style="color: #
nonceStr: param.nonceStr,
<span style="color: #
package: param.package,
<span style="color: #
signType: param.signType,
<span style="color: #
paySign: param.paySign,
<span style="color: #
success: function (res) {
<span style="color: #
// success
<span style="color: #
wx.navigateBack({
<span style="color: #
delta: 1, // 回退前 delta(默认为1) 页面
<span style="color: #
success: function (res) {
<span style="color: #
wx.showToast({
<span style="color: #
title: '支付成功',
<span style="color: #
icon: 'success',
<span style="color: #
duration: 2000
<span style="color: #
<span style="color: #
<span style="color: #
fail: function () {
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
complete: function () {
<span style="color: #
// complete
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
fail: function (res) {
<span style="color: #
<span style="color: #
<span style="color: #
complete: function () {
<span style="color: #
// complete
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # })
阅读(...) 评论()}