普通的H5 网页作微信公众号菜单，获取微信授权、jssdk

周大胖子 · 发表于 2022-6-24 17:26:29

本帖最后由周大胖子于 2022-7-5 14:55 编辑

我的血泪史啊，

先提一个坑爹的点：注意事项：拿完网页微信配置后，比如说获取微信收货地址，在调试器中就会报错、必须在真实环境中测才可以正常运行。

第一步单纯在该网页中获取微信授权

            这就是获取code 别问我啥是CODE 我也不晓得，但是存起来用就可以获取到用户的一些信息

         1.1 判断是不是微信浏览器

         function is_weixin() {
                     var ua = navigator.userAgent.toLowerCase();
                  if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; }
         }

         if (is_weixin()) {
            // console.log('这是微信浏览器')

         } else {
            // console.log('不是')
         }

         1.2 获取授权的code 利用code 获取openid 只能获取一次

let appid = "***"; //微信APPid
let local = window.location.href;
let code = getUrlCode().code; //是否存在code
if (code == null || code === "") {
//不存在就打开上面的地址进行授权
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +
"&redirect_uri=" +
encodeURIComponent(local) +
"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
} else {
console.log(code) // 这就是获取到了code
}
function getUrlCode() {
// 截取url中的code方法
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
}
console.log(theRequest);
return theRequest;
}

复制代码

第二步获取用户的openid 利用code 获取openid 只能获取一次，code 不能重复利用


            这是一个前后台配合的操作  ：

         2.1 前台把code 传给后台，后台向微信发出请求获得结果

                  前台简单的一个AJAX 就可以  例如

api('api/home/use/getwx', {'code': localStorage.getItem('wxcode')}, 'GET').then((e) => {
// console.log(e)
if (e.status == 200) {
$("input[name=wxid]").val(e.data.data.openid);
}
});

复制代码

2.2 后台请求微信token,并把需要的值传回给前台

// 根据CODE 获取 access_token 和用户信息
public function getwx( Request $request )
{
if(!$request->param('code')){
return app('json')->fail('没收到code');
}
$code = $request->param('code');
$timeout=array(
'https'=>array(
'timeout'=>5000
)
);
$ctx=stream_context_create($timeout);
$text=file_get_contents('https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx79d8025aa45db24e&secret=ec81fc6d2381da603d64af2e3f6d9272&code='.$code.'&grant_type=authorization_code',0,$ctx);
$m = array(
'data'=> json_decode($text)
);
$text = json_decode($text);
Cache::set('wxtoken', $text->access_token ,3600);
return app('json')->success( $m );
}

复制代码

第三步获取调用支付、获取地址等功能

3.1 首先明白一个事情，要想调用微信的API 就需要在当前页面获取他的签名  ，

   3.1.1  获取签名在前台，要获取签名就需要引入微信的文件,才能使用 wx.什么什么

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

复制代码

3.1.2 然后直接发起请求，并且把当前页面的链接传到后台 [ 这里其实有个问题就是关于 code获取时的链接地址后面有个= 后面还有别的什么，我个人不喜欢，所以之前把code 存在了前端的缓存中，然后每次刷新页面除了读url 中的code，还读缓存中是否有没过期的code 。有效期两小时，这样我就可以保证URL的纯净，等于把授权的code 藏起来了 ]

// 获取微信的配置
function weixinConfigFun(){
api('api/home/use/getSignature', {
'url': location.href
}, 'GET').then((e) => {
// console.log(e)
if (e.status == 200){
// alert(1)
wx.config({
debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: e.data.appId, // 必填，公众号的唯一标识
timestamp: e.data.timestamp, // 必填，生成签名的时间戳
nonceStr: e.data.nonceStr, // 必填，生成签名的随机串
signature: e.data.signature,// 必填，签名
jsApiList: [
'editAddress',
'checkJsApi',
'openAddress',
] // 必填，需要使用的 JS 接口列表
// “openProductViewWithPid”，“batchAddCard”，“chooseCard”，“batchViewCard”，“editAddress”，“checkJsApi”
});
wx.openAddress({
success: function (res) {
console.log(res)
}
});
}
});
}

复制代码

注意只要配置成功，后面的API调用在微信开发者工具中很可能出问题，建议真机尝试

3.2 PHP 获取微信的签名配置注意配置获取直接访问 getSignature

// 获取微信的access_token
public function getWxAccessToekn(){
if(Cache::get('wxtoken')){
return Cache::get('wxtoken');
}else{
$timeout=array(
'https'=>array(
'timeout'=>5000
)
);
$ctx=stream_context_create($timeout);
// $text=file_get_contents('https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx79d8025aa45db24e&secret=ec81fc6d2381da603d64af2e3f6d9272&code='.$code.'&grant_type=authorization_code',0,$ctx);
$text=file_get_contents('https://api.weixin.qq.com/cgi-bin/token?appid=wx79d8025aa45db24e&secret=ec81fc6d2381da603d64af2e3f6d9272&&grant_type=client_credential',0,$ctx);
$text = json_decode($text);
Cache::set('wxtoken', $text->access_token ,3600);
return Cache::get('wxtoken');
}
}
/**
* 微信签名获取
*/
public function getSignature( Request $request )
{
// 先判断cache
$jsapiTicket =$this->getTicket() ;
$nonceStr = $this->createNonceStr();
$timestamp = time();
// var test = window.location.href; 这样就可以获取当前页面url，最近我写个微信功能也这样取的。[我的想法是前端的URL当前页，传给后台]
// 签名用的url必须是调用JS接口页面的完整URL”
// 注意 URL 一定要动态获取，不能 hardcode.
// $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
// $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$url = $request->param('url');
// $url = $request->param('url');
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
$signature = sha1($string);
// dd($config['app_id']);
$signPackage = array(
"appId" => '*******',
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string,
"jsapiTicket"=>$jsapiTicket
);
// return [
// 'code'=>0,
// 'message'=> '获取微信配置成功',
// 'data'=>$signPackage
// ];
// return $signPackage;
return app('json')->success( $signPackage );
}
public function getTicket()
{
if(Cache::get('ticket')){
return Cache::get('ticket');
}else{
// $config = $this->sendConfig();
// $app = Factory::officialAccount($config);
$accessToken = $this->getWxAccessToekn();
$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $accessToken.'&type=jsapi';
//初始化
$ticketArr = $this->curl_get($url);
$ticket = $ticketArr['ticket'];
Cache::set('ticket', $ticket ,3600);
return $ticket;
}
}
public function curl_get($url)
{
$headerArray =array("Content-type:application/json;","Accept:application/json");
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch,CURLOPT_HTTPHEADER,$headerArray);
$output = curl_exec($ch);
curl_close($ch);
$output = json_decode($output,true);
return $output;
}
/**
* 生成随机数
*/
public function createNonceStr($length = 16) {
$returnStr='';
$pattern = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
for($i = 0; $i < $length; $i ++) {
$returnStr .= $pattern {mt_rand ( 0, 61 )};
}
return $returnStr;
}

复制代码