微信H5跳转到小程序或者APP

需要配合 接口

/wxapi/gettokens.php


底部加入

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="/wxapi/wxAPI.js"></script>


跳转按钮

<wx-open-launch-weapp
				  id="launch-btn"
				  username="gh_34d3e71c36b6"
				  path="pages/landing/special/index?subject=1014"
				>
				  <template>
				      <style>
						  .btn { font-weight: bold; padding: 10px; color:rgba(240,200,40)}
					  </style>
				      <div class="btn">点击购买</div>
				    </template>
				</wx-open-launch-weapp>


wxAPI.js

   
   
var phpdata;
var url = window.location.href;
//var url = "http://www.linmutech.com/h5/kazilan/2019/";
console.log(url);
var sharpImgUrl = url.substring(0,(url.lastIndexOf('/')));

function ajax(params) { 
    params = params || {}; 
    params.data = params.data || {}; 
    // 判断是ajax请求还是jsonp请求
    var json = params.jsonp ? jsonp(params) : json(params); 
    // ajax请求 
    function json(params) { 
     // 请求方式,默认是GET
     params.type = (params.type || 'GET').toUpperCase();
     // 避免有特殊字符,必须格式化传输数据
     params.data = formatParams(params.data); 
     var xhr = null;  
   
   
     // 实例化XMLHttpRequest对象 
     if(window.XMLHttpRequest) { 
      xhr = new XMLHttpRequest(); 
     } else { 
      // IE6及其以下版本 
      xhr = new ActiveXObjcet('Microsoft.XMLHTTP'); 
     };
   
   
     // 监听事件,只要 readyState 的值变化,就会调用 readystatechange 事件
     xhr.onreadystatechange = function() { 
      // readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
      if(xhr.readyState == 4) { 
       var status = xhr.status; 
       // status:响应的HTTP状态码,以2开头的都是成功
       if(status >= 200 && status < 300) { 
        var response = '';
        // 判断接受数据的内容类型
        var type = xhr.getResponseHeader('Content-type'); 
        if(type.indexOf('xml') !== -1 && xhr.responseXML) { 
         response = xhr.responseXML; //Document对象响应 
        } else if(type === 'application/json') { 
         response = JSON.parse(xhr.responseText); //JSON响应 
        } else { 
         response = xhr.responseText; //字符串响应 
        }; 
        // 成功回调函数
        params.success && params.success(response); 
      } else { 
        params.error && params.error(status); 
      } 
      }; 
     }; 
     
     // 连接和传输数据 
     if(params.type == 'GET') {
      // 三个参数:请求方式、请求地址(get方式时,传输数据是加在地址后的)、是否异步请求(同步请求的情况极少);
      xhr.open(params.type, params.url + '?' + params.data, true); 
      xhr.send(null); 
     } else { 
      xhr.open(params.type, params.url, true); 
      //必须,设置提交时的内容类型 
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      // 传输数据
      xhr.send(params.data); 
     } 
    } 
    
    //格式化参数 
    function formatParams(data) { 
     var arr = []; 
     for(var name in data) {
      // encodeURIComponent() :用于对 URI 中的某一部分进行编码
      arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); 
     }; 
     // 添加一个随机数参数,防止缓存 
     arr.push('v=' + random()); 
     return arr.join('&'); 
    }

     // 获取随机数 
 function random() { 
    return Math.floor(Math.random() * 10000 + 500); 
   }
  
  }


		
		  ajax({ 
		    url: '/wxapi/gettokens.php',  // 请求地址
			//url: 'http://wxtoken.ruisheng.club/gettokens.php',  // 请求地址
		    type: 'POST',  // 请求类型,默认"GET",还可以是"POST"
		    data: {'key':'tokens','url':url},  // 传输数据
		    success: function(res){  // 请求成功的回调函数
		     // console.log(JSON.parse(res)); 
		     phpdata = eval('('+res+')');
		        wx.config({
		            debug: false,
		                ticket: phpdata.ticket,
		                appId: phpdata.appId,
		                timestamp: phpdata.timestamp,
		                nonceStr: phpdata.nonceStr,
		                signature: phpdata.signature,
		                jsApiList: ['openLocation'],
						openTagList:['wx-open-launch-weapp']
		            });
					
					
					wx.error(function(res) {
					  console.log(res)
					  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
					});
					   
					wx.ready(function () {   //需在用户可能点击分享按钮前就先调用

					
						
					}); 
					
					
		    },
		    error: function(error) {}  // 请求失败的回调函数
		   });
		
		


发布时间:2021-05-28 10:58:37

觉得有用请点个赞吧!
163 0