thinkphp实现小程序H5跳转小程序页面

在H5页面中使用小程序的JS-SDK来实现跳转到小程序内的页面，需要经过以下步骤：

引入JS-SDK

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

初始化

$(document).ready(function() {
    $.ajax({
        url: '', // 向服务器请求签名验证的URL
        data: {
            url: window.location.href // 当前页面的URL
        },
        success: function(res) {
            // 初始化小程序JS-SDK
            wx.config({
                debug: false,
                appId: res.appId,
                timestamp: res.timestamp,
                nonceStr: res.nonceStr,
                signature: res.signature,
                jsApiList: ['miniProgram.navigateTo'] // 需要使用的API列表
            });
        }
    });
});

服务端处理请求签名验证的URL

<?php

namespace app\api\controller;

use think\Controller;

class Wechat extends Controller
{
    // 用于从微信服务器获取 access_token



    private function getAccessToken(){
        $grant_type = 'client_credential';
        $appid = '输入小程序的appid';
        $secret = '输入小程序的appsecret';
        $data = $this->httpRequest(
            'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$secret,
            'get',
            null,
            array("Content-type:application/json;","Accept:application/json")
        );
        $accessToken = isset($data['access_token']) ? $data['access_token'] : '';
        if($accessToken){
            session('access_token',$accessToken);
//            Cache::tag('access_token')->set('url_access_token',$accessToken,3600);
        }
        return $accessToken;
    }
    private function httpRequest($url, $format = 'get', $data = null, $headerArray = []){
        //设置头信息
        $curl=curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
        if ($format == 'post') {
            //post传值设置post传参
            curl_setopt($curl, CURLOPT_POST, 1);
            if ($data) {
                $data  = json_encode($data);
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            }
        }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        if ($headerArray) {
            curl_setopt($curl,CURLOPT_HTTPHEADER,$headerArray);
        }
        $data=json_decode(curl_exec($curl), true);
        curl_close($curl);
        //返回接口返回数据
        return $data;
    }

    // 根据 access_token 和当前页面的URL 计算签名
    private function getSignature($accessToken, $url) {
        $timestamp = time();
        $noncestr = substr(str_shuffle(str_repeat('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', 15)), 0, 15);
        $str = "jsapi_ticket=".$accessToken."&noncestr=".$noncestr."&timestamp=".$timestamp."&url=".$url;
        $signature = sha1($str);
        return [
            'appId' => '输入你的小程序appid',
            'timestamp' => $timestamp,
            'nonceStr' => $noncestr,
            'signature' => $signature
        ];
    }

    // 处理前端请求的接口
    public function getSignatures() {
        $url = input('get.url'); // 前端传来的当前页面URL
        $appID = '输入小程序的appid';
        $appSecret = '输入小程序的appsecret';
        $accessToken = $this->getAccessToken();//获取accessToken
        $signature = $this->getSignature($accessToken, $url);
        return json($signature);
    }
}

触发小程序内页面的跳转

一旦小程序JS-SDK初始化完成，可以在H5页面中通过相应的触发事件来调用小程序的API，实现跳转到小程序内的页面。

$('#selector').click(function() {
            // 使用小程序JS-SDK提供的方法来触发跳转
            wx.miniProgram.navigateTo({
                url: '/pages/page/index' // 替换成你要跳转的小程序页面路径
            });
        });