tp3.2微信sdk改tp5例子配置步骤

标签: 微信
2018-03-07 阅读(325)

之前发过一篇文章《tp5微信sdk之小改麦当苗儿的tp3.2微信sdk》,可能对部分刚刚接触微信开发的新手不知道怎么操作,可能是对《微信开发文档》和《tp5.0开发文档》没看完或没理解到位。


下面续《tp5微信sdk之小改麦当苗儿的tp3.2微信sdk》这篇文章,展开图文并茂的从无到有的开发及配置步骤:

下面与【麦当苗儿的github下载tp3.2微信sdk(更新时间2015年8月4日)】和【以ThinkPHP5.0.15完整版】为例



第一步:下载tp5.0

下载最新ThinkPHP5.0.15完整版:

http://www.thinkphp.cn/down/1125.html



第二步:运行tp5.0

解压到本地 php 环境下,例如:我的wampserver2.5

配置httpd-vhosts.conf:C:/XQ/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf

<VirtualHost *:80>
    DocumentRoot "C:/XQ/wamp/www/tp5/public"
    ErrorLog "logs/error.log"
    CustomLog "logs/tp5.log" common
</VirtualHost>

这样,可以正常使用tp5了。如:http://localhost

部署运行tp5.0.png

配置运行tp5.png



第三步:按照文章修改

按照文章《tp5微信sdk之小改麦当苗儿的tp3.2微信sdk》开发

测试控制器:

<?php
namespace app\index\controller;

use com\Wechat;
use com\WechatAuth;
use think\Controller;
use think\Exception;
use think\Log;

class Index extends Controller {

    //默认首页
    public function index(){

        return '<style type="text/css">*{ padding: 0; margin: 0; } .think_default_text{ padding: 4px 48px;} a{color:#2E5CD5;cursor: pointer;text-decoration: none} a:hover{text-decoration:underline; } body{ background: #fff; font-family: "Century Gothic","Microsoft yahei"; color: #333;font-size:18px} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.6em; font-size: 42px }</style><div style="padding: 24px 48px;"> <h1>:)</h1><p> ThinkPHP V5<br/><span style="font-size:30px">十年磨一剑 - 为API开发设计的高性能框架</span></p><span style="font-size:22px;">[ V5.0 版本由 <a href="http://www.qiniu.com" target="qiniu">七牛云</a> 独家赞助发布 ]</span></div><script type="text/Javascript" src="https://tajs.qq.com/stats?sId=9347272" charset="UTF-8"></script><script type="text/Javascript" src="https://e.topthink.com/Public/static/client.js"></script><think id="ad_bd568ce7058a1091"></think>';
    }

    //微信入口
    public function wx() {
        try{
            $wechat = new Wechat();
            $data = $wechat->request();
            if($data && is_array($data)) {

                switch ($data['MsgType']) {
                    case Wechat::MSG_TYPE_EVENT: //事件消息
                        switch ($data['Event']) {
                            case Wechat::MSG_EVENT_SUBSCRIBE: //关注
                                $wechat->replyText('欢迎您关注!');
                                break;
                            case Wechat::MSG_EVENT_UNSUBSCRIBE: //取消关注
                                break;
                            default:
                                break;
                        }
                        break;
                    case Wechat::MSG_TYPE_TEXT: //文本消息
                        $wechat->replyText('欢迎您关注,这是文本回复的内容!');
                        break;
                    case Wechat::MSG_TYPE_IMAGE: //图片消息
                        $wechat->replyText("这是一张图片");
                        break;
                    default:
                        break;
                }

            }
        } catch(Exception $e){
            Log::error($e->getMessage());
        }
    }

    //演示页面调用网页授权
    public function view(){
        //检查授权
        $user_info = $this->checkAuth();
        //用户信息
        $this->assign("info", $user_info);

        $auth = new WechatAuth();
        //获取JS-SDK的页面必须先注入配置信息
        $signPackage = $auth->getSignPackage();
        $this->assign("signPackage", $signPackage);
        return $this->fetch();
    }

    //简单写个验证授权
    //实际这里按业务来确定是否来源微信、请求方法类型、数据库处理等判断和操作
    private function checkAuth(){
        $user_info = session('user_info');
        if(!empty($user_info)){
            return $user_info;
        }
        $auth = new WechatAuth();
        //如果code为空
        if(empty(input('get.code'))){
            //跳转至授权
            $url = $auth->getRequestCodeURL(request()->url(true));
            $this->redirect($url);
        }
        //根据code换取网页授权access_token和获取用户信息
        $user_info = $auth->getAuthUserInfo();
        session("user_info", $user_info);
        return $user_info;
    }

}

view.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    </head>
    <body>

    <!-- 输出用户信息 -->
    <!--{:var_dump($info)}-->

 <img src="{$info['headimgurl']}" alt="" width="64px" />
    <p>{$info['nickname']}</p>


    <script>
        wx.config({
            debug: true,
            appId: '<?php echo $signPackage["appId"];?>',
            timestamp: '<?php echo $signPackage["timestamp"];?>',
            nonceStr: '<?php echo $signPackage["nonceStr"];?>',
            signature: '<?php echo $signPackage["signature"];?>',
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
 'getLocation'
 ]
        });

        wx.ready(function () {
            // 在这里调用 API

            //定位测试
 wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
 success: function (res) {
                    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
 var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
 var speed = res.speed; // 速度,以米/每秒计
 var accuracy = res.accuracy; // 位置精度
 }
            });
        });
    </script>

</body>
</html>



第四步:配置项目

修改完之后,为了方便测试和开发,使用微信测试公众号来操作。

1、登录进入你自己的微信测试公众号。微信公众平台接口测试账号:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

2、获取测试号中的 appID 和 appsecret 填入配置。

3、token 你自定义一个。

4、key 用于加密,不用理,因为测试公众号无需配置。

配置项目config.php

'wechat' => [
'appid' => 'wx25c716edaef*****',
'appsecret' => '04b6fc04520d3fff38a161b435f*****',
'token' => 'f8eeb52b67fff74c19d1b2a2cb*****',
'key' => 'EgYE5EYFheuSdVMurQC7Fd62C6uSAhAtnagkddg2e9K'
]



第五步:上线(项目外网访问)

上线,就是把项目放到服务器,就是可以互联网访问你的网站。

由于微信开发必须能在网络访问到你的网站。

没有服务器的可以用 ngrok 将本地http://localhost/来映射到外网可以访问。

什么是 ngrok 我就不介绍了,ngrok简单易用就一个文件ngrok.exe,即下即用无需注册。

1、打开 cmd 进入到 ngrok.exe 的目录下

2、运行 ngrok http 80

ngrok http 80.png

3、复制映射后的网址,如:http://d5186292.ngrok.io

访问下,这时候你发现,本地网站可以外网访问了

本地网站可以外网访问.png



第六步:配置微信

1、修改 接口配置信息 

    URL:你的微信访问入口,如:http://d5186292.ngrok.io/index/index/wx

    Token:填入你第四部自定义的token

微信配置接口配置信息和JS接口安全域名.png

2、修改 JS接口安全域名

    域名:填入你外网的域名,如:d5186292.ngrok.io 不带http

3、修改 网页授权获取用户信息

    授权回调页面域名,如:d5186292.ngrok.io 不带http

网页授权获取用户信息.png



第七步:测试

测试1:发送“你好”,自动回复:“欢迎您关注,这是文本回复的内容!”。

测试2:发送一张图片,自动回复:“这是一张图片”。

微信发送文本_发送一张图片.png

测试3:打开连接:http://d5186292.ngrok.io/index/index/view。已经能获取到授权用户信息,或JS微信接口定位函数。

微信打开连接.png




zip icon
tp3.2微信sdk改tp5例子.zip d9a58a2103ea5be4cdb716455ed7e50f

已下载:19 次     

已下载:57 次     

原创文章,转载请注明出处:https://www.weizhixi.com/user/index/article/id/79.html

分类:
点击(428) 阅读(325) 举报