微信内H5跳转小程序

最新推荐文章于 2024-06-06 15:11:07 发布

尙善

最新推荐文章于 2024-06-06 15:11:07 发布

阅读量517

点赞数

文章标签：微信小程序前端

本文链接：https://blog.csdn.net/weixin_45375716/article/details/122306295

版权

前期准备工作：
1：H5必须依赖于服务号，（认证服务号）
2：绑定安全域名（微信公众平台设置）
3：IP白名单
4：将小程序和H5公众号进行关联
5：需要跳转的小程序页面path和原始ID
注意点：
1：页面path可以直接拼接参数正常使用。
2：原始ID不是appId 原始ID是gh开头的可以在小程序后台拿到
上面流程在网上能找到很多相关资料，文章后面会挂上官方文档链接和我个人认为描述最全的一个文章链接

页面需要引入文件http://res.wx.qq.com/open/js/jweixin-1.6.0.js

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 	<wx-open-launch-weapp
	    id="launch-btn"
	    username="gh_xxxxxx"
	    :path=path
	    style="height: 100%;width: 100%; display:block"
	>
	<script type="text/wxtag-template">
		<style type="text/css">
		.btn{width: 80%;}
		</style>
		<button class="btn" :style="'height:'+ btnHeight">打开小程序</button>
	</script>
	</wx-open-launch-weapp>

在使用时需要先进行配置

 		wx.config({
            beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appid, // 必填，公众号的唯一标识
            timestamp: Number(res.data.data.timestamp), // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature,// 必填，签名
            jsApiList: ['chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp']
        });
       
        wx.ready(function() {
          var btn = document.getElementById('launch-btn');
          // 标签初始化完毕，可以进行点击操作
          btn.addEventListener('ready', function (e) {
            console.log('ready');
          });
          // 用户点击跳转按钮并对确认弹窗进行操作后触发
          btn.addEventListener('launch', function (e) {
            console.log('success');
          });
          // 用户点击跳转按钮后出现错误
          btn.addEventListener('error', function (e) {
            alert('fail', e.detail);
          });
          document.addEventListener('WeixinOpenTagsError', function (e) {
            alert('无法使用开放标签' + e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
          });
	      });
	      wx.error(function(err) {
          console.log(err);
          alert("配置失败" + err.errMsg);
	      });

以上代码有三个注意点
1：wx.config的配置参数一定要确保是正确的，可以在wx.error中写console打印（PC端开发时才可以），很多人报错都是因为参数有问题，建议一定要打印出来看看，别盲目自信。
2：debug 调试模式开启之后如果配置失败wx.error触发后也会自动触发wx.ready 这一点不要大惊小怪。
3：当时我有报错 config: fail 排查了很久最后就是发现配置参数传的有问题
以下我在分享几个在本页面中常用到的方法
1：获取当前页面url window.location.origin
2：获取当前页面宽度document.body.clientWidth
3：我使用的Vue单页面开发在使用<wx-open-launch-weapp></wx-open-launch-weapp>标签H5端会报错，可以通过配置一下代码避免报错

`Vue.config.ignoredElements = [
    'wx-open-launch-app',
    'wx-open-launch-weapp'
  ]`

4：获取当前页面url参数的方法

// 调用 this.getQueryVariable('key')
 	getQueryVariable (variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
      }