h5判断是否在微信环境下

微信环境h5跳转小程序页面：
1、判断环境

var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
      wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) {
          // 小程序中打开h5跳转小程序页面
          wx.miniProgram.switchTab({
        	url: "/pages/personal/index",
      		});
        } else {
          // 非小程序
        }
      });
    } else {
      console.log("不在微信里");
    }

小程序中h5跳转小程序页面：

微信原文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
2、浏览器环境跳转小程序
2.1 引入js-sdk注入权限
微信原文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#11

  created() {
    this.setJsTicket();
  },
  mounted() {
    // 打开小程序
    var btn = document.getElementById("launch-btn");
    btn.addEventListener("launch", function (e) {
      console.log("success", e);
    });
    btn.addEventListener("error", function (e) {
      alert("小程序打开失败");
      console.log("fail", e.detail);
    });
  },
  methods:{
	 setJsTicket() {
      axios
        .get(接口, {
          参数
        })
        .then((res) => {
          window.wx.config({
            debug: false,
            appId: res.data[0],
            timestamp: res.data[1],
            nonceStr: res.data[4],
            signature: res.data[3],
            jsApiList: ["wx-open-launch-weapp"],
            openTagList: ["wx-open-launch-weapp"],
          });
        });
    },
  }

2.2 小程序开放标签
微信原文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

 <wx-open-launch-weapp
                  style="
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                  "
                  id="launch-btn"
                  username="gh_aa5bce5cb179"
                  path="pages/personal/index"
                >
                  <script type="text/wxtag-template">
                    <style>.btn{position:absolute; top: 0; left: 0; width: 100%; height: 100%;opacity:0}</style>
                      <div class="btn">去实名</div>
                  </script>
                </wx-open-launch-weapp>

2.3 最终效果部署上服务器才会显示
出现这个图片就是注入成功：