注册

微信H5网页跳转小程序,这一篇就够了!

鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去?

所以鄙人记录下这篇文章,以便帮助到一些人。

静态网页跳转小程序

废话不多说,上才艺!

<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
<title>小程序跳转测试</title>
</head>
<body style="text-aligin:center;">
<wx-open-launch-weapp
id="launch-btn"
username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
path="/pages/index/index.html"> <!-- 这里填写跳转对于小程序的页面 注意这里的 .html -->
<template>
<style>.btn { padding: 12px width:200px;height:50px;}</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>

<script src="/js/jquery-1.12.4.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必须是1.6版本 -->

<script>

$(function () {

//=== 这里仅仅是获取 config 的参数以及签名=== start
var url = location.href;
var functions = "updateAppMessageShareData";
$.get("https://xxx.com/wechat/jssdk/config", {"functions":functions}, function(response){
if(response.status == 0) {
var info = response.data;
wx.config({
debug: false,
appId: info.appId,
timestamp: info.timestamp,
nonceStr: info.nonceStr,
signature: info.signature,
jsApiList: info.jsApiList,
openTagList: ['wx-open-launch-weapp']//这里直接添加,什么都不用管
});
}
});
//=== 获取 config 的参数以及签名=== end

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>

开放对象:

1、已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

客户端要求

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

注意:微信开发者工具暂时不支持!所以建议直接使用手机访问进行测试。

其他说明

这个功能其实很简单,并没有想象中那么复杂。 实质是在你能够做到自定义分享到朋友圈或朋友的基础上,config多了

openTagList: ['wx-open-launch-weapp']

再者需要注意的是,path的页面url 必须带有 .html 带参数的话则参数跟在html的后面。

<wx-open-launch-weapp
id="launch-btn"
username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
path="/pages/index/index.html">

<wx-open-launch-weapp
id="launch-btn"
username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
path="/pages/index/index.html?id=123">

VUE项目H5跳转

1、先请求接口配置微信需要的一些参数

// 需要先请求后端接口 
let url = window.location.href.split("#")[0];
let shareConfig = await shareViewAPI.getWechatConfig({url});
let _this = this;
// 将接口返回的信息配置
wx.config({
debug: false,
appId: _this.app_id, // 必填,公众号的唯一标识
timestamp: shareConfig.timestamp, // 必填,生成签名的时间戳
nonceStr: shareConfig.nonceStr, // 必填,生成签名的随机串
signature: shareConfig.signature, // 必填,签名
jsApiList: ["onMenuShareAppMessage"], // 必填,如果只是为了跳转小程序,随便填个值都行
openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
});

配置的方法需要放到created、mounted或者beforeRouteEnter里

2、在页面中添加wx-open-launch-weapp标签

<!-- 关于username 与 path的值 参考官方文档  -->
<wx-open-launch-weapp
id="launch-btn"
username="gh_***"
path="/pages/index/index.html"
@error="handleErrorFn"
@launch="handleLaunchFn"
>
<!-- vue中需要使用script标签代替template插槽 html中使用template -->
<script type="text/wxtag-template">
<p class="store-tool_tip">点击进入选基工具</p>
</script>
</wx-open-launch-weapp>
methods: {
handleLaunchFn(e) {
console.log("success", e);
},
handleErrorFn(e) {
console.log("fail", e.detail);
}
}

3、好啦

备注:
使用该标签的时候可能会报错,在main.js文件中添加上该行代码即可

// 忽略打开微信小程序的组件
Vue.config.ignoredElements = ['wx-open-launch-weapp']


0 个评论

要回复文章请先登录注册