微信公众号开发(七)微信h5跳转小程序及小游戏示例

简介: 最近公司做活动,需要从h5页面跳转至微信小游戏。当时接到这个需求的时候,就在想,这玩意能相互跳转么?后来百度了一下,还真行。

最近公司做活动,需要从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&timestamp=$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

欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”

目录
打赏
0
0
1
0
16
分享
相关文章
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
131 12
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
|
1月前
|
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
74 0
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等