tp3.2微信sdk改tp5例子配置步骤
之前发过一篇文章《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微信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

3、复制映射后的网址,如:http://d5186292.ngrok.io
访问下,这时候你发现,本地网站可以外网访问了。

第六步:配置微信
1、修改 接口配置信息
URL:你的微信访问入口,如:http://d5186292.ngrok.io/index/index/wx
Token:填入你第四部自定义的token

2、修改 JS接口安全域名
域名:填入你外网的域名,如:d5186292.ngrok.io 不带http
3、修改 网页授权获取用户信息
授权回调页面域名,如:d5186292.ngrok.io 不带http

第七步:测试
测试1:发送“你好”,自动回复:“欢迎您关注,这是文本回复的内容!”。
测试2:发送一张图片,自动回复:“这是一张图片”。

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

已下载:672 次
已下载:465 次
原创文章,转载请注明出处:https://www.weizhixi.com/article/79.html
