(12)微信商城
① 前台模板引入
a.引入微信商城模板的css+js+Images+img+bootstrap
b.引入微商城的首页index.html及详情页detail.html页面模板
注意:修改js/css/image等的引入路径
c.控制器添加显示页面的方法
D:\phpStudy\WWW\wechat\tp3\Application\Shop\Controller\IndexController.class.php
d.访问控制器中的方法查看显示效果
http://zouke1220.oicp.net/wechat/tp3/index.php/Shop/Index/index
http://zouke1220.oicp.net/wechat/tp3/index.php/Shop/Index/detail
② 后台模板引入(注意修改bootstrap的引入路径)
a.添加
² 引入产品添加页面
² 后台控制器添加方法
//显示添加商品页面 public function add(){ $this->display(); }
² 访问控制器中的方法,查看显示效果
http://zouke1220.oicp.net/wechat/tp3/index.php/Shop/Admin/add
² 添加商品+图片上传
注意:配置好数据库连接D:\phpStudy\WWW\wechat\tp3\Application\Shop\Conf\config.php
//添加商品+图片上传 public function addgoods(){ //var_dump($_POST);exit; header("Content-type:text/html;charset=utf-8"); $m=M('goods'); $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize =3145728 ; // 设置附件上传大小 $upload->exts =array('jpg', 'gif', 'png', 'jpeg'); // 设置附件上传类型 $upload->rootPath ='./Public/Uploads/'; // 设置附件上传目录 $info = $upload->upload(); // 上传文件 if(!$info) {// 上传错误提示错误信息 echo '<script type="text/javascript">alert("上传图片失败");</script>'; exit; }else{ // 上传成功 $_POST['img']=$info['img']['savepath'].$info['img']['savename']; //var_dump($_POST); /* array(4) { ["name"]=> string(3) "222" ["price"]=> string(3) "222" ["pex"]=> string(4) "A类" ["img"]=> string(28) "2017-08-17/59952ffbea896.png" } */ $arr=$m->add($_POST); if($arr){ echo '<script type="text/javascript">alert("添加成功");</script>'; }else{ echo '<script type="text/javascript">alert("添加失败");</script>'; } }
b.列表
² 引入展品列表显示页面
² 后台控制器列表方法
//商品列表页 public function lists(){ $m=M('goods'); $data=$m->select(); $this->assign("data",$data); $this->display(); }
² 访问控制器中的方法,查看显示效果
http://zouke1220.oicp.net/wechat/tp3/index.php/Shop/Admin/lists
c.删除
² 后台控制器列表方法
//删除商品 public function del(){ header("Content-type:text/html;charset=utf-8"); $id=$_GET['id']; $m=M('goods'); $res=$m->delete($id); if($res){ echo '<script>alert("删除成功");history.go(-1);</script>'; }else{ echo '<script>alert("删除失败");history.go(-1);</script>'; } }
² 点击删除按钮
③ 前台数据展示
a.控制器取数据
//首页 public function index(){ $m=M('goods'); $data=$m->select(); $this->assign('data',$data); $this->display(); } //详情页 public function detail(){ $m=M('goods'); $data=$m->find($_GET['id']); $this->assign('data',$data); $this->display(); }
//订单页 public function order(){ $this->assign('data',$_POST); $this->display(); }
b.页面展示
D:\phpStudy\WWW\wechat\tp3\Application\Shop\View\Index\index.html
http://zouke1220.oicp.net/wechat/tp3/index.php/Shop/Index/index
D:\phpStudy\WWW\wechat\tp3\Application\Shop\View\Index\detail.html
http://zouke1220.oicp.net/wechat/tp3/Shop/Index/detail/id/2.html
D:\phpStudy\WWW\wechat\tp3\Application\Shop\View\Index\order.html
http://zouke1220.oicp.net/wechat/tp3/Shop/Index/order.html
将wechat\选择城市插件文件下的js文件拷贝到D:\phpStudy\WWW\wechat\tp3\Public\js下
将wechat\选择城市插件文件下的css文件拷贝到D:\phpStudy\WWW\wechat\tp3\Public\css下
订单页面order.html引入刚才的css文件:area.css和js文件:area.js、jquery-3.2.1.js
访问查看效果
c.写入订单到数据库
//写入订单到数据库 public function addOrder(){ header('Content-type:text/html;charset=utf-8'); $data['gid']=$_POST['id']; $data['name']=$_POST['name']; $data['price']=$_POST['price']*$_POST['num']; $data['num']=$_POST['num']; $data['email']=$_POST['email']; $data['mobile']=$_POST['mobile']; $data['city']=$_POST['city']; $data['detail']=$_POST['detail']; $m=M('orders'); $res=$m->add($data); if($res){ echo '<script>alert("生成订单成功");history.go(-2)</script>'; }else{ echo '<script>alert("生成订单失败");history.go(-1)</script>'; } }
④ 微信支付
同步:同步执行或跳转
异步:不管用户是否点击完成或跳转,微信服务器都会向我们的服务器推送数据
如果指定推送数据的地址:如果微信服务器没有收到返回参数,会一直向你的服务器推送数据,8次。
a.修改写订单方法
//写入订单到数据库 public function addOrder(){ header('Content-type:text/html;charset=utf-8'); //未支付成功 缓存订单数据 if(empty($_GET['isnull'])){ //去支付 header('Location:http://zouke1220.oicp.net/wechat/tp3/WxPay/example/jsapi.php'); //缓存订单数据 $data['gid']=$_POST['id']; $data['name']=$_POST['name']; $data['username']=$_POST['username']; $data['pirce']=$_POST['pirce']*$_POST['num']; $data['num']=$_POST['num']; $data['email']=$_POST['email']; $data['mobile']=$_POST['mobile']; $data['city']=$_POST['city']; $data['detail']=$_POST['detail']; session('data',$data); }else{ //支付成功 插入订单数据 $m=M('order'); $res=$m->add(session('data')); if($res){ echo '<script>alert("生成订单成功"); location.href="http://zouke1220.oicp.net/wechat/tp3/Shop/Index";</script>'; }else{ echo '<script>alert("生成订单失败");history.go(-2)</script>'; } } }
b.修改jsapi.php
D:\phpStudy\WWW\wechat\tp3\WxPay\example\jsapi.php
<?php /******************新增开始**********************/ session_start(); header('Content-type:text/html;charset=utf-8'); /******************新增结束**********************/ ini_set('date.timezone','Asia/Shanghai'); //error_reporting(E_ERROR); require_once "../lib/WxPay.Api.php"; require_once "WxPay.JsApiPay.php"; require_once 'log.php'; //初始化日志 $logHandler= new CLogFileHandler("../logs/".date('Y-m-d').'.log'); $log = Log::Init($logHandler, 15); //打印输出数组信息 /***********注释开始******************** function printf_info($data) { foreach($data as $key=>$value){ echo "<font color='#00ff55;'>$key</font> : $value <br/>"; } } ************注释结束*******************/ //①、获取用户openid $tools = new JsApiPay(); $openId = $tools->GetOpenid(); //②、统一下单 $input = new WxPayUnifiedOrder(); $input->SetBody($_SESSION['data']['name']); //动态获取 $input->SetAttach($_SESSION['data']['name']); //动态获取 $input->SetOut_trade_no(WxPayConfig::MCHID.date("YmdHis")); $input->SetTotal_fee($_SESSION['data']['price']); //动态获取 $input->SetTime_start(date("YmdHis")); $input->SetTime_expire(date("YmdHis", time() + 600)); $input->SetGoods_tag("test"); $input->SetNotify_url("http://zouke1220.oicp.net/wechat/tp3/WxPay/example/notify.php"); //异步回调 $input->SetTrade_type("JSAPI"); $input->SetOpenid($openId); $order = WxPayApi::unifiedOrder($input); /**************注释开始********************* echo '<font color="#f00"><b>统一下单支付单信息</b></font><br/>'; printf_info($order); ***************注释结束********************/ $jsApiParameters = $tools->GetJsApiParameters($order); //获取共享收货地址js函数参数 $editAddress = $tools->GetEditAddressParameters(); //③、在支持成功回调通知中处理成功之后的事宜,见 notify.php /** * 注意: * 1、当你的回调地址不可访问的时候,回调通知会失败,可以通过查询订单来确认支付是否成功 * 2、jsapi支付时需要填入用户openid,WxPay.JsApiPay.php中有获取openid流程 (文档可以参考微信公众平台“网页授权接口”, * 参考http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html) */ ?> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>微信支付样例-支付</title> <script type="text/javascript"> //调用微信JS api 支付 function jsApiCall(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', <?php echo $jsApiParameters; ?>, function(res){ /**************注释开始**************** WeixinJSBridge.log(res.err_msg); alert(res.err_code+res.err_desc+res.err_msg); ***************注释结束***************/ /**************新增开始***********************/ if(res.err.msg == "get_brand_wcpay_request:ok"){ alert('支付成功'); location.href="http://zouke1220.oicp.net/wechat/tp3/Shop/Index/addOrder/isnull/1"; }else{ alert('支付失败'); location.href="http://zouke1220.oicp.net/wechat/tp3/Shop/Index/detail/id/<?php echo $_SESSION['data']['gid'];?>"; } /***************新增结束***********************/ } ); } function callpay(){ if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', jsApiCall, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', jsApiCall); document.attachEvent('onWeixinJSBridgeReady', jsApiCall); } }else{ jsApiCall(); } } </script> <script type="text/javascript"> //获取共享地址 /**************注释开始************************* function editAddress() { WeixinJSBridge.invoke( 'editAddress', <?php echo $editAddress; ?>, function(res){ var value1 = res.proviceFirstStageName; var value2 = res.addressCitySecondStageName; var value3 = res.addressCountiesThirdStageName; var value4 = res.addressDetailInfo; var tel = res.telNumber; alert(value1 + value2 + value3 + value4 + ":" + tel); } ); } window.onload = function(){ if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', editAddress, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', editAddress); document.attachEvent('onWeixinJSBridgeReady', editAddress); } }else{ editAddress(); } }; *****************注释结束************************/ </script> </head> <body> <!----------------------------注释开始---------------------------------------- <br/> <font color="#9ACD32"><b>该笔订单支付金额为<span style="color:#f00;font-size:50px">1分</span>钱</b></font><br/><br/> <div align="center"> <button style="width:210px; height:50px; border-radius: 15px; border:0px #FE6714 solid; cursor: pointer; color:white; font-size:16px;" type="button" οnclick="callpay()" >立即支付</button> </div> ------------------------------注释结束---------------------------------------> </body> </html>
说明:
微信支付测试号暂时还测试不了,有兴趣可以参考
http://download.csdn.net/download/gcfranklin/8362257
http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html
http://blog.csdn.net/u014033756/article/details/52038114
http://www.cnblogs.com/txw1958/p/wxpayv3-signkey.html
另外:选择order.html表单中的收获地址城市插件调用不了,有时间可以再调