H5跳转小程序(微信开放标签使用)
今天七月，微信终于提供了H5跳转小程序的功能；果然方便了许多；限制条件也比较宽松吧。
限制条件：
微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
使用步骤：
微信开放标签使用步骤与微信JS-SDK类似，也需要引入JS文件等步骤。如果是公众号身份的网页，需要绑定安全域名，如果是使用小程序云开发静态网站托管的小程序网页，则不需绑定安全域名即可直接使用（即跳过下面"步骤一：绑定安全域名"）。
步骤一：绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
备注：支持使用 AMD/CMD 标准模块加载方法加载。
步骤三：通过config接口注入权限验证配置并申请所需开放标签
与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。
jsApiList是不可以为空的，否则会有问题
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});一个小例子，创建一个弹窗来跳转小程序
/**
* 在页面添加一个弹窗
*/
(function(global) {
"use strict";
var MiniPopup = function() {
}
MiniPopup.prototype = {
//window对象
win : window,
//默认配置
options : {
title:'提示',
text : '测试文本', //弹出文本
divID:'mini-popup-id'//组件ID
},
/**
* @method 初始化
* @param { object } 由@method config() 提供的配置参数
*/
show : function(opts) {
var _this = this;
var option = _this.config(opts, _this.options);//用户配置
var _elem = document.body;
//初始拖拽按钮，加载到_elem内
_this.initEle(_elem);
_this.initStyle(_elem);
_this.initEvent();
},
/**
* @method 配置
* @param opts { object } 用户提供的参数，在没有提供参数的情况下使用默认参数
* @param options { object } 默认参数
*/
config : function(opts, options) {
//默认参数
if (!opts)
return options;
for ( var key in opts) {
if (!!opts[key]) {
options[key] = opts[key];
}
}
return options;
},
/**
* @method 初始弹出DOM，加载到_elem内
* @param _elem { object } 指定挂载的节点
*/
initEle : function(_elem) {
var _this = this;
var open = false;
// 打开小程序要7.0.12版本以上才行；这里获取微信的版本号进行判断，如： 7.0.14
let wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)
if (wechat) {
let judgewechat = wechat[1].split('.')
if (judgewechat[0] >= 7 && judgewechat[1] >= 0 && judgewechat[2] >= 12) {
// 微信版本是 7.0.12及以上
open = true;
}
}
//创建一个div
var ele = document.createElement('div');
ele.id = _this.options.divID;
if(open) {
ele.innerHTML =
'' +
'' + _this.options.title + '' +
"" + _this.options.text + "" +
'' +
'';
}else {
ele.innerHTML =
'' +
'' + _this.options.title + '' +
"暂不支持跳转小程序！" +
'' +
'';
}
//动态插入到body中
_elem.insertBefore(ele, _elem.lastChild);
//赋值到全局变量
_this.ele = ele;
},
/**
* @method 初始DOM的样式加载
* @param _elem { object } 指定挂载的节点
*/
initStyle:function (_elem) {
var _this = this;
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js_mini';
document.getElementsByTagName('head')[0].appendChild(styleElement);
styleElement.appendChild(document.createTextNode(
'#' + _this.options.divID + ' {' +
'z-index:1;'+
'background-color:#000;'+
'position:absolute;'+
'display:flex;'+
'background:rgba(0,0,0,0.75);'+
'width:'+_elem.clientWidth+'px;'+
'height:'+_elem.clientHeight+'px;'+
'top: 0px;'+
'}'
));
styleElement.appendChild(document.createTextNode(
'#' + _this.options.divID + ' .div-popup {' +
'position:fixed;'+
'width:300px;'+
'text-align:center;'+
'color:#000;'+
'background-color:#fff;'+
'z-index:1; '+
'top:'+ (_elem.clientHeight - 200 )/2 + 'px;' +
'left:' + (_elem.clientWidth - 300 )/2 + 'px;' +
'}'
));
styleElement.appendChild(document.createTextNode(
'#' + _this.options.divID + ' .div-title {' +
'line-height: 2.2em;'+
'border-bottom: 1px solid #f5f5f5;'+
'font-size: 1.8rem;'+
'font-weight: 600;'+
'}'
));
styleElement.appendChild(document.createTextNode(
'#' + _this.options.divID + ' .div-text {' +
'padding: 1em 0.6em;'+
'}'
));
styleElement.appendChild(document.createTextNode(
'#' + _this.options.divID + ' .div-button {' +
'background-color:#23ADFE;'+
'height:40px;'+
'width: 100%;'+
'display: flex;'+
'color: #fff;'+
'font-size: 14px;'+
'}'
));
},
/**
* @method 初始DOM的事件加载
* @param _elem { object } 指定挂载的节点
*/
initEvent: function () {
var _this = this;
var close = document.getElementById("div-popup-close");
close.addEventListener('click', function () {
_this.click();
});
var launchBtn = document.getElementById("launch-btn");
if(launchBtn) {
launchBtn.addEventListener('launch', function (e) {
_this.click();
});
launchBtn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
}
},
/**
* 关闭按钮事件
*/
click : function () {
var _this = this;
var box = document.getElementById(_this.options.divID);
box.remove();
var style = document.getElementById("styles_js_mini");
style.remove();
//wx.closeWindow();
}
}
global.MiniPopup = MiniPopup;//注册到全局中， 届时可以直接new MiniPopup() 实例化对象
}(this))效果：
参考文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
https://blog.csdn.net/weixin_43972437/article/details/107386851