前言:网上搜这个问题 很多答案都是 wx.navigateToMiniProgram(Object object) 我只想说 我搜的是h5跳转小程序 这帮人给的答案都是小程序跳小程序 我服了
正式开始:
1.目录 | 微信开放文档 打开这个网址 我们要使用的是 开放标签
2.文档很清楚了 走 微信jssdk
核心就是这里 还是类似微信jssdk 分享或者扫一扫这种 走验证签名 的流程
这里需要注意的几个细节点
a. jsApiList 的数组里 建议还是写一个验证js接口 虽然 我们不用 不过有文章说这里需要写一个
b. openTagList 里要放我们要使用的开放标签 weapp是跳转小程序 app 是跳转app的
c.页面细节处理
如果你没有使用vue的框架 那么可以使用template标签 那么 按照下面 官网的例子就可以了
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc"
>
<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>
App跳转按钮：如果你使用了vue的框架 例如 我使用了uniapp的框架 那么template标签就会起冲突 这个时候 就需要换个写法 要用script 标签 type注意用text/wxtag-template 并且 因为 这个插槽 是与外界隔离的 所以 css 要写在标签里 可以用style标签 也可以像我一样 直接写style即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
测试页面
<wx-open-launch-app
id="launch-btn1"
appid="xxxxxxxxx"
extinfo="name=gq&age=123"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">App内查看</button>
</script>
</wx-open-launch-app>
<wx-open-launch-weapp
id="xxxxxxxxx"
username="xxxxxx"
path="page/my/login/login"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</body>
<script src="./vconsole.js"></script>
<script src="./jquery.js"></script>
<script>
new VConsole()
$.get("https://xxxxxxxxxx",{url:location.href},function(data,status){
console.info(data)
var obj = data.obj
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: 'xxxxxxxxx', // 必填，公众号的唯一标识
timestamp: obj.timestamp, // 必填，生成签名的时间戳
nonceStr: obj.nonceStr, // 必填，生成签名的随机串
signature: obj.signature,// 必填，签名
jsApiList: [
'onMenuShareTimeline'
], // 必填，需要使用的JS接口列表
openTagList: [
'wx-open-launch-app',
'wx-open-launch-weapp'
] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
});
var btn = document.getElementById('launch-btn1');
btn.addEventListener('launch', function (e) {
console.log('success app');
});
btn.addEventListener('error', function (e) {
console.log('fail app', e.detail);
});
var btn2 = document.getElementById('launch-btn2');
btn2.addEventListener('launch', function (e) {
console.log('success 小程序');
});
btn2.addEventListener('error', function (e) {
console.log('fail 小程序', e.detail);
});
</script>
</html>
最后 告诉几个 你可能会遇到的问题
1.h5页面是要公司且认证过的 然后h5的页面 要是在h5后台的安全域名里
2.小程序也是要公司认证过的 然后h5的页面 也是要配置在小程序里安全域名里 具体叫什么我忘记了
3.开放标签的 username属性 要用小程序的原始id 就是gh开头的 很好找到
4.path的路径 尽管小程序
1. 开放标签的 username属性 要用小程序原始id