实习记录（H5页面）微信扫描二维码登陆注册，随后跳转浏览器。实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

实习记录，碰到的自己没有解决的问题，问了人才知道怎么实现的功能

---

1.微信跳转至浏览器，按钮样式与触发弹窗改变？

代码如下（示例）：
在浏览器打开的页面部分显示：

    <div
      v-if="!wei"
      class="noweixin"
    >
      <van-button
        type="promary"
        class="btn"
        @click="judge('open')"
      >
        立即打开
      </van-button>
      <van-overlay
        :show="show"
        @click="show = false"
      >
        <div
          class="big_pop"
          @click.stop
        >
          <span class="text_6">无法打开</span>
          <span class="text_7">可能您尚未安装***App,点击立即下载试试吧~</span>
          <button
            class="left_pop"
            @click="show = false"
          >取消</button>
          <button
            class="right_pop"
            @click=" down "
          >下载</button>
        </div>
      </van-overlay>
    </div>

在微信内置浏览器打开的部分：

    <div
      v-if="wei"
      class="inweixin"
    >
      <van-button
        type="primary"
        class="btn"
        @click="judge('weixin')"
      >
        登录成功，立即打开
      </van-button>
      <van-overlay
        :show="isweixin"
        @click="isweixin = false"
      >
        <div
          class="wrapper"
          @click.stop
        >
          <img
            src="~@/assets/images/lead.png"
            alt=""
          >
        </div>
      </van-overlay>
    </div>

js代码：
要实现进入页面，判断是否为微信内置浏览器，并根据浏览器类型，打开不同的页面。
添加mounted() {}，判断，返回是否为微信。
微信内置浏览器页面：点击登陆成功按钮以后，显示弹窗，弹窗为引导去浏览器
浏览器页面：点击立即打开，判断是否下载***app，如果下载跳转，如果没有，引导点击下载，跳转下载。

判断是否已经下载过app，根据定时器判断，如果在两秒内可以跳转到app，则为已经下载，反之没有。

  mounted() {
    const ua = window.navigator.userAgent.toLocaleLowerCase()
    this.show = false
    this.isweixin = false
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.wei = true
    } else {
      this.wei = false
    }
  },
      judge(flag) {
      if (flag == 'weixin') {
        this.isweixin = true
      } else if (flag == 'open') {
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
          window.location.href = `xlsxapp://requiopqkl5u9rlwgj3tputr?miniCourseId=${this.miniCourseId}` // ios app协议
          setTimeout(() => {
            this.show = true
          }, 2000)
        } else if (navigator.userAgent.match(/android/i)) {
          window.location.href = `https://a.app.qq.com/o/simple.jsp?pkgname=com.HotelZhiDing.zhiding365`// android app协议 其中miniCourseId 就是扫码获取的url里面的miniCourseId
          setTimeout(() => {
            this.show = true
          }, 2000)
        }
      }

2.安卓与ios的下载***app

代码如下（示例）：

down() {
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      var urls = {
        'android': 'https://a.app.qq.com/o/simple.jsp?pkgname=com.HotelZhiDing.zhiding365',
        'ios': 'https://itunes.apple.com/cn/app/%E4%B8%89%E5%86%9C%E5%80%9F%E6%AC%BE/id1284453273?mt=8'
      }
      // 三元运算
      // window.location.href = isAndroid? urls.android : isiOS? urls.ios : urls.other;
      // 简化
      if (isAndroid) {
        window.location.href = urls.android
      } else if (isiOS) {
        window.location.href = urls.ios
      }
    }

3.解析url，获取地址栏携带的参数

  mounted() {
    this.state = false
    this.codeNUmber = this.GetQueryString('codeNUmber')
    this.hotelId = this.GetQueryString('hotelId')
    this.dealerId = this.GetQueryString('dealerId')
    this.directType = this.GetQueryString('directType')
    this.k = this.GetQueryString('k')
    if (this.codeNUmber) {
      this.state = true
    }
    if (this.k.length > 0) {
      getArgotUrl({ k: this.k }).then((res) => {
        if (res.code == 200 && res.data.ulr) {
          window.location.href = res.data.ulr
          console.log(res)
        }
      })
    }
  },


    GetQueryString: function(name) {
      // eslint-disable-next-line no-redeclare
      var url = window.location.search
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var result = url.substr(1).match(reg)
      // eslint-disable-next-line keyword-spacing
      return result ? decodeURIComponent(result[2]) : null
    },

4. 手机验证码登录

            <input
              v-model="code"
              type="number"
              class="input_yzm"
              maxlength="6"
              oninput="if(value.length>6) value=value.slice(0,6)"
              placeholder="请输入短信验证码"
            >
            <div class="big_btn"><button
              class="get_code_btn"
              @click="vCodeBtn"
            >{{ innerText }}</button></div>

    login: function() {
      if (this.checked == false) {
        Toast({
          message: '请先同意协议内容'
        })
      } else {
        if (!this.state) {
          const data = {
            mobile: this.phone,
            code: this.code,
            codeNUmber: this.$route.query.codeNUmber
          }
          verificationCode(data).then(res => {
            console.log(res)
            if (res.code == 200) {
              Toast('登陆成功')
              localStorage.setItem('mid', res.data.memberId)
              localStorage.setItem('token', res.data.token)
              localStorage.setItem('time', Date.parse(new Date()))
              this.$router.push({ name: 'loginBrowser' })
            } else {
              const msg = res.msg || res.message
              Toast(msg)
            }
          })
        } else {
          const data = {
            mobile: this.phone,
            code: this.code,
            dealerId: this.dealerId || '',
            inviteCode: this.$route.query.codeNUmber
          }
          h5Register(data).then(res => {
            if (res.code == 200) {
              Toast('登陆成功')
              localStorage.setItem('mid', res.data.memberId)
              localStorage.setItem('token', res.data.token)
              localStorage.setItem('time', Date.parse(new Date()))
              this.$router.push({ name: 'loginBrowser' })
            } else {
              const msg = res.msg || res.message
              Toast(msg)
            }
          })
        }
      }
    },

    // 获取验证码
    messageAjax(_this) {
      console.log(222)
      const data = {
        mobile: this.phone
      }
      sendVerificationCode(data).then(res => {
        console.log(res)
        this.time(_this)
        if (res.code == 200) {
          Toast('验证码发送成功')
        } else {
          const msg = res.msg || res.message
          Toast(msg)
        }
      })
    },
    /**
     * 获取验证码
     **/
    // var  = 60;//验证码倒计时
    time() {
      const that = this
      if (that.wait == -1) {
        that.innerText = '获取验证码'
        console.log('-----++++++=====')
        that.wait = 59
      } else {
        that.innerText = that.wait
        that.wait--
        setTimeout(function() {
          that.time()
        }, 1000)
      }
    },
    // 验证码事件绑定
    vCodeBtn: function() {
      var phone = this.phone
      // 手机号正则
      var phoneReg = /^1\d{10}$/
      if (!phone || !phoneReg.test(phone)) {
        Toast('请输入有效的手机号码！')
        return false
      } else {
        console.log(111)
        this.wait == 59 ? this.messageAjax(this) : this
      }
    }

5. 用户协议和隐私协议

是使用路由跳转

    xieyi: function() {
      this.$router.push({ name: 'usedeal' })
    },
    zhengce: function() {
      this.$router.push({ name: 'privacyPolicy' })
    },

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。