使用wx-open-launch-weapp完成在微信浏览器vue 页面跳转微信小程序（uni-app）

最新推荐文章于 2024-08-12 10:51:06 发布

假装小清新

最新推荐文章于 2024-08-12 10:51:06 发布

阅读量1.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/zgzga/article/details/117740581

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求：在监测到用户使用微信浏览器访问网站的时候，给他跳转到微信小程序
使用的iview-admin
跳转的小程序是uni-app写的

官网地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

注意事项

微信开放标签有最低的微信版本要求，以及最低的系统版本要求。微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

在使用之前要注意小程序绑定的服务号需要绑定“JS接口安全域名”。特别注意的是wx.config中使用的appId 是公众号的appId 一开始我就写成小程序的了。。。（可能这里有人会问小程序没绑定公众号咋整，我也不知道找一个绑下呗）

1.OK开始，安装 weixin-js-sdk

npm install weixin-js-sdk

这是微信官方 js-sdk，仅将官方 js-sdk 发布到 npm，支持 CommonJS

2.在main.js引入

// 微信开放标签
Vue.config.ignoredElements = ['wx-open-launch-weapp']

3.在使用的页面引入

import wx from "weixin-js-sdk";

<Modal v-model="weixin" :styles="{ top: '40%' }">
      <p>点击打开小程序按钮</p>
      <div slot="footer">
        <wx-open-launch-weapp
          class="openweapp"
          id="launch-btn"
          username="gh_d3c8bb0eb396"
          path="pages/home/home.html"
          @error="error"
          @click="weixinClick"
          @launch="launch"
        >
        <!-- username 是小程序的原id 是gh_开头的 -->
        <!-- path 所需跳转的小程序内页面路径及参数插槽 -->
        <!-- 点击 下方script 里的内容就可以跳转嗷 不一定要是按钮-->
          <script type="text/wxtag-template">
            <style> 
              .btn{
                -ms-touch-action: manipulation;
                cursor: pointer;
                background-image: none;
                border: 1px solid transparent;
                -moz-user-select: none;
                -ms-user-select: none;
                height: 32px;
                padding: 0 15px;
                font-size: 14px;
                border-radius: 4px;
                transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
                color: #515a6e;
                background-color: #fff;
                border-color: #dcdee2;
              }
            </style>
            <button class="btn">打开小程序</button>
          </script>
        </wx-open-launch-weapp>
      </div>
    </Modal>

data() {
    return {
		weixin: false
	}
},
methods：{
	// 这里是先判断如果是微信浏览器才会调用的接口嗷 
	// 判断浏览器的方法在主页里有嗷
	// 获取签名的活教给后端就好啦
	wx() {
	      this.weixin = true;
	      // alert("我是微信浏览器");
	      // 判断是否可以使用开放标签
	      document.addEventListener("WeixinOpenTagsError", function(e) {
	        // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响
	        console.error(e.detail.errMsg);
	      });
	      let formdata = new FormData();
	      formdata.append("url", encodeURIComponent(location.href.split("#")[0])); 
	      // 这里传的是动态的url，后端生成签名的时候要用 
	      // 前端传递的url地址是经过 encodeURIComponent的，所以后台接收到需要 decode 一下
	      GetSign(formdata)
	        .then(res => {
	          let data = res.data;
	          wx.config({
	            // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	            appId: "xxxx", // 必填，公众号的唯一标识，填自己的！
	            timestamp: data.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
	            nonceStr: data.noncestr, // 必填，生成签名的随机串
	            signature: data.signature, // 必填，签名，见附录1
	            jsApiList: ["wx-open-launch-weapp"],
	            openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
	          });
	          let _this = this;
	          wx.ready(function(res) {
	          	// config信息验证成功
	            // console.log(res);
	          });
	          wx.error(function(res) {
	            alert("您的版本号不支持跳转微信小程序,可以安装'职优学app'并使用");
	            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
	          });
	        })
	        .catch(error => {
	          console.log(error);
	        });
	    },
	    weixinClick() {
	      this.weixin = false;
	    },
	    error(e) {
	      alear("小程序打开失败");
	    },
	    launch(e) {
	      // 打开小程序触发的事件
	    },
}

注意：
1.invalid signature签名错误建议按如下顺序检查：
(1)确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
(2)确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
(3)确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括’http(s): //‘部分，以及’？‘后面的GET参数部分,但不包括’#‘hash后面的部分。
(4)确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
(5)确保一定缓存access_token和jsapi_ticket。
(6)确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

2.invalid url domain
这个错误就是“js接口安全域名”设置的问题了，是在公众号里设置的嗷小程序里没有的

这个时候就差不多了还有个小知识点就是页面会出现一个“打开小程序”的按钮，点击按钮才出现跳转小程序的提示框，这里按钮必须是用户主动去点击的，没别的办法，所以我给他又加了一个弹窗Modal。还有在wx-open-launch-weapp中设置style是很麻烦的哦，小心有坑

贴个图吧
在这里插入图片描述