(原创)人人商城v3打包app教程及配置分享和调起原生app微信、支付宝支付---2020年最新最全

人人商城打包app的教程,需要准备的东西:
1:人人商城v3的一套源码,在设置中配置好app微信支付的相关参数
2:准备好安卓证书和签名,推荐一个在线生成证书:http://www.applicationloader.net/appuploader/keystore.php,证书获取签名工具:gensignature (自行查阅使用方法)
3:微信开放平台:https://open.weixin.qq.com/ 注册 移动应用 ,开通微信支付,需要开发者认证
4:这里用到的打包软件是:HbuilderX

在HbuilderX使用:原生app–云打包,在sdk配置中的 微信分享和微信支付上填写你申请的appid

1:请求头中添加app标示,否则会识别成H5,在源码视图中搜索 “plus” :在plus中添加一个配置项

"useragent" : {
            "value" : " CK 2.0 ",
            "concatenate" : true
        },

:2:在sitemap.json中里面的page替换一下,不加上去的话会出现两个标题栏的情况

"pages": [
        {
            "webviewId": "__W2A__shop.klcnsc.com",//首页
            "matchUrls": [
                {
                    "href": "https://shop.klcnsc.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile"
                }, {
                    "href": "https://shop.klcnsc.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile"
                }
            ],
            "webviewParameter": {
                "titleNView": false,
                "statusbar": {
                    "background": "#f7f7f7"
                }
            }
        },
		{
		   "webviewId"  : "common",
		   "matchUrls"  : [
		    {
		     "hostname" : "R:.",
		     "pathname" : "R:."
		    }
		   ],
		   "webviewParameter" : {
		    "titleNView" : false,
		    "statusbar"  : {
		     "style"   : "dark",
		     "background" : "#F7F7F7"
		    }
		   },
		   "easyConfig"  : {
		    "quit" : {
		     "toast"  : {
		      "showFeedback" : false
		     }
		    }
		   }
		  }
    ]

微信分享

分享的页面文件路径:ewei_shopv2/template/mobile/default/headmenu.html

可以看到有一个分享,添加一个点击事件

//微信分享
function share(){
	if(navigator.userAgent.indexOf("Html5Plus") > -1) {
	            //5+ 原生分享
	            window.plusShare({
	                title: "应用名字",//应用名字
	                content: document.title,
	                href: location.href,//分享出去后,点击跳转地址
	                thumbs: ["https://xxxxx/xxx.jpg"] //分享缩略图
	            }, function(result) {
	                //分享回调
	            });
	        } else {
	            //原有wap分享实现
	        }
	  }

微信支付

微信支付会稍微复杂一点,

1:

首先要先准备好生成订单的接口,github示例代码:https://github.com/dcloudio/H5P.Server/tree/master/payment/wxpayv3,记得修改WxPay.Config.php文件中的配置参数

2:

Hbuilder官方文档中有实例代码,在基础上做了修改支付页面在:ewei_shopv2/template/mobile/default/order/pay.html
底部加上官方的示例代码:

var channel=null;  
// 1. 获取支付通道  
function plusReady(){ //uni-app中将此function里的代码放入vue页面的onLoad生命周期中  
    // 获取支付通道  
    plus.payment.getChannels(function(channels){  
        channel=channels[0];  
    },function(e){  
        alert("获取支付通道失败:"+e.message);  
    });  
}  
document.addEventListener('plusready',plusReady,false);//uni-app不需要此代码  
var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total='; 
//这里的微信支付改成你刚才的生成订单的接口 
var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';  
// 2. 发起支付请求  
function pay(id){  
    // 从服务器请求支付订单  
    var PAYSERVER='';  
    if(id=='alipay'){  
        PAYSERVER=ALIPAYSERVER;  
    }else if(id=='wxpay'){  
        PAYSERVER=WXPAYSERVER;  
    }else{  
        plus.nativeUI.alert("不支持此支付通道!",null,"捐赠");  
        return;  
    }  
    var xhr=new XMLHttpRequest(); 
    xhr.onreadystatechange=function(){  
        switch(xhr.readyState){  
            case 4:  
            if(xhr.status==200){  
                plus.payment.request(channel,xhr.responseText,function(result){  
                    plus.nativeUI.alert("支付成功!",function(){  
                        back();  
                    });  
                },function(error){  
                    plus.nativeUI.alert("支付失败:" + error.code);  
                });  
            }else{  
                alert("获取订单信息失败!");  
            }  
            break;  
            default:  
            break;  
        }  
    }  
    xhr.open('GET',PAYSERVER);  
    xhr.send();  
}

在微信支付位置添加上你的点击事件 ,事件就是 pay(‘wxpay’) ,

3:

在首页待支付订单进入的时候会出现错误支付失败 ,错误代码62000的情况,加上解决办法在 var channel=null; 后面添加一个加载函数就解决错误代码62000的情况

$(function () {
        plus.payment.getChannels(function(channels){
            channel=channels[0];
        },function(e){
            alert("获取支付通道失败:"+e.message);
        });
    })

4:

还有一个情况就是支付的订单号的问题,两边订单号要统一所以生成订单的时候的url中记得吧 当前订单号 传过去,生成订单,否则订单会出现不能正常退款的问题

5:

支付成功之后要发送请求修改订单状态和跳转,在你的支付成功的函数中修改代码直接加上,路径自行修改i的值和域名

window.location.href="https://xxx.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&oid={$order['id']}&type=wechat"

修改函数位置在ewei_shopv2/core/mobile/order/pay.php 这个的 complete 函数,可以删除 $ispeerpay的相关判断和判断中的内容,有点忘记了,不行的话自行打印调整修改代码


到此app的配置就完成了,一些细节方面可能写的不够细致,可以在基础上加上自己的拓展和细节上的东西, 这个只是实现了功能,能正常分享支付,很多东西还是要自己拓展。

支付宝

支付宝大同小异:https://github.com/dcloudio/H5P.Server/tree/master/payment/alipayrsa2
生成订单的sdk下载来保存好,就改个支付参数就行了 其他的不用做修改,支付成功的时候,我是把它放在和微信同一个方法,就更改一下支付的类型就行了,支付宝是22,微信是21,这就成功了,退款的也是微调代码就能使用,具体剩下的就自己调试了

如果对你起到帮助了

麻烦给文章点个赞~

你可能感兴趣的:((原创)人人商城v3打包app教程及配置分享和调起原生app微信、支付宝支付---2020年最新最全)