Vue3+h5项目用Android支付宝打开白屏,android微信+IOS微信、支付宝打开正常

这篇具有很好参考价值的文章主要介绍了Vue3+h5项目用Android支付宝打开白屏,android微信+IOS微信、支付宝打开正常。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题:使用vue3写的H5网页,用Android支付宝打开title能显示,内容全是白屏。

推测:浏览器内核问题;

微信使用腾讯x5内核,IOS使用系统浏览器内核;so,看看Android支付宝APP使用的内核是什么.

下拉看到支付宝使用的UC浏览器内核;

把浏览器内核检测工具 Browser kernel v2.6 测试查看浏览器内核版本用二维码生成,支付宝扫码进入查看浏览器内核版本;

Vue3+h5项目用Android支付宝打开白屏,android微信+IOS微信、支付宝打开正常,javascript,前端

 浏览器内核版本是Chrome 69.0.3497.100,发现用UC浏览器打开网页正常,UC浏览器查看内核版本,UC浏览器的内核版本高。so,这期间发生什么?

找一个相同版本的内核浏览器

使用360极速浏览器或用Android写一个webview兼容69版本,以用来查看为什么显示白屏;

发现报错:

Uncaught ReferenceError: globalThis is not defined
    at overlay.ts:140

在globalThis - JavaScript | MDN

Vue3+h5项目用Android支付宝打开白屏,android微信+IOS微信、支付宝打开正常,javascript,前端

可以看到chrome71版本才添加了globalThis ,所以报错未定义。 

解决方式一  基于vite打包

  1. npm install @vitejs/plugin-legacy
  2. vite.config.ts配置
    import legacy from '@vitejs/plugin-legacy';
    
    
    
      build: {
        target: 'es2015',
      },
    
    plugins:[
     legacy({
          targets: ['Chrome 69'],
          additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
          modernPolyfills: true,
        }),
    ]
  3. index.html   添加globalThis声明  
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + Vue + TS</title>
        <script>
            this.globalThis || (this.globalThis = this)
        </script>
    </head>
    
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts">
            this.globalThis || (this.globalThis = this)
        </script>
    </body>
    
    </html>

    使用360极速浏览器和支付宝APP测试打开都正常显示;

git 地址 h5_vant: vant4+vue,屏幕适配文章来源地址https://www.toymoban.com/news/detail-665489.html

到了这里,关于Vue3+h5项目用Android支付宝打开白屏,android微信+IOS微信、支付宝打开正常的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3前端实现微信支付

    要在Vue3前端实现微信支付,你需要按照以下步骤进行操作: 在微信支付官网上注册一个商户号,并下载微信支付SDK。 在你的Vue3项目中安装微信支付的npm包,例如: npm install weixin-js-sdk --save 。 在Vue3项目中创建一个js文件,在其中编写支付相关的代码,如下所示: 4.在Vue3项目

    2024年02月16日
    浏览(35)
  • uniapp项目编译成H5后跳转到微信小程序(支持微信扫码、支付宝扫码)

    uniapp项目编译成 H5 后跳转到 微信小程序 (支持微信H5、支付宝H5) 场景:1、微信扫码跳转到该H5中后点击某事件(或者不点击直接跳转)需要跳转到微信小程序;2、支付宝扫码跳转到H5中后点击某事件(或者不点击直接跳转)需要跳转到微信小程序 思路:调用后端接口返回

    2024年02月13日
    浏览(50)
  • android升级SDK 到30,导致微信登录,支付失败

    当时为了将应用上传 google play ,所以升级了sdk 版本号 targetSdkVersion = 30 ,后来发现升级之后,应用中微信登录,微信支付,都拉不起来了,点击登录,或者支付,没有任何响应。 通过看日志发现, sendReq failed for wechat app signature check failed 是微信没有被拉起, 后来了解资料发现

    2024年02月05日
    浏览(49)
  • 【vue】uniapp vue3 vite代理设置问题【H5 微信小程序】

    基于vue3版本的uniapp运行h5和微信小程序 uniapp运行h5请求接口成功,运行微信小程序请求接口不成功 vite.config.ts配置proxy .env配置请求接口域名 request.ts 请求接口文件 微信小程序识别不了代理的配置 需要判断当前是h5还是微信小程序端,对请求接口文件进行修改,其他文件不修

    2024年02月09日
    浏览(55)
  • vue3-pc端生成微信二维码、扫码支付监听支付回调(WebSocket)功能实现

    项目场景:后台系统中采购订单列表需要支持微信扫描支付功能,支付成功需要返回到订单列表。 调用接口接收后端返回数据, npm install qrcode --save 安装插件,处理返回数据生成二维码。 1. 后端接口返回数据如下: 2. 前端代码如下: 3. 效果图如下: 生成二维码功能到这就完

    2024年02月12日
    浏览(49)
  • Vue(h5)与App(android,ios)端交互详解

    最近开发vue与app交互,总结了一下开发心得。我是一名Android开发者,vue开发这块也稍有涉足,在android或者IOS中展示h5可以减少工作量,也能满足用户体验性。下面主要以Android和Vue方法介绍为主。 上菜了     三、 vue代码 注意,Vue中的方法通常是写在vue实例的methods中的,ap

    2024年02月10日
    浏览(37)
  • ThinkPHP 5 支付宝微信支付(支付宝H5,微信H5、APP支付、公众号支付)

     Pay.php支付控制器 模型:Weixin.php Weixin.php Alipay.php 支付宝需要的submit文件: 点击下载 wx.html在使用微信客户端支付时需要的页面    

    2024年02月08日
    浏览(48)
  • taro+vue3 搭建一套框架,适用于微信小程序和H5

    安装 Taro。可以在终端输入以下命令进行安装: 创建项目。使用以下命令创建 Taro+Vue3 项目: 其中,myApp 是项目名称。 进入项目并启动。使用以下命令进入项目并启动: 注意,需要先进入对应的目录再启动。 编写代码。在 src 目录下编写代码,可以像使用 Vue 开发 Web 应用程

    2024年02月10日
    浏览(54)
  • vue移动端H5调起手机发送短信(兼容ios和android)

    移动端h5页面调起手机发送短信功能,ios和android的兼容写法不一样。 android  ios

    2024年02月08日
    浏览(44)
  • uniapp 发送全文件 支持App端ios、android,微信小程序,H5

    由于uniapp提供的API在app端只能上传图片和视频,不能上传其他文件,说以只能借助插件了。  ios端用的这个插件 获取到文件对象 免费的 ios-uniapp 文件选取word,pdf,xls等文件 - DCloud 插件市场 uniapp iOS文件选取 iOS选取text,pdf,word,doc,xls,ppt https://ext.dcloud.net.cn/plugin?id=1311 这个是返回一

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包