php代碼:
$wchat = new WchatOauth();
$access_token = $wchat->get_access_token();//封裝的獲取accesstoken方法,自己看官方文檔,這里需要做下緩存。
$appid = 'wx3eb1e********'; //填入服務號AppID
// 獲取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 = "http://wechat.com/xxxxxxxxxxxxxxxxx"; // 調用JSSDK的頁面地址
// sha1加密
$str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}×tamp={$timestamp}&url={$url}";
$sha_str = sha1($str);
$ret =["appid"=>$appid,"timestamp"=>$timestamp,"nonceStr"=>$nonceStr,"signature"=>$sha_str];
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);
}
html代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>桑域服飾</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> </head> <body> <wx-open-launch-weapp id="launch-btn" username="gh_b5d5007d870f" path="pages/live_group/index"> <template> <style> .jump-btn { height: 44px; line-height: 44px; border: none; border-radius: 5px; font-size: 16px; color: #ffffff; background-color: green; text-align: center; } </style> <button class="jump-btn">點擊進入直播間</button> </template> </wx-open-launch-weapp> </body> <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> /* * 注意: * 1. 所有的JS接口只能在公眾號綁定的域名下調用,公眾號開發者需要先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。 * 2. 如果發現在 Android 不能分享自定義內容,請到官網下載最新的包覆蓋安裝,Android 自定義分享接口需升級至 6.0.2.58 版本及以上。 * 3. 常見問題及完整 JS-SDK 文檔地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html * * 開發中遇到問題詳見文檔“附錄5-常見錯誤及解決辦法”解決,如仍未能解決可通過以下渠道反饋: * 郵箱地址:weixin-open@qq.com * 郵件主題:【微信JS-SDK反饋】具體問題 * 郵件內容說明:用簡明的語言描述問題所在,並交代清楚遇到該問題的場景,可附上截屏圖片,微信團隊會盡快處理你的反饋。 */ wx.config({ debug: false, appId: "<?php echo $ret['appid'];?>", timestamp: "<?php echo $ret['timestamp'];?>", nonceStr: "<?php echo $ret['nonceStr'];?>", signature: "<?php echo $ret['signature'];?>", jsApiList: [ "onMenuShareTimeline", "onMenuShareAppMessage", "checkJsApi", "scanQRCode" ], openTagList:['wx-open-launch-weapp'] }); wx.ready(function () { var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); }); </script> </html>
