最近公司做活动，需要从h5页面跳转至微信小游戏。
当时接到这个需求的时候，就在想，这玩意能相互跳转么？
后来百度了一下，还真行。
H5跳转微信小程序/小游戏 微信官方文档：
developers.weixin.qq.com/doc/offiacc…
官方文档需要仔细看才能看明白，要按照人家的流程一步一步来，要不然可是会出问题的。
下面是我在测试阶段使用的测试代码（包括php代码）
下面 的代码将信息改成你自己的，理论上直接就能用。
index.html
xml
复制代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>跳转小程序</title> </head> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="../common/js/jquery-3.5.1.min.js"></script> <body> <div>为啥按钮不显示？</div> <div> <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxxx" path="/pages/index/index " > <template> <style> .btn { padding: 12px; width: 100%; height: 50px; } </style> <button class="btn">打开小程序</button> </template> </wx-open-launch-weapp> </div> <script> // 封装 ajax const getSdkPromission= () => { return new Promise((resolve, reject) => { $.ajax({ type: 'POST', data: { url: location.href.split('#')[0] }, url: "https://xxx.xxx.xxx/get_signpackage.php", dataType: 'json', success: function (data) { //后台接口调用成功，开始配置微信 // alert(data.timestamp); wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: data.appId, // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signature: data.signature,// 必填，签名，见附录 jsApiList: [// 必填，需要使用的JS接口列表，所有JS接口列表见附录2 "chooseImage", "uploadImage", ], openTagList: ["wx-open-launch-weapp"] }); resolve(); } }); }); }; window.onload = function() { console.log("onload"); getSdkPromission().then(res => { //=== 获取 config 的参数以及签名=== end wx.ready(function() { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中 console.log("wx ready"); }); wx.error(function(res) { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中 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); }); }); }; </script> </body> </html>
get_signpackage.php
php
复制代码
<?php $weixin = new Weixin(); $SignPackage = $weixin->getSignPackage($url); echo json_encode($SignPackage, JSON_UNESCAPED_UNICODE); class weixin { /** * @name: appid * @author: camellia * @date: 2021-02-22 */ public $appid = 'qqqqqqqqqqqqqqqqqqqqqq'; public $access_token = '1111111111111111111111111111111111111111111111111111'; /** * @name: 创建随机字符串 * @author: camellia * @date: 2021-02-22 */ private 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; } /** * @name: 获取通行证 * @author: camellia * @date: 2021-02-22 */ private function getJsApiTicket() { $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=" . $this->access_token; $res = json_decode($this->httpGet($url)); $JsApiTicket = $res->ticket; return $JsApiTicket; } /** * @name: 获取签名包 * @author: camellia * @date: 2021-02-22 */ public function getSignPackage($url) { $jsapiTicket = $this->getJsApiTicket(); $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=" . $url; $signature = sha1($string); $signPackage = array( "appId" => $this->appid, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; } }
最终效果我就不展示了，没有找到手机录制gif动图的软件
有好的建议，请在下方输入你的评论。
欢迎访问个人博客 guanchao.site
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”
