微信浏览器H5跳转小程序完整示例复制可用

要实现从微信公众号H5页面点击按钮跳转到小程序

查找微信官方文档找到了方法，使用了页面微信js，对js做相应的配置之后，在页面引入跳转标签就可以进行跳转
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

代码引用前言：

首先跳转要使用jssdk
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
登录后可在“开发者中心”查看对应的接口权限。

系统定时获取微信的
access_token 【https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html】
jsapi_ticket【https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62】

页面处理：
1.引入js

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

2.页面中要跳转小程序的按钮

<wx-open-launch-weapp id="launch-btn" username="gh开头的一串" path="/pages/  小程序的跳转链接" style="display: block;width: 100%;">
	<template style="display: block;width: 100%;">
		<style>
			.btn {
    
    
				display: block;
				width: 220px;
				height: 50px;
				line-height: 50px;
				background: #FABF01;
				border-radius: 5px;
				margin: 15px auto;
				font-size: 16px;
			}
		</style>
		<button class="btn">按钮名称</button>
	</template>
</wx-open-launch-weapp>

3.js配置【使用ajax请求后端获取数据之后配置给 wx.config】

$(function(){
    
    
    var url = location.href.split('#')[0];//获取当前页面的url
    $.post("进入后端服务器的链接", {
    
    'ymurl': url}, function (result) {
    
    
        var obj = eval("(" + result + ")");
             wx.config({
    
    
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                appId: obj.appid, // 必填，公众号的唯一标识
                timestamp: obj.timestamp, // 必填，生成签名的时间戳
                nonceStr: obj.noncestr, // 必填，生成签名的随机串
                signature: obj.signature,// 必填，签名
                jsApiList: ['openLocation'], // 必填，需要使用的JS接口列表
                openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
             });
            wx.ready(function () {
    
    
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
            });

            wx.error(function (res) {
    
    
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
            });

            var btn = document.getElementById('launch-btn');
            btn.addEventListener('launch', function (e) {
    
    
                console.log('success');
            });
            btn.addEventListener('error', function (e) {
    
    
                console.log('fail', e.detail);
            });
    });

});

4.后端代码

                    WeiXin t = WeiXin.find("Home");//自己存的公众号唯一标识appid
                    String ymurl = h.get("ymurl");//从前台拿到的需要跳转的页面url
                    String timestamp = (System.currentTimeMillis() / 1000) + "";//时间戳
                    String noncestr = "YKRJ";//生成签名的随机串
                    String signature = getSignature(ymurl, timestamp, noncestr);//生成微信JS SDK签名的方法
                    jo.put("timestamp", timestamp);//生成签名的时间戳
                    jo.put("noncestr", noncestr);//生成签名的随机串
                    jo.put("signature", signature);//生成的签名
                    jo.put("appid", MT.f(t.appid[1]));//自己存的公众号唯一标识appid

5.getSignature JS SDK生成方法

官方解释： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

/*
     * 微信JSSDK算法
     * */
    private String getSignature(String ymurl, String timestamp, String noncestr) throws SQLException {
    
    

        //jsapi_ticket我是系统做了2小时一更新的定时更新任务，存在了一个表里面，每次不请求接口直接拿数据库里的   jsapi_ticket 值
        ArrayList<WeiXinTooken> weiXinTookens = WeiXinTooken.find("", 0, Integer.MAX_VALUE);
        String jsapiTicket = weiXinTookens.get(0).jsapi_ticket;
        
        String string1 = "jsapi_ticket=" + jsapiTicket
                + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url="
                + ymurl;
        //公司自己封装的sha1  大家可以在网上找一下，这里就不列了
        return Enc.sha1(string1);
    }

微信浏览器H5跳转小程序完整示例复制可用

猜你喜欢