vue h5项目跳转微信小程序_vue h5跳转小程序

近日做了个vue h5跳转微信小程序的需求，随手记录一下，首先的准备工作要先做好，根据官方文档设置安全域名设置白名单引入js等等，一种是微信小程序环境下的，一种是微信浏览器下的，微信官方文档

弄完之后代码部分如下：需要先判断在什么环境

getWxEnv() {
      let ua = navigator.userAgent.toLowerCase();
      let that = this
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
        wx.miniProgram.getEnv((res) => {
          if (res.miniprogram) {
            that.isWeChat = 1  //1微信小程序 2微信浏览器 3不在微信
          } else {
            that.isWeChat = 2
          }
        })
      } else {
        that.isWeChat = 3
      }
    },

微信浏览器情况下：这里是样式部分，username是小程序原始id,path是要跳转的页面路径（后面要加.html) .open-launch-weapp-btn是样式部分

<wx-open-launch-weapp id="launch-btn" username="gh_e4cb5edfa6c4" path="pagesActivity/kjActivity/index.html">
        <script type="text/wxtag-template">
           <style>.open-launch-weapp-btn { 
            width: 234px;
            border: none;
            background: #ff4c5a;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            border-radius: 24px;
            margin: 20px auto;
            padding: 12px 0;
            margin-left: 50%;
            transform: translateX(-117px);
            text-align: center; }</style>
          <button class="open-launch-weapp-btn">跳转小程序</button> 
    	</script>
      </wx-open-launch-weapp>

 以下是js部分：完成后如果一直弹窗提示的话要把config配置里边的debug改为false

this.signParams.url = window.location.href //获取域名
          this.$api.post("/def/user/getWxTicketSign", this.signParams).then((res) => {//这里是通过后端接口获取wx.config的配置信息
            if (res) {
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
                appId: res.appId, // 必填，公众号的唯一标识
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.nonceStr, // 必填，生成签名的随机串
                signature: res.signature,// 必填，签名
                jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表 随便填
                openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
              });
              let that_ = this
              wx.ready(function () {
                console.log("success");
              });
              wx.error(function () {
                that_.$toast('跳转小程序失败')
              });
            } else {
              this.$toast(res.msg)
            }
          });

微信小程序下：要绑定到点击事件上才有效哦

 wx.miniProgram.navigateTo({
        url: '/pagesActivity/kjActivity/index',   //指定跳转至小程序页面的路径
        success: function () {
          console.log('success');   //页面跳转成功的回调函数
        }
      })