微信公众号使用 wx-open-launch-weapp 开放标签跳转小程序

注意事项

微信开放标签有最低的微信版本要求，以及最低的系统版本要求。

微信版本要求为：7.0.12及以上
系统版本要求为：iOS 10.3及以上、Android 5.0及以上

使用步骤

1. 绑定域名

微信安全域名只能修改绑定3次/每月

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

2. 引入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）

注：Vue 项目在入口 index.html 文件中引入，且注意 JS 版本，如若之前引入过低版本，wx-open-launch-weapp 标签会无法使用，无法正常跳转小程序

3. 通过config接口注入权限验证配置并申请所需开放标签

wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: "XXXXXXXXXXX", // 必填，公众号的唯一标识timestamp: this.timestamp, // 必填，生成签名的时间戳nonceStr: this.nonceStr, // 必填，生成签名的随机串signature: this.signautre, // 必填，签名jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"], // 必填，需要使用的JS接口列表openTagList:['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
});
wx.ready(function() {//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function(res) {console.log('res',res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

开放标签使用

属性

名称必填默认值备注

appid 是所需跳转的小程序appid，即小程序对应的以wx开头的id

username 否所需跳转的小程序原始id，即小程序对应的以gh_开头的id（跳转时，有 appid 会优先使用appid，没有 appid 才会使用username）

path

否

名称	必填	备注
appid	是	所需跳转的小程序appid，即小程序对应的以`wx`开头的id
username	否	所需跳转的小程序原始id，即小程序对应的以`gh_`开头的id（跳转时，有 appid 会优先使用appid，没有 appid 才会使用username）
path	否	所需跳转的小程序内页面路径及参数（假如 path="pages/home/index" 的路径无法实现跳转，可在后面加上.html，如 path="pages/home/index.html"）

所需跳转的小程序内页面路径及参数

（假如 path="pages/home/index" 的路径无法实现跳转，可在后面加上.html，如 path="pages/home/index.html"）

插槽

名称	必填	默认值	备注
default	是		跳转按钮模版及样式

事件

名称	冒泡	返回值	备注
ready	否		标签初始化完毕，可以进行点击操作
launch	否		用户点击跳转按钮并对确认弹窗进行操作后触发
error	否	{ errMsg: string }	用户点击跳转按钮后出现错误

用例（html 页面）

<wx-open-launch-weappid="launch-btn"appid="wx xxxxxxxx"  username="gh_xxxxxxxx"  path="pages/home/index?user=123&action=abc"
>// appid 是所需跳转的小程序appid，即小程序对应的以wx开头的id// username 是所需跳转的小程序原始id，即小程序对应的以gh_开头的id// 跳转时，有 appid 会优先使用appid，没有 appid 才会使用username<template><style>.btn { padding: 12px }</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>

使用说明

所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。

如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。

插槽模版及样式均需要通过 <template></template> 进行包裹。
对于Vue等视图框架，为了避免template标签冲突的问题，可使用
<script type="text/wxtag-template"></script> 进行代替，来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，以上用例中标签插槽中的default插槽为默认插槽，可不声明插槽名称。

对于标签事件，均可通过 event.detail 获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代 event.detail 中的内容。

另外，需要注意以下几点：

页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
对于有CSP要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。

（以上是官方文档使用说明）通俗点解释就是

html 页面可以用 <template></template> 标签包裹，

Vue 页面要改用 <script type="text/wxtag-template"></script> 包裹

以下是 Vue 页面使用方法

<template><!-- 公众号跳转小程序 --><div class="wx-open-weapp"><wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx":path="`pages/home/index.html?user=123&action=abc`"@launch="handleLaunchFn"@error="handleErrorFn"><script type="text/wxtag-template"><style>.btn {width: 100%; text-align: center;}</style><div class="btn">跳转小程序</div></script></wx-open-launch-weapp></div>
</template><script>
export default {data () {return {}},mounted () {this.weixinConfig();},methods: {handleLaunchFn (e) {console.log('success', e)},handleErrorFn(e){console.log('fail', e.detail);},weixinConfig() {wx.config({debug: false,appId: res.data.appId,timestamp: res.data.timestamp,nonceStr: res.data.nonceStr,signature: res.data.signature,jsApiList: ["scanQRCode","updateAppMessageShareData","updateTimelineShareData",], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2openTagList:['wx-open-launch-weapp']});wx.ready(function() {console.log('config ready');});wx.error(function(){console.log('config error');})},}
}
</script>
<style lang="less" scoped>
.wx-open-weapp {width: 100vw;height: 20vw;#launch-btn {width: 100%;height: 100%;display: flex;align-items: center;background-color: bisque;border-radius: 50px;font-size: 20px;}
}
</style>

注：

1. <script type="text/wxtag-template"></script> 标签中的内容在浏览器及开发工具中都无法显示，需要真机调试才有效

2. 正常情况下，会出现如下提示，大致意思是 wx-open-launch-weapp 标签未注册

需在 main.js 里面忽略编译自定义元素，否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告，即如上图所示提示
Vue.config.ignoredElements = ['wx-open-launch-weapp'];

微信公众号跳转小程序 wx-open-launch-weapp (最全指南及坑)相关推荐

微信公众号跳转小程序方法
1 公众号需要关联小程序 2 跳转方法: wx.navigateToMiniProgram(Object object) 打开另一个小程序 wx.navigateToMiniProgram({app ...
php 微信公众号跳转小程序,微信公众号菜单添加小程序miniprogrampagepath参数详解php开发公众号-小程序怎么放到公众号菜单里-公众号菜单链接小程序...
1. 随着微信小程序功能的开发,2. 已经可以跟公众号打通了,3. 主要有两种方式:4. 1)在公众号文章中插入小程序5. 2)在公众号菜单中添加小程序6. 第一种方式,7. 子恒老师在前面的课程已经 ...
微信公众号跳转小程序流程简单梳理（未完待续）
功能需求:公众号跳转至小程序一.准备工作 1.申请测试号 http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo& ...
uniapp 微信公众号跳转小程序的各种坑
一.引进js http://res2.wx.qq.com/open/js/jweixin-1.6.0.js import wx from "jweixin-module"; let ...
php 微信公众号跳转小程序,微信小程序页面跳转功能
本文主要介绍微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下. 一.效果图从 ...
微信公众号跳转小程序 wx-open-launch-weapp(h5)
一:在vue3中使用 <wx-open-launch-weapp@launch="onlaunch"@error="onerror"path=" ...
微信小程序如何跳转到微信公众号文章，小程序如何关联公众号或订阅号
微信小程序如何跳转到微信公众号文章,小程序如何关联公众号或订阅号前置条件公众号最高管理权限(或能与最高权限管理者配合操作) 小程序开发权限或最高管理权限小程序方面根据官方资料描述,小程序中展示 ...
vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...
公众号跳转小程序首次没有数据_小程序如何从“0”开始运营，变成获客神器...
随着发展,越来越多的企业都感觉到获客难,获客成本高.而小程序的诞生恰恰解决了这些问题.合理的利用小程序的功能,可以帮助商家低成本高效获客,今天我们就来谈谈具体怎么用小程序来拉新引流. 合理的利用小程序 ...

微信公众号跳转小程序 wx-open-launch-weapp (最全指南及坑)