php 判断h5微信登录页面跳转页面,微信内H5 跳转小程序方法详解（laravel/php） - Laravel学习网...

一、必备条件：

在微信内打开H5页面、其他浏览器可查看 静态网站 H5 跳小程序；

已认证的服务号，注意服务号必须是已认证的，我因为这问题调试几个小时[无语]

服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序；

已认证的非个人主体的小程序云开发也可以查看 静态网站 H5 跳小程序；

二、绑定安全域名

登录微信公众平台，进入公众号设置 -> 功能设置里设置js接口安全域名。

三、IP白名单设置

登录微信公众平台，进入开发 -> 基本配置，在IP白名单内填写你服务器的IP。

四、PHP后端代码

其实使用Laravel/Guzzle使用只需10几行代码就能搞定，但是为了方便大家查看所以使用PHP。

public function wechatApp()

{

// 微信 JS 接口签名校验工具: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

$appid = 'AppID'; //填入服务号AppID

$secret = 'AppSecret'; //填入服务号AppSecret

// 获取access_token，注意使用过程中获取到access_token后保存起来,access_token有效期为2小时；多次调研access_token会报错

$token_res = curlRequests("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}");

$access_token = $token_res['access_token'];

// 获取ticket

$ticket_res = curlRequests("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi");

$ticket = $ticket_res['ticket'];

// 时间戳

$timestamp = time();

// nonceStr为16位随机数即可

$nonceStr = createNonceStr();

// URL为调用JSSDK的页面地址,后面有参数也需要放进去

$url = "https://host.com/test?id=1"; // 调用JSSDK的页面地址

// sha1加密

$str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";

$sha_str = sha1($str);

return ["appid"=>$appid,"timestamp"=>$timestamp,"nonceStr"=>$nonceStr,"signature"=>$signature]

}

function createNonceStr($length = 16)

{

$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

$str = "";

for ($i = 0; $i < $length; $i++) {

$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);

}

return $str;

}

function curlRequests($url, $data = null)

{

// curl 初始化

$curl = curl_init();

// curl 设置

curl_setopt($curl, CURLOPT_URL, $url);

curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);

curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

// 判断 $data get or post

if (!empty($data)) {

curl_setopt($curl, CURLOPT_POST, 1);

curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

}

curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

// 执行

$res = curl_exec($curl);

curl_close($curl);

return json_decode($res, true);

}

五、H5前端代码

wx-open-launch-weapp内的username和path改为您的小程序原始号和path即可。

微信浏览器跳转小程序

.notice-msg{

width: 100%;

float: left;

line-height: 30px;

text-align: center;

margin: 200px 0px 20px 0px;

padding: 0px 15px;

box-sizing: border-box;

color: #666666;

font-size: 15px;

}

点击下方按钮立即跳转小程序

点击立即跳转小程序

$(function () {

wx.config({

debug: false,

appId: ' echo $appid ?>', // 必填，公众号的唯一标识

timestamp: ' echo $timestamp ?>', // 必填，生成签名的时间戳

nonceStr: ' echo $nonceStr ?>', // 必填，生成签名的随机串

signature: ' echo $signature ?>',// 必填，签名

jsApiList: ["chooseImage"],//必须要不调用小程序标签渲染不出来

openTagList: ['wx-open-launch-weapp']//必须必须要不调用小程序标签渲染不出来

});

wx.ready(function () {

console.log("ready");

});

wx.error(function (res) {

console.log("res", res);

});

var btn = document.getElementById('launch-btn');

btn.addEventListener('launch', function (e) {

console.log('success');

});

btn.addEventListener('error', function (e) {

console.log('fail', e.detail);

});

});

微信内H5 跳转小程序方法详解(laravel/php) - Laravel学习网

原文出处： https://phpartisan.cn/news/158.html

问题交流群 ：168117787