天天看點

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>
           

繼續閱讀