h5页面跳转微信小程序

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值