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

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

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

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

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

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

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

  mounted() {const ua = window.navigator.userAgent.toLocaleLowerCase()this.show = falsethis.isweixin = falseif (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里面的miniCourseIdsetTimeout(() => {this.show = true}, 2000)}}

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

代码如下（示例）：

down() {var u = navigator.userAgentvar isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1var 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 = falsethis.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.ulrconsole.log(res)}})}},GetQueryString: function(name) {// eslint-disable-next-line no-redeclarevar url = window.location.searchvar reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')var result = url.substr(1).match(reg)// eslint-disable-next-line keyword-spacingreturn result ? decodeURIComponent(result[2]) : null},

4. 手机验证码登录

            <inputv-model="code"type="number"class="input_yzm"maxlength="6"oninput="if(value.length>6) value=value.slice(0,6)"placeholder="请输入短信验证码"><div class="big_btn"><buttonclass="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.messageToast(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.messageToast(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.messageToast(msg)}})},/*** 获取验证码**/// var  = 60;//验证码倒计时time() {const that = thisif (that.wait == -1) {that.innerText = '获取验证码'console.log('-----++++++=====')that.wait = 59} else {that.innerText = that.waitthat.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提供了大量能使我们快速便捷地处理数据的函数和方法。

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

微信扫描二维码登陆的实现原理
作者:程序员自由之路 https://www.cnblogs.com/54chensongxia/p/12530268.html 随着微信的普及,我们可以通过微信扫描设备二维码来实现IoT物联网场景中 ...
微信扫描二维码登陆的原理
作者:吕十田链接:https://www.zhihu.com/question/20368066/answer/23828176 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
前端怎么从H5调起微信扫描二维码?小程序使用扫码功能.
小程序如何使用扫码的功能呢? wx.scanCode(Object object) 参数属性类型默认值必填说明最低版本 onlyFromCamera boolean false 否是否只 ...
前端如何实现微信扫描二维码下载应用，根据手机系统跳转不同页面
菜花记录前端如何实现微信扫描二维码下载应用,根据手机系统跳转不同页面需求 :由于微信扫码无法直接下载需要再跳转到浏览器下载,所以微信扫码页面添加背景图和相关提示草料二维码生成器地址整改之前: ...
微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面
实现微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面而进入商城下载该项目详情地址:gitee.com/DuJiaHui123- 1.创建完之后替换文件里面的ios ...
微信扫描二维码跳转页面
微信扫描二维码跳转页面近在完成一个大作业,反正一个小部分就是扫描二维码,跳转到一个界面去,搜网上也没有什么太有用的信息,觉得难死了.. 后来想想,以前写过一个程序,就是把字符串生成相应的二维码,然后 ...
微信扫描二维码快速登录网站
在近期的一个项目中用到了微信扫描注册.登录网站功能所以整理了下希望对读者有帮助. 首先,你需要有一个没有绑定微信.微信公众平台的邮箱注册成为微信开放平台开发者,在管理中心创建移动应用.或者网站应用获得 ...
（4.3.1.11）微信扫描二维码无法下载apk文件解决办法
最近客户网站扫描二维码下载apk的功能不能用了,客户反应扫描二维码后是一片空白,本以为是文件丢失,可是服务器上面文件位置都是正常的,后来才发现是因为腾讯屏蔽掉了外部文件的链接,经过几次不断的尝试,发现 ...
微信扫描二维码在内置浏览器打不开文件的下载链接怎么办？哪些api接口可以解决...
有哪些api接口可以实现微信扫描二维码在内置浏览器打开文件的下载链接? 经常看到贴吧上有人吐槽微信的检测系统太严格了,动不动就拦截第三方链接.怎么才能解决,怎么才能避免等等一系列的问题.因为平时我也会 ...

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

文章目录