要实现从微信公众号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 + "×tamp=" + timestamp + "&url="
+ ymurl;
//公司自己封装的sha1 大家可以在网上找一下,这里就不列了
return Enc.sha1(string1);
}