<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://data.zdeer.com/uploads/file/js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- <script src="js/h5.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
//以上是我引入的js
//干活的在下面
<wx-open-launch-weapp id="launch-btn" username="这地方是自己项目的原始id" path="小程序跳转的路径">
<script type="text/wxtag-template">
<style>
.btn-box{
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btn-desc{
width: 100%;
font-size: 14px;
text-align: center;
color: #ffffff;
}
.btn {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 18px;
background-color: #ffffff;
color: #FF4B1A;
border-radius: 10px;
border: 1px solid #ffffff;
margin-top: 20px;
}
</style>
<div class="btn-box">
<div class="btn-desc">请点击下方按钮跳转到左点微信小程序</div>
<button class="btn">点击前往左点微信小程序</button>
</div>
</script>
</wx-open-launch-weapp>
<script type="text/javascript">
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function(e) {
console.log('success');
alert('跳转成功')
});
btn.addEventListener('error', function(e) {
console.log('fail', e.detail);
alert('跳转失败')
});
//以上为原始版本
//加强版如下
// 可以写一些前置条件,比如复制一段文字直接可以实现微信网页和浏览器网页点击跳转而且是点击链接直接跳转
let a = document.querySelector('a')
a.href = '微信公众号生成的跳转链接'weixin:
$(function(){
$("#sp").trigger("click");
});
//下面为公用
const vm = new Vue({
el: "#vm",
data: {
},
created() {
let url = window.location.href.split("?")[0];
url = encodeURIComponent(url)
this.getBanner(url)
},
methods: {
// 请求函数
getBanner(url) {
let that = this
$.get("请求接口", {
request_url: url
},
function(data) {
console.log(data)
let datas = data.data
wx.config({
debug: false, // 调试时可开启
appId: datas.appId, // <!-- replace -->
timestamp: datas.timestamp, // 必填,填任意数字即可
nonceStr: datas.nonceStr, // 必填,填任意非空字符串即可
signature: datas.signature, // 必填,填任意非空字符串即可
jsApiList: ["chooseImage", "updateAppMessageShareData",
"updateTimelineShareData", "wx-open-launch-weapp"
], // 必填,随意一个接口即可
openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})
wx.ready(function() {
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function(res) {
// 设置成功
console.log('成功', res)
}
});
wx.updateTimelineShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function(res) {
// 设置成功
console.log('成功', res)
}
})
})
}, 'json');
}
},
})
</script>
h5页面跳转微信小程序
最新推荐文章于 2024-04-24 16:45:41 发布