我们目前只有小程序项目(而且是多个租户),还没有关于h5的网页
产品提出 是否可以给公众号做一个中转html,然后引导用户关注公众号之后去往对应的小程序。
然后我们探讨了一个方案
实现方案:
1.在公众号增加授权回调页面域名 开发>接口权限>网页服务>网页授权
域名为是html所放的链接,并且要把每个公众号的Mp.text文件指定的 web服务器 放在域名根目录下
2.直接在公众号链接上 配置该地址 拿到code(该链接额外添加一个要跳转的小程序原始账号miniUserName,g_开头的)
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx961293786b97e5f3&redirect_uri=https%3A%2F%2Fmagic-dev-restapi.co-mall.com%2Fh5%3Fappid%3Dwx961293786b97e5f3%26miniProgramUserName%3Dgh_a7e31ec5008f&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
3.静默授权拿到code 走后端接口 ( 通过code和appid 后端获得openId)并记录下来。
4.页面展示开启小程序按钮 跳转到对应的小程序首页
下面直接贴代码
<html>
<head>
<title>打开小程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<style>
.home {
position: relative;
width: 100%;
height: 100vh;
}
.logo-wrap {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 400px;
}
.content {
position: absolute;
bottom: 123px;
width: 100%;
display: flex;
justify-content: center;
}
.tip {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
bottom: 32px;
width: 100%;
height: 14px;
color: #666;
line-height: 14px;
font-size: 10px;
}
</style>
</head>
<body>
<div class="home">
<div class="logo-wrap" id="logoUrl"></div>
<div class="content" id="content"></div>
<div class="tip">
<div>微信版本要求为:7.0.12及以上</div>
<div>系统版本要求为:iOS 10.3及以上、Android 5.0及以上)</div>
</div>
</div>
<script type="text/javascript">
//获取地址栏的参数
getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var href = window.location.href;
var appid = getUrlParam('appid');
var code = getUrlParam('code');
console.log("路径:"+href+" code:"+code+" appid"+appid);
//1.微信环境准备(成功,即可跳转小程序)
$.ajaxSettings['contentType'] = "application/json;charset=UTF-8";
$.ajax({
url: '/WEB-API/front/wechat_official_accounts/sign',
type: 'POST',
data: JSON.stringify({
app_id: appid,
url: href
}),
async: false,
dataType: "json",
contentType : "application/json;charset=UTF-8",
success: function (data) {
if(data){
wx.config({
debug: false,
appId: appid,
timestamp: data.timestamp, // 必填,填任意数字即可
nonceStr: data.nonce_str, // 必填,填任意非空字符串即可
signature: data.signature, // 必填,填任意非空字符串即可
jsApiList: ['chooseImage'], // 必填,随意一个接口即可
openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})
wx.ready(function (){
console.log("微信环境准备成功");
getContent();
})
wx.error(function (res) {
console.log("微信环境准备失败,原因:"+ res);
});
}else{
console.log("原因:公众号未配置");
}
},
error: function (error) {
console.log("后台接口获取签名异常,原因:", error);
}
});
//2.向后端发请求(后端拿到前端的code,获取用户openId,并记录)
if (code === null || code === '') {
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect'
} else {
$.ajax({
type: 'POST',
url: '/MAGIC-MEMBER/front/member_union_info_wechat_official_accounts',
data: JSON.stringify({
app_id: appid,
code: code
}),
async: false,
dataType: "json",
contentType : "application/json;charset=UTF-8",
success: function () {
console.log("绑定成功");
},
error: function (res) {
console.log("绑定失败,原因:"+res)
}
});
}
//3.获取租户logo
$.ajax({
url: '/api/session/authorizeLogo',
type: "get",
async: false,
dataType: "json",
contentType: "application/json;charset=UTF-8",
success: function (data) {
var content = "";
content += "<img src='"+data.logoUrl+"'/>";
$("#logoUrl").html(content);
},
error: function (error) {
console.log("后台接口获取logo,原因:", error);
}
});
getContent = function (){
var color = "#d02329";
if(href.indexOf("wfj") > 0){
color = "#ba8848";
}
var buttonStyle = "width: 243px; height: 40px; color: " + color
+"; border-radius: 27px; border: 1px solid " + color +"; "
+"background-color: #fff; ";
var miniProgramUserName = getUrlParam('miniProgramUserName');
var content = '';
var weappurl = "pages/index/index";
var id = "launch-btn";
content += '<wx-open-launch-weapp id='+id+' username='+miniProgramUserName+' path='+weappurl+'>';
content += '<template>';
content += '<button style="'+buttonStyle+'">打开小程序</button>';
content += '</template>';
content += '</wx-open-launch-weapp>';
$("#content").html(content);
var btn = document.getElementById( 'launch-btn');
btn.addEventListener( 'launch', function(e) {
console.log("调起成功", e.detail);
});
btn.addEventListener( 'error', function(e) {
console.log("调起失败:", e.detail);
});
}
</script>
</body>
</html>
运行完的效果