H5方便进行分享朋友圈，今天就有一个业务是需要制作一个H5页面，放多个推广图片，点击进入相应的小程序页面，这样H5的分享朋友圈功能及进入小程序功能就整合了。下面说下制作的思路。
开放标签使用步骤
微信开放标签使用步骤与微信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接口的申请相互独立，因此是可以同时申请的。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});关键的点就在这里，需要引用开放标签的接口。CONFIG这里怎么生成，我前面的文章有介绍，还不会的朋友们可以翻看我前面的文章。
使用说明
所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。
如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"><script>进行代替，来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，下文标签插槽中的default插槽为默认插槽，可不声明插槽名称。
对于标签事件，均可通过event.detail获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代event.detail中的内容。
开放标签说明
小程序跳转按钮：<wx-open-launch-weapp>
用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。
整合代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, minimum-scale=0.5,maximum-scale=1, initial-scale=1, user-scalable=no" name="viewport" servergenerated="true"/>
<title>H5跳转小程序测试！</title>
<script src="/public/h5/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<script>
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '{$wxconfig.appId}',
timestamp: {$wxconfig.timestamp},
nonceStr: '{$wxconfig.nonceStr}',
signature: '{$wxconfig.signature}',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'getLocation',
'onMenuShareTimeline',
'onMenuShareAppMessage'
],
openTagList: [
'wx-open-launch-weapp'
]
});
wx.ready(function () {
//播放音乐
//document.getElementById('audio').play();
// 在这里调用 API
wx.checkJsApi({
jsApiList: [
'getLocation',
'onMenuShareTimeline',
'onMenuShareAppMessage'
],
openTagList: [
'wx-open-launch-weapp'
],
success: function (res) {
// alert(JSON.stringify(res));
}
});
});
</script>
<wx-open-launch-weapp
id="launch-btn"
username="gh_b453641d6885"
path="/pages/new/new"
>
<template>
<style>.btn { padding: 12px;width: 150px;height: 40px;background-color: #07C160;color: #fff;}</style>
<button class="btn">打开小程序<button>
</template>
</wx-open-launch-weapp>
<script>
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>
其实引用了微信标签，那么在页面中放什么位置都是可以的，样式也可以自定义，完全和HTML标签是一样的，重点就是标签的设置
<wx-open-launch-weapp
id="launch-btn"
username="gh_b453641d6885"
path="/pages/new/new"
>
<template>id:按钮ID，方便写动作
username:小程序的原始ID（微信公众平台，基本设置里最后一项）
path:就是小程序的页面路径了，可以加参数的
SOEASY!!!!!!!!!!!!!!!!!!
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
