微信公众号内h5页面调起微信小程序

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}&timestamp={$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>

 

posted @ 2021-04-06 16:33  知风阁  阅读(1389)  评论(0)  编辑  收藏  举报